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.
Composants que vous utiliserez
- 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.
Installation
Ajoutez chaque composant ci-dessus avec la CLI shadcn. Vous possedez le source apres installation.
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.jsonQuestions frequentes
- 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.