Implements React chat and AI interface components using the AI Elements shadcn/ui registry.
npx skills add https://github.com/AarnavBaddam/skills --skill ai-elements-aarnavbaddam
Please help me install this Agent Skill. Skill: ai-elements Source: https://github.com/AarnavBaddam/skills/tree/main/ai-elements Command: npx skills add https://github.com/AarnavBaddam/skills --skill ai-elements-aarnavbaddam
** and ## characters. ## Core Features & Use Cases - Pre-built AI Components: 40+ React components installed as source via a shadcn/ui registry, including Conversation, Message, Tool, Reasoning, CodeBlock, and PromptInput. - Streaming Markdown Rendering: <MessageResponse> and MessageMarkdown render any AI-generated markdown incrementally without re-parsing on each stream chunk. - AI SDK v6 Integration: Components understand the UIMessage format and render message.parts (text, tool calls, reasoning, images) automatically with useChat and toUIMessageStreamResponse(). - Use Case: Scaffold a Next.js chat app, run npx ai-elements@latest add message conversation, and get a production-quality streaming chat UI wired to the AI SDK in minutes. ## Quick Start Ask the AI to build a chat interface using AI Elements components with the AI SDK useChat hook and streaming markdown rendering.High-intent search queries and answers about installing and using this skill.
Install AI Elements components with npx ai-elements@latest add message conversation, then use the useChat hook with DefaultChatTransport and render messages with the Conversation and Message components. The Message component handles all UIMessage part types automatically.
Use the MessageResponse component from @/components/ai-elements/message, which wraps Streamdown with code highlighting, math, and mermaid support. It handles incremental streaming updates without re-parsing the full content on each chunk.
No, AI Elements is React-only and depends on shadcn/ui with Radix primitives. For Vue or Svelte projects, use the AI SDK hooks directly and build custom rendering components.
The server is likely returning the wrong stream format. Use toUIMessageStreamResponse() instead of toDataStreamResponse() or toTextStreamResponse() in your route handler, since AI Elements expects the UI message stream format.
No, install only the components you use with npx ai-elements@latest add <component>. Installing all.json pulls in 48 components, including ones with @base-ui/react dependencies that may conflict with your shadcn version.
Type errors usually come from version mismatches between the component and dependencies like @base-ui/react or shadcn Button. Reinstall the component with --overwrite or update the conflicting dependency; never add @ts-nocheck to suppress the errors.
netprtonyAutomate shadcn/ui component setup and usage in React and Next.js projects.
planetaryescapeConstruct SDK-compliant gateway options for multi-provider AI model routing with fallback.
anderskevBuild streaming chat interfaces with tool calls using the Vercel AI SDK.
vercelRender AI SDK v6 UIMessage parts into React chat UI components.