Artifacts - Generative UI

Artifacts let VLTRON render generated React components, HTML, SVG, Markdown, and Mermaid content in a dedicated interactive view. Users can continue the conversation to revise the result while keeping the generated content separate from the chat response.

Enable Artifacts for an Agent

1. Create or edit an Agent
2. Open Add tools and select Artifacts
3. Choose an artifact instruction mode
4. Save the agent

The available modes are:

• Normal: Standard instructions for React, HTML, SVG, Markdown, and Mermaid artifacts
• shadcn/ui: Adds shadcn/ui component-library guidance for polished interfaces
• Custom: Artifact rendering enabled with no built-in instructions

What Artifacts Support

• Interactive React components and HTML pages
• SVG images and Mermaid diagrams
• Rendered Markdown documents
• Iterative updates through follow-up messages
• Any model available to the configured agent

Preview and Export

Use the fullscreen control in a rendered artifact preview to expand it to the complete browser display. The control follows browser Fullscreen API state, exits normally with Escape or browser controls, and is hidden when fullscreen is unavailable.

Mermaid diagrams appear as compact inline cards that can open in the artifact panel. Export a diagram as SVG or PNG from either the inline card or the panel.