UI for AI agents

Add AI artifacts & canvas to your app

When an AI generates something substantial — code, a document, a design — it deserves its own space beside the chat. Render it as an artifact with copy, edit, download, and version controls, then close out the run with a completion dialog.

Components you'll use

• AI ArtifactRendered output panel for AI-generated content in React: toolbar with copy, edit, download, fullscreen, and version chips. The artifacts/canvas UI. Install via the shadcn CLI.
• Canvas ShellLayout shell for canvas workspaces with top bar, left rail, right dock, and bottom slot regions.
• Completion DialogSignal the end of an AI task or workflow in React with a completion dialog covering loading, error, and success states. Install via the shadcn CLI.

Install

Add every component above with the shadcn CLI. You own the source after install.

pnpm dlx shadcn@latest add https://ui.vllnt.com/r/ai-artifact.json
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/canvas-shell.json
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/completion-dialog.json

Frequently asked

What is the artifacts / canvas pattern?

It's the side panel that holds substantial AI output (popularized by Claude Artifacts and ChatGPT Canvas). AI Artifact gives you the rendered output area with a toolbar and version chips; Canvas Shell provides the surrounding workspace.