Artifact

A Claude-style docked side-panel/canvas shell (header, title, description, copy/download/refresh/close toolbar, scrollable content) that renders generated code, docs, SVG, or HTML beside the chat. Presentational — driven by a local model vi.

Library

LocalMode

Framework

React

Type

component

License

MIT

Dependencies

lucide-react

Install

npx shadcn add @localmode/ui/ui/artifacts/artifact

Files

• apps/ui/registry/localmode/artifacts/artifact/artifact.tsx
• apps/ui/src/lib/browser-utils.ts
• apps/ui/registry/localmode/lib/utils.ts

Source

https://github.com/LocalMode-AI/LocalMode

Categories

• AI Element Components
• React AI Element Components
• Tailwind CSS AI Element Components
• Artifact Components
• Tailwind CSS Artifact Components
• Navigation Components
• React Navigation Components
• Tailwind CSS Navigation Components
• Sidebar Components
• React Sidebar Components
• Tailwind CSS Sidebar Components

More from LocalMode

• Chart Artifact
• Data Table Artifact
• Code Diff Viewer
• Audio Scrub Player
• Mic Selector
• Streaming Speech Panel
• Synced Transcript Viewer
• Transcribed Note Card
• Voice Button
• Voice Comparison Panel
• Voice Orb
• Voice Picker