ai-elements

Build AI chat interfaces using ai-elements components — conversations, messages, tool displays, prompt inputs, and more. Use when the user wants to build a chatbot, AI assistant UI, or any AI-powered chat interface.

1,950stars229forksUpdated 4/24/2026

Web Development #chatbot #ui-components #ai-elements #react #shadcn #nextjs

Security Assessment

Medium Risk(65/100)

Detected risks:

Remote Code Execution([references/stack-trace.md] eval()

Sensitive File Access([references/speech-input.md] .env)

Security Score65/100

About ai-elements

The ai-elements skill provides a robust framework for developers looking to create AI chat interfaces efficiently. By leveraging pre-built components such as conversations, messages, and tool displays, this skill addresses the common challenges faced when building chatbots or AI assistant UIs. It simplifies the development process, allowing users to focus on crafting engaging interactions rather than getting bogged down in the intricacies of UI design and implementation.

FAQ

How do I install AI Elements?

You can install AI Elements using the dedicated CLI command or through the standard shadcn/ui CLI. Ensure to run the commands using your project's package runner.

What are the prerequisites for using AI Elements?

You need Node.js version 18 or later, a Next.js project with the AI SDK installed, and shadcn/ui installed in your project.

Can I use AI Elements components in any React application?

Yes, once installed, you can import and use AI Elements components in your application just like any other React component.

Is there any cost associated with using AI Gateway?

AI Gateway provides $5 in usage per month for experimentation, but you will need to obtain an API key.

Where are the AI Elements components stored in my project?

By default, AI Elements components are added to the '@/components/ai-elements/' directory, or the folder configured in your shadcn components settings.

All Files

129 files

SKILL.md7.1 KB

references/agent.md4.1 KB

references/chain-of-thought.md3.3 KB

references/checkpoint.md5.5 KB

references/code-block.md5.4 KB

references/conversation.md7.4 KB

references/artifact.md2.9 KB

references/commit.md5.8 KB

references/environment-variables.md3.7 KB

references/model-selector.md4.3 KB

references/prompt-input.md19.7 KB

references/speech-input.md6.5 KB

references/toolbar.md1.0 KB

scripts/attachments-list.tsx2.2 KB

scripts/code-block.tsx2.9 KB

scripts/conversation.tsx4.1 KB

references/attachments.md5.6 KB

references/audio-player.md5.2 KB

references/canvas.md1.1 KB

references/confirmation.md8.6 KB

references/connection.md1.1 KB

references/context.md5.6 KB

references/file-tree.md2.0 KB

references/image.md4.0 KB

references/inline-citation.md10.8 KB

scripts/inline-citation.tsx3.2 KB

scripts/model-selector.tsx8.5 KB

scripts/persona-glint.tsx2.5 KB

scripts/persona-obsidian.tsx2.5 KB

scripts/prompt-input-tooltip.tsx1.1 KB

references/controls.md0.9 KB

references/jsx-preview.md3.2 KB

references/panel.md1.0 KB

references/shimmer.md1.6 KB

references/terminal.md3.1 KB

scripts/agent.tsx1.6 KB

scripts/chain-of-thought.tsx138.6 KB

scripts/confirmation-request.tsx1.7 KB

scripts/file-tree-selection.tsx0.6 KB

references/edge.md2.1 KB

references/mic-selector.md7.7 KB

references/plan.md3.2 KB

references/sources.md6.2 KB

references/tool.md8.5 KB

scripts/attachments-inline.tsx3.5 KB

scripts/code-block-dark.tsx1.0 KB

scripts/context.tsx1.0 KB

scripts/image.tsx136.5 KB

scripts/persona-command.tsx2.5 KB

scripts/prompt-input-cursor.tsx15.1 KB

scripts/schema-display-basic.tsx0.2 KB

scripts/shimmer.tsx0.4 KB

scripts/stack-trace-no-internal.tsx1.2 KB

scripts/terminal.tsx2.3 KB

scripts/tool-output-available.tsx1.7 KB

references/message.md9.4 KB

references/persona.md5.4 KB

references/snippet.md2.2 KB

references/test-results.md5.0 KB

scripts/artifact.tsx2.9 KB

scripts/checkpoint.tsx2.8 KB

scripts/confirmation.tsx1.7 KB

scripts/file-tree.tsx1.5 KB

scripts/package-info.tsx1.3 KB

scripts/plan.tsx1.9 KB

scripts/sandbox.tsx5.4 KB

scripts/shimmer-elements.tsx1.1 KB

scripts/stack-trace-collapsed.tsx1.1 KB

scripts/terminal-clear.tsx0.5 KB

scripts/terminal-streaming.tsx1.0 KB

scripts/tool-input-streaming.tsx0.7 KB

references/node.md2.8 KB

references/queue.md5.4 KB

references/stack-trace.md7.9 KB

references/transcription.md4.9 KB

scripts/attachments.tsx2.0 KB

scripts/commit.tsx2.1 KB

scripts/environment-variables.tsx1.7 KB

scripts/message.tsx10.0 KB

scripts/persona-halo.tsx2.5 KB

scripts/prompt-input.tsx7.4 KB

scripts/schema-display-nested.tsx0.5 KB

scripts/snippet.tsx0.6 KB

scripts/suggestion-input.tsx4.4 KB

scripts/test-results-errors.tsx1.3 KB

scripts/tool.tsx6.7 KB

references/open-in-chat.md2.7 KB

references/reasoning.md7.8 KB

references/suggestion.md3.6 KB

references/voice-selector.md10.3 KB

scripts/audio-player-remote.tsx1.0 KB

scripts/confirmation-accepted.tsx1.2 KB

scripts/file-tree-basic.tsx0.4 KB

scripts/jsx-preview.tsx3.2 KB

scripts/mic-selector.tsx1.2 KB

scripts/persona-mana.tsx2.5 KB

scripts/queue-prompt-input.tsx10.5 KB

scripts/schema-display-params.tsx0.4 KB

scripts/sources-custom.tsx1.0 KB

scripts/suggestion.tsx0.8 KB

scripts/test-results-suites.tsx0.9 KB

scripts/transcription.tsx4.9 KB

references/package-info.md3.2 KB

references/sandbox.md4.3 KB

references/schema-display.md2.5 KB

references/task.md6.7 KB

references/web-preview.md6.1 KB

scripts/audio-player.tsx1.8 KB

scripts/confirmation-rejected.tsx1.1 KB

scripts/file-tree-expanded.tsx0.6 KB

scripts/open-in-chat.tsx0.7 KB

scripts/persona-opal.tsx2.5 KB

scripts/reasoning.tsx2.2 KB

scripts/shimmer-duration.tsx0.9 KB

scripts/speech-input.tsx2.3 KB

scripts/terminal-basic.tsx0.2 KB

scripts/tool-input-available.tsx0.7 KB

scripts/web-preview.tsx2.8 KB

scripts/queue.tsx8.0 KB

scripts/schema-display.tsx2.7 KB

scripts/sources.tsx0.7 KB

scripts/task.tsx1.5 KB

scripts/test-results.tsx2.7 KB

scripts/voice-selector.tsx7.1 KB

scripts/schema-display-body.tsx0.5 KB

scripts/snippet-plain.tsx0.4 KB

scripts/stack-trace.tsx1.9 KB

scripts/test-results-basic.tsx0.5 KB

scripts/tool-output-error.tsx1.1 KB

Install ai-elements

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

Copy the skill folder to .claude/skills/
Claude will automatically detect and use the skill

Repository

vercel/ai-elements

Related Skills

dbt-sf-to-bq-translator

21,076

build-models

102

html-prototype

3,588

doc

448