Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Wikedhart18/nextjs-ai-chatbot/llms.txt

Use this file to discover all available pages before exploring further.

​
What are artifacts?

Artifacts is a special interface mode that opens alongside the chat when the AI produces substantial content — anything the user is likely to save or reuse. Instead of rendering long content inline in the chat, the AI opens a full-height editor panel on the right side of the screen while the conversation remains on the left. The AI uses two tools to manage artifact content:
  • createDocument — opens a new artifact panel and streams content into it in real time.
  • updateDocument — rewrites or patches an existing artifact based on a follow-up instruction.

​
When the AI creates an artifact

The AI creates an artifact (rather than replying inline) when the content meets any of the following criteria:
  • Substantial content longer than approximately 10 lines.
  • Code (always placed in a code artifact).
  • Content the user is likely to save or reuse, such as emails, essays, or scripts.
  • A single self-contained code snippet.
The AI does not create an artifact for short informational answers, conversational replies, or when you explicitly ask to keep the response in the chat.
The AI waits for your feedback before updating a document immediately after creating it. Ask it to make changes or click one of the toolbar actions to trigger an update.

​
Artifact types

Text document

Prose content such as essays, emails, and reports. Rendered in a rich text editor with inline suggestion support.

Code (Python)

Self-contained Python snippets with syntax highlighting, code execution, and a console output panel.

Spreadsheet (CSV)

Tabular data rendered in a spreadsheet editor. Supports in-place editing and CSV clipboard export.

Image

AI-generated images (via DALL-E). Displayed in an image viewer with clipboard copy support.
Code execution is only available for Python. If you request a language other than Python, the AI will let you know it is not yet supported.

​
How the AI creates and updates documents

​
Creating a document

When the AI calls createDocument, the artifact panel animates open and content streams in live. For text artifacts, the panel becomes visible after roughly 400 characters have streamed in. For code artifacts, the panel becomes visible after roughly 300 characters.

​
Updating a document

Send a follow-up message describing what you want changed. The AI calls updateDocument and either rewrites the full document or applies a targeted patch, depending on the scope of the change. Changes are saved automatically via a POST to /api/document. The artifact header shows Saving changes… while a debounced write is in progress, and then switches to a relative timestamp (e.g., “Updated 2 minutes ago”) once saved.

​
Editing artifacts directly

You can edit artifact content by typing directly in the editor panel — no need to ask the AI for every small change.
  • Text documents — the rich text editor accepts direct input.
  • Code — the code editor accepts direct input.
  • Spreadsheets — cells are editable in place.
Changes are debounced and saved automatically to the server after 2 seconds of inactivity.

​
Version history and diff view

Every time the AI (or you) saves a changed version of a document, a new version entry is created. The artifact toolbar exposes navigation controls to move through these versions.
ActionControl
View previous versionUndo arrow button
View next versionRedo arrow button
Toggle diff viewClock/rewind button
The diff view renders a side-by-side comparison of the selected version and the one before it, with additions highlighted in green and removals in red.When you are viewing an older version, a Version footer bar appears at the bottom of the panel with navigation controls and a Restore this version action.
Version controls are disabled when you are already on the first or latest version.

​
Requesting AI suggestions on a document

The floating toolbar button (visible when the artifact is at the latest version) lets you send quick AI requests without typing in the chat input.
  • Add final polish — asks the AI to check grammar, add section titles, and improve overall readability.
  • Request suggestions — asks the AI to add inline writing suggestions that can be accepted or rejected individually.

​
Code execution console

Code artifacts include a built-in Python execution environment powered by Pyodide (WebAssembly Python, loaded from CDN).
1

Open a code artifact

Ask the AI to write a Python snippet. The artifact panel opens automatically.
2

Click the Run button

The Run (play) button appears in the artifact action bar at the top right. Click it to execute the code.
3

View console output

A Console panel appears below the code editor showing stdout output. If the code uses matplotlib, charts are rendered as inline images in the console.
4

Clear output

Click the clear button in the console header to remove previous run output.
Code runs entirely in the browser using WebAssembly. Code that requires file system access, network requests, user input (input()), or infinite loops will not work as expected.
Pyodide automatically installs packages imported in your code (e.g., numpy, pandas) from its package index before running. A loading message is shown in the console while packages install.

Build docs developers (and LLMs) love

Get started for freeTalk to us