skills.rest
edheltzel
edheltzelCOMMUNITY
Explore all skills by this author →
Website𝕏@edheltzelGitHub

ai-elements

Build AI chat interfaces with Vercel AI Elements React components.

2|Updated May 25, 2026
Search Tags:#typescript#react#shadcn#vercel ai sdk#chat interface#ai-elements#workflow ui
One-click install
npx skills add https://github.com/edheltzel/Do-Skills --skill ai-elements-edheltzel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ai-elements
Source: https://github.com/edheltzel/Do-Skills/tree/main/skills/engineering/frontend/do-review-frontend/references/ai-elements
Command: npx skills add https://github.com/edheltzel/Do-Skills --skill ai-elements-edheltzel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building AI-powered chat interfaces, tool execution displays, and approval workflows from scratch requires significant UI engineering effort, including auto-scrolling, streaming states, and file attachment handling. ## Core Features & Use Cases - Conversation UI: Compose chat interfaces with Conversation, Message, and PromptInput components featuring auto-scroll, markdown streaming, and file attachments. - Workflow Visualization: Display tool execution states, approval confirmations, reasoning traces, and job queues using Tool, Confirmation, Reasoning, and Queue components. - ReactFlow Canvas: Create workflow diagrams with custom Node and Edge components built on ReactFlow. - Use Case: When building a chat interface that shows an AI agent calling tools and requesting user approval, use the Tool and Confirmation components to render execution states and approval buttons wired to the Vercel AI SDK state machine. ## Quick Start Ask the AI to build a chat interface using AI Elements with Conversation, Message, and PromptInput components installed via the shadcn registry.

Frequently Asked Questions about ai-elements

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install Vercel AI Elements components?▼

Install each component individually via the shadcn registry by running npx shadcn@latest add https://ai-elements.vercel.app/r/[component-name]. Components are added to your project's components/ai-elements directory and imported from individual files, not a barrel export.

How do I build a chat interface with AI Elements?▼

Combine Conversation, Message, and PromptInput components. Conversation provides auto-scrolling via use-stick-to-bottom, Message renders role-based content with markdown streaming, and PromptInput handles text entry, file attachments, and submission.

Does AI Elements work with the Vercel AI SDK?▼

Yes, the Tool and Confirmation components follow the Vercel AI SDK state machine including input-streaming, approval-requested, and output-available states. You must match state strings to your installed ai package version, as approval states differ in SDK v6.

Why do my AI Elements imports fail to resolve?▼

AI Elements has no barrel export, so imports must reference individual files like @/components/ai-elements/conversation. Verify each import path matches your project's alias configuration and that the component file exists after running the shadcn add command.

How does the Reasoning component auto-collapse work?▼

The Reasoning component opens automatically when streaming starts, tracks thinking duration, and closes one second after streaming ends. It displays a shimmer Thinking message during streaming and shows the elapsed seconds when complete.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
terrene-foundationterrene-foundation
1

conversation-ux

Manage multi-thread, branching AI conversations with session persistence and context switching.

Official
Intermediate
Tresillo2017Tresillo2017
4

harden

Harden web app interfaces against edge cases, errors, and internationalization issues.

Community
Advanced
datlechindatlechin

shadcn-ui

Create and customize accessible React components from shadcn/ui.

Community
Advanced