vercel/ai-elements
Overview
This skill helps you add new UI components to the ai-elements library following established composable patterns, shadcn/ui conventions, and the Vercel AI SDK structure. It guides creation of TypeScript React components under packages/elements/src and ensures consistent API, styling, and registry integration. Use it to extend AI Elements with new conversation UI, message parts, or utility widgets that plug into existing tooling.
How this skill works
The skill inspects the target folder and project configuration to generate component files, TypeScript types, and accompanying exports that follow ai-elements patterns. It wires components into the custom registry, adds shadcn/ui-compatible Tailwind classes, and includes Vercel AI SDK hooks or prop typings when relevant. Generated code is local to your components folder so you can iterate and customize immediately.
When to use it
- You need a new chat UI component (Message, MessageContent, etc.) that composes with existing elements.
- Adding a provider-specific input, attachment, or control that integrates with useChat or the AI SDK.
- Creating small, reusable primitives that extend the ai-elements registry.
- Migrating a bespoke UI piece into the ai-elements patterns for consistent styling and props.
- Onboarding a new UI element that should be discoverable by the ai-elements CLI or registry.
Best practices
- Follow existing component prop patterns (extend HTMLAttributes where possible) for composability and forwardRef compatibility.
- Keep styling in Tailwind classes and mirror shadcn/ui utility patterns to ensure theme and data-theme compatibility.
- Generate clear, minimal TypeScript types and export subcomponents alongside the main component for composition.
- Register the component in the local registry index so CLI and consumers can discover it.
- Include small usage examples and a brief doc comment in the component file for maintainability.
Example use cases
- Create a threaded reply component that composes with Message and MessageContent.
- Add a file-attachment UI that integrates with useChat uploads and includes progressive UI states.
- Build a compact system prompt editor component that plugs into the AI SDK workflow.
- Add a streaming response renderer component that consumes SDK message parts and renders markdown or code blocks.
- Introduce an input toolbar with provider selector and quick prompts wired to the ai-elements registry.
FAQ
Yes. Generated components are added to your project under the configured components path so you can edit them directly.
Does it add runtime dependencies automatically?
It may add small helper imports and ensure shadcn/ui compatibility, but major dependencies should be installed via your package manager; the CLI can prompt when required.
