skilld
All skills
vercel avatar

/ai-elements

@607bb65
by vercelvercel/ai-elements2.5k stars
290

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.

Ask your Agent

Use this Skill: https://skilld.dev/gh/vercel/ai-elements/ai-elements

This session only. Nothing lands on disk.

referencestoolbar.md

≈246 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Toolbar

A styled toolbar component for React Flow nodes with flexible positioning and custom actions.

The Toolbar component provides a positioned toolbar that attaches to nodes in React Flow canvases. It features modern card styling with backdrop blur and flexbox layout for action buttons and controls.

Installation

npx ai-elements@latest add toolbar

Features

  • Attaches to any React Flow node
  • Bottom positioning by default
  • Rounded card design with border
  • Theme-aware background styling
  • Flexbox layout with gap spacing
  • Full TypeScript support
  • Compatible with all React Flow NodeToolbar features

Props

<Toolbar />

Prop Type Default Description
className string - Additional CSS classes to apply to the toolbar.
...props ComponentProps<typeof NodeToolbar> - Any other props from @xyflow/react NodeToolbar component (position, offset, isVisible, etc.).

Source: SKILL.md on GitHub

Third-party checks

2 warnings16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    This skill provides a comprehensive library of UI components for building AI-powered chat interfaces. It includes features for rendering markdown, managing tool execution confirmations, and previewing AI-generated JSX. While the skill employs dynamic rendering and fetches assets from external sources, these operations are consistent with its intended functionality and originate from trusted or well-known service domains.

  • Socket16d

    1 alert: gptSecurity

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer6mo

    5/129 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at 607bb65. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub last month.

Activeupdated 7 months ago

Topics

  • React
  • ai-elements
  • shadcn-ui
  • next.js
  • chat-ui
  • ai-sdk
  • tailwind
  • components

README badge

README badge for vercel/ai-elements

What it does

Installs pre-built React components for AI chat interfaces (conversations, messages, tool displays, prompt inputs) built on shadcn/ui. Integrates with Next.js projects using the AI SDK and can be customized since components live in your codebase.

Generated from the current SKILL.md.

Frequently asked

What are the prerequisites for using AI Elements?
You need Node.js 18 or later, a Next.js project with the AI SDK installed, and shadcn/ui configured. The CLI will automatically install shadcn/ui if you don't have it yet.
Does this work with TypeScript?
Yes. The example and component setup assume TypeScript by default, and components are added as source code to your project so you can modify them as needed.
Can I customize the components after installation?
Yes. Components are installed as source code in your project directory, not as a library, so you can directly modify Tailwind classes, props, or functionality.
What does AI Elements provide?
AI Elements is a component library built on shadcn/ui that provides pre-built UI components for AI chat interfaces, including conversations, messages, tool displays, and prompt inputs.
Does this require Vercel AI Gateway?
No, but the documentation recommends using it for easier API key management and $5 monthly usage credit for experimenting with different models.

Generated from the current SKILL.md. These answers refresh after source changes.