skills.rest
aicodepro
aicodeproOFFICIAL
Explore all skills by this author →
GitHub

ai-elements-chatbot

Builds streaming AI chat interfaces with shadcn/ui components and Vercel AI SDK v5.

Updated Jun 22, 2026
Search Tags:#next.js#streaming#shadcn/ui#ai chat#react components#vercel ai sdk#chatbot ui
One-click install
npx skills add https://github.com/aicodepro/ai-agent-nexi --skill ai-elements-chatbot-aicodepro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ai-elements-chatbot
Source: https://github.com/aicodepro/ai-agent-nexi/tree/main/agent/skills/ai-elements-chatbot
Command: npx skills add https://github.com/aicodepro/ai-agent-nexi --skill ai-elements-chatbot-aicodepro

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires ai, @ai-sdk/openai, zod, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Building a production-quality AI chat interface from scratch requires solving streaming markdown rendering, tool call displays, reasoning visualization, and auto-scrolling conversations. This Skill provides 30+ pre-built shadcn/ui components and setup guidance so you can assemble a ChatGPT-style interface in minutes instead of days. ## Core Features & Use Cases - Component Library: 30+ AI chat components including Message, Conversation, Response, PromptInput, Tool, Reasoning, Sources, and CodeBlock, installed via the AI Elements CLI. - Streaming & Tool Support: Streaming-optimized markdown rendering, collapsible tool/function call displays, and reasoning visualization compatible with Vercel AI SDK v5. - Setup Automation: A setup script verifies Next.js 15+, shadcn/ui, Tailwind v4, and AI SDK prerequisites, then initializes AI Elements and installs core components. - Use Case: You are building a Next.js App Router chatbot with tool calling. Run the setup script, copy the API route and chat page templates from assets, and add the Tool component to render function call results inline. ## Quick Start Ask the AI to set up an AI Elements chat interface in your Next.js project with streaming responses and tool call displays.

Frequently Asked Questions about ai-elements-chatbot

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a streaming chat UI with Next.js and shadcn/ui?▼

Initialize AI Elements with pnpm dlx ai-elements@latest init, then add components like message, conversation, response, and prompt-input. Use the useChat hook from the AI SDK with a streamText API route to render streaming markdown responses.

How to display tool calls in a chat interface?▼

Use the AI Elements Tool component, which renders function name, arguments, and results in a collapsible panel with status indicators. Map over message toolInvocations from the AI SDK and pass each tool's name, args, and result as props.

Does AI Elements work with Next.js Pages Router?▼

No, AI Elements only supports the Next.js App Router. Components require client directives and are incompatible with Pages Router, so you must use Next.js 15+ with the app directory structure.

Can I use AI Elements with AI SDK v4?▼

No, AI Elements requires AI SDK v5 or later due to breaking changes between versions. Upgrade your ai package to v5+ before installing components, and verify the version with npm list ai.

Why is AI Elements installed via CLI instead of npm?▼

AI Elements follows the shadcn/ui model where components are copied into your project's components/ui/ai directory rather than installed as a dependency. This gives you full code ownership and customization control over every component.

Related Skills

Explore More Software Engineering Skills→
skaile-aiskaile-ai

prog-expert-scadcn

Configure shadcn-nuxt with components.json registry and Tailwind CSS v4 in Nuxt projects.

Official
Advanced
divinaarmueladivinaarmuela

clerk-cli

Operate the Clerk CLI to manage users, organizations, sessions, webhooks, and instance configuration.

Community
Advanced
goodnight000goodnight000

rag-implementation

Build RAG systems with vector stores, embeddings, retrieval, and reranking.

Community
Advanced
nguyenvanlinh1902nguyenvanlinh1902

ui-ux-pro-max

Provides UI/UX design recommendations for multiplatform projects including web and mobile apps.

Community
Advanced