Artifacts

Artifacts is a built-in code real-time rendering plugin in Tinychat, which can directly render AI-generated code into visual results, allowing you to preview the code effects instantly. This revolutionary feature breaks the boundaries of AI-human interaction, enabling you to create and visualize various formats of content in real-time.

Design Purpose: Currently, the interaction interface between large models and humans is mainly text-based. If we can present text in a more intuitive way and render the code written by AI, it would be a very pleasant experience.

It is like a dynamic workspace where users can directly generate and edit content such as documents, code snippets, design prototypes, etc., and view and adjust these contents in real-time in a dedicated area next to the conversation window. This feature is particularly suitable for ordinary people because it simplifies complex tasks into intuitive operations, making it easy to use without professional skills.

Usage Instructions

1. Enable the Artifacts plugin

   

2. Select a model that supports Function Call

📘 Tip: For model capabilities, see: Basic Usage - Understanding Models

3. Send your programming request

   For example:

Help me generate a time machine webpage: Requirements:

1. High-tech cool gradient background image

2. An input box for users to enter the year:

3. Based on the year entered by the user, return the popular elements of that era, such as music, movies, fashion styles, etc., with simple introductions and related images, as if taking a time machine back to the past, evoking users' memories and curiosity. There is a "Try Again" button at the bottom

4. The page should be adaptive and usable on both computers and mobile phones:

5. Output in HTML format

Usage Examples

Classroom Roll Call Mini Program

Prompt:

I want to develop a random student roll call webpage. The style should be fresh and nice, with playful internet slang in the copy. 
Now I need to output high-fidelity prototypes. Please help me complete the prototype design of all interfaces through the following methods, and ensure that these prototype interfaces can be directly used for development:

1. User Experience Analysis: First, analyze the main functions and user needs of this webpage to determine the core interaction logic.

2. High-Fidelity UI Design: As a UI designer, design interfaces that are close to real PC design standards, using modern UI elements to ensure a good visual experience.

3. HTML Prototype Implementation: Use HTML + Tailwind CSS (or Bootstrap) to generate all prototype interfaces, and use FontAwesome (or other open-source UI components) to make the interfaces more refined and closer to reality

4. Only one roll call page is needed, no need to consider other management pages, write it in one HTML file

– Realism Enhancement: 

– Use real UI images instead of placeholder images (can be selected from Unsplash, Pexels, Apple official UI resources).

Please output the HTML code according to the above requirements, and ensure that it can be used for actual development. The code should be as simple as possible, only one page is needed

Tetris Mini Game

Prompt:

Please help me make a Tetris mini game, the page should be beautiful, the operation reminders should be clear, use Artifacts for rendering, the code should be as concise as possible

Creative Webpage

Prompt:

Help me generate a time machine webpage: Requirements:
1. High-tech cool gradient background image
2. An input box for users to enter the year:
3. Based on the year entered by the user, return the popular elements of that era, such as music, movies, fashion styles, etc., with simple introductions and related images, as if taking a time machine back to the past, evoking users' memories and curiosity. There is a "Try Again" button at the bottom
4. The page should be adaptive and usable on both computers and mobile phones:
5. Output in HTML format

Create SVG Knowledge Card

Please help me create a beautiful knowledge card, I want to learn about: How to prevent myopia

Generate Charts Based on Data

You are a product manager, I want to analyze the performance of the above students, analyze from various dimensions, please use echar for visual display, please display the analysis charts of various dimensions in one HTML, you can use FontAwesome and other open-source icon libraries to make the prototype more refined and closer to reality

There are more and more usage scenarios, looking forward to your exploration......

Features

Code Rendering

• HTML/CSS real-time preview
• JavaScript interactive display
• SVG graphic rendering
• Chart.js, echar chart generation
• Markdown format rendering

Visualization Types

• Webpage layout preview
• Data chart display
• Animation effect demonstration
• Interactive component testing

Real-Time Preview

• Code instant execution
• Results real-time display
• Interactive effect demonstration
• Error instant feedback

Usage Scenarios

Frontend Development

• Page layout debugging
• Style effect preview
• Component interaction testing
• Responsive design verification

Data Visualization

• Statistical chart display
• Data trend analysis
• Relationship network diagram
• Map data display

Supported Languages

• HTML
• CSS
• JavaScript
• SVG
• Chart.js

Usage Advantages

Convenience

• No environment configuration required
• Zero delay rendering
• What you see is what you get
• Fast iteration debugging