106.9K+Download
Skip to the usage guide
AI Elementsby vercel

AI Elements Skill.

Build AI chat interfaces from editable React components.

  • AI Interfaces
  • React
Download OpenDesignView Usage Guide
Source Review · ai-elementsSKILL.md
Task Build AI chat interfaces from editable React components. Produces Selected component source files added to the project's configured components directory. Before You Start The documented prerequisites include Node.js 18+, Next.js, the AI SDK and shadcn/ui.
Editorial summary · source reviewed 2026-11-02 · not a generated example

01 What It Does

Build AI chat interfaces from editable React components

Use Vercel's AI Elements skill to compose chat messages, tool displays and prompt inputs with editable shadcn-based React components.

Source-based workflowNot an execution benchmark

The Working Approach

AI Elements guides an agent through adding purpose-built chat components to an existing Next.js application. It covers conversation views, message content, tool displays and prompt inputs. The components live inside your repository, so the interface can follow the product's own styling and interaction requirements.

The source connects these components to the AI SDK and shadcn/ui conventions. Its examples compose message primitives around text parts rather than treating an assistant response as a single opaque widget. This makes the skill useful when the model integration exists and the next task is giving users a coherent place to read and respond.

Expected Deliverables

  • Selected component source files added to the project's configured components directory.
  • A React conversation view composed from message and response primitives.
  • Project-specific styling and an explanation of any integration issues still unresolved.
See the Example Brief

From Brief to Review

  1. 01
    Check the existing application

    Inspect the package runner, Next.js setup, AI SDK dependencies and shadcn configuration. Confirm import aliases and global styles before adding components.

  2. 02
    Add the needed interface pieces

    Use the project's package runner with the supported component installer. Select the pieces the conversation needs and inspect the files added to the repository.

  3. 03
    Connect and customize

    Map each message's role to Message, nest MessageContent, and render text parts with MessageResponse as in the source example. Tool results require their own supported display rather than being assumed to render through that text-only example. Adjust local Tailwind classes and inspect the resulting conversation states.

02 When to Use It

When to Use It

The documented prerequisites include Node.js 18+, Next.js, the AI SDK and shadcn/ui.

A Good Fit

  • Editable chat UIA Next.js chatbot needs editable message and input components.
  • Existing shadcn conventionsA team wants to customize AI interface code within its existing shadcn conventions.

Limits to Check

  • Application prerequisitesThe documented prerequisites include Node.js 18+, Next.js, the AI SDK and shadcn/ui.
  • Backend integrationAdding UI components does not establish that model credentials, streaming endpoints or tool execution are configured.

Bring These Inputs

  • Project setupThe application's package configuration and component aliases.
  • Message contractThe message and tool-result shapes supplied by the AI SDK integration.
  • Interface directionThe desired conversation layout, theme and component selection.

03 Decisions That Matter

Decisions That Matter

  1. Local source ownership

    Component code remains inspectable and editable in the product repository.

  2. Composable responses

    Composed message primitives expose the parts of an answer that need separate presentation.

  3. Existing styling conventions

    Existing Tailwind and shadcn conventions provide a concrete integration starting point.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Source and Setup

The application's package configuration and component aliases.

Upstream Source File
https://github.com/vercel/ai-elements/blob/ca8be600bfd01b3131f9bf6134b51602a71f4374/skills/ai-elements/SKILL.md

The reference below opens the upstream instructions. Review the repository setup before using them; it is not an installation command.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use ai-elements to build a conversation screen in this existing Next.js application. First inspect our package runner, shadcn configuration, aliases and AI SDK message shape. Add only the message, response and prompt-input components required for this screen. Show text parts using the documented composition pattern and keep our current theme. Use fixture messages for the initial preview. Explain which source files were added, how the interface connects to our existing chat hook, and which runtime dependencies still need verification.

Inspect the Result

Check the actual output against these observable criteria.

  • Imports resolve from the actual component location and configured alias.
  • Message roles and text parts render with the intended theme.
  • The agent distinguishes a working UI preview from a verified model-backed conversation.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
vercel
Repository
vercel/ai-elements
Skill File
SKILL.md
License
Apache-2.0
Reviewed Snapshot
2026-11-02 · ca8be600bfd0
Editorial Source Summary
Build AI chat interfaces from editable React components.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Can I edit the installed components?

Yes. The installer adds component code to your project, where classes and behavior can be customized.

Is AI Gateway mandatory?

The source recommends it for model access; its prerequisite list treats the application, AI SDK and shadcn setup separately.

Why might components appear unstyled?

Check the project's Tailwind and shadcn global styles before changing component markup.

OpenDesign

Keep Your Brief and Design Work Together.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/vercel/ai-elements/blob/ca8be600bfd01b3131f9bf6134b51602a71f4374/skills/ai-elements/SKILL.md