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 67 stars 18 forks Updated today MIT

Install

View on GitHub

Quality Score: 87/100

Stars 20%
61
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
8 months ago
Last Updated
today
Language
TypeScript
License
MIT

Integrates with

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category