Agent skill · software engineering · laguagu
ai-elements
Build AI chat interfaces with pre-built shadcn-style components (Message, Conversation, PromptInput, Reasoning, Sources, Tool, Artifact, CodeBlock, Suggestion, Task, Image, ChainOfThought, InlineCitation, WebPreview, Checkpoint, Plan, Queue, ModelSelector, 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 message` or `npx shadcn@latest add @ai-elements/message`), composing message displays with markdown, building prompt inputs with attachments, or rendering streaming reasoning and tool output.
Why this skill is useful
Provides pre-built components and CLI commands for integrating AI chat interfaces into Next.js applications, which the AI wouldn't reliably generate on its own.
What it needs
Requires node installed locally. About 3k tokens when loaded. Last updated 2026-08-03. 58 stars on the source repository.
What this skill does
AI Elements AI Elements is a component library and custom registry built on top of shadcn/ui to help you build AI-native applications faster. It provides pre-built components like conversations, messages and more. Components are copied into the project as source, so they are owned and editable — not a black-box dependency. Prerequisites Node.js 18 or later A Next.js project with the AI SDK installed shadcn/ui in the project — running any install command sets it up if missing 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 shadcn CLI The CLI downloads the component's code and integrates it into the project's directory. By default, AI Elements components are added to @/components/ai-elements/ (or whatever folder is configured in components.json). After running the command, the terminal confirms which files were added — proceed to import and use the component in code. Example Import and compose them like any other local React component: The example above imports the Message component from the AI Elements directory and composes it with the MessageContent and MessageResponse subcomponents. Style or configure the component just as you would any local component — since the code lives in your project, the component file can be opened directly for inspection or custom modifications. Extensibility All AI Elements components take as many primitive attributes as possible. For example, the Message component extends HTMLAttributes<HTMLDivElement>, so you can pass any props that a div supports. This makes it easy to extend the component with your own styles or functionality. Customization No post-install setup is needed — the Tailwind classes and scripts ship with the component. Edit the file directly to change it. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills laguagu/ai-elements