ai-elements

Solid

Build AI chat interfaces with pre-built shadcn-style components (Message, Conversation, PromptInput, Reasoning, Sources, Tool, Artifact, CodeBlock, Branch, Suggestions, Task, Image, ChainOfThought, InlineCitation, WebPreview, and more). Use when adding AI chat UI to a Next.js + AI SDK app, installing AI Elements components via the CLI (`bun x ai-elements@latest add <name>` or `npx shadcn@latest add @ai-elements/<name>`), composing message displays with markdown, building prompt inputs with attachments, or rendering streaming reasoning and tool output.

AI & Automation 39 stars 14 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 86/100

Stars 20%
53
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# AI Elements [AI Elements](https://www.npmjs.com/package/ai-elements) is a component library and custom registry built on top of [shadcn/ui](https://ui.shadcn.com/) to help you build AI-native applications faster. It provides pre-built components like conversations, messages and more. Installing AI Elements is straightforward and can be done in a couple of ways. You can use the dedicated CLI command for the fastest setup, or integrate via the standard shadcn/ui CLI if you've already adopted shadcn's workflow. ## Quick Start Here are some basic examples of what you can achieve using components from AI Elements. ## Prerequisites Before installing AI Elements, make sure your environment meets the following requirements: - [Node.js](https://nodejs.org/en/download/), version 18 or later - A [Next.js](https://nextjs.org/) project with the [AI SDK](https://ai-sdk.dev/) installed. - [shadcn/ui](https://ui.shadcn.com/) installed in your project. If you don't have it installed, running any install command will automatically install it for you. ## Installing Components Install AI Elements components using either the dedicated AI Elements CLI or the shadcn/ui CLI. Both achieve the same result: adding the selected component's code and any needed dependencies to the project. ### AI Elements CLI ```bash # npm npx ai-elements@latest add message # pnpm pnpm dlx ai-elements@latest add message # yarn yarn dlx ai-elements@latest add message # bun bun x ai-elements@latest add me...

Details

Author
laguagu
Repository
laguagu/claude-code-nextjs-skills
Created
4 months ago
Last Updated
yesterday
Language
TypeScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

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.

396 Updated yesterday
mxyhi
AI & Automation Listed

ai-elements

Create new AI chat interface components for the ai-elements library following established composable patterns, shadcn/ui integration, and Vercel AI SDK conventions. Use when creating new components in packages/elements/src or when the user asks to add a new component to ai-elements.

335 Updated today
aiskillstore
AI & Automation Listed

ai-elements

AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn/ui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.

1 Updated 5 days ago
build-with-dhiraj
AI & Automation Solid

ai-app

Full-stack AI application generator with Next.js, AI SDK, and ai-elements. Use when creating chatbots, agent dashboards, or custom AI applications. Triggers: chatbot, chat app, agent dashboard, AI application, Next.js AI, useChat, streamText, ai-elements, build AI app, create chatbot

39 Updated yesterday
laguagu
AI & Automation Listed

nextjs-chatbot

Advanced patterns for production Next.js web chatbots built with AI SDK 6 + ai-elements. Covers tool calling with human-in-the-loop (HITL) approval, PostgreSQL session persistence, GDPR consent gating, SQL-first search, per-tool UI rendering, popup widget embedding, message feedback, follow-up suggestions, scope enforcement, and evals. Use when building a customer support bot, conversational interface, or any web chatbot needing tool approval, database sessions, or custom tool output components. Not a scaffolding tool — use `/ai-app` to scaffold from scratch, `/ai-sdk-6` for general SDK questions, `/ai-elements` for chat UI components, `/vercel:chat-sdk` for multi-platform (Slack/Teams/Discord) bots.

39 Updated yesterday
laguagu