ai-elements-chatbot

Name: ai-elements-chatbot
Author: jackspace

15stars7forks

How to install ai-elements-chatbot?

jackspace/claudeskillz/ai-elements-chatbot

$npx -y skills add jackspace/ClaudeSkillz --skill ai-elements-chatbot

Installs into the current project.

Summary

This skill provides production-ready AI chat UI components built on shadcn/ui for conversational AI interfaces. Use when building ChatGPT-style chat interfaces with streaming responses, tool/function call displays, reasoning visualization, or source citations. Provides 30+ compon

Files · 1

View on GitHub

SKILL.md

1	# AI Elements Chatbot Components
2
3	Status: Production Ready
4	Last Updated: 2025-11-07
5	Dependencies: tailwind-v4-shadcn (prerequisite), ai-sdk-ui (companion), nextjs (framework)
6	Latest Versions: ai-elements@1.6.0, ai@5.0+, next@15+, react@19+
7
8	---
9
10	## Quick Start (15 Minutes)
11
12	### 1. Verify Prerequisites
13
14	Before installing AI Elements, ensure these are already set up:
15
16	```bash
17	# Check Next.js version (needs 15+)
18	npx next --version
19
20	# Check AI SDK version (needs 5+)
21	npm list ai
22
23	# Check shadcn/ui is initialized
24	ls components/ui # Should exist with button.tsx etc
25	```
26
27	Why this matters:
28	- AI Elements is built ON TOP of shadcn/ui (won't work without it)
29	- Requires Next.js App Router (Pages Router not supported)
30	- AI SDK v5 has breaking changes from v4
31
32	Missing prerequisites? Use the `tailwind-v4-shadcn` skill first, then install AI SDK:
33	```bash
34	pnpm add ai@latest
35	```
36
37	### 2. Install AI Elements CLI
38
39	```bash
40	# Initialize AI Elements in your project
41	pnpm dlx ai-elements@latest init
42
43	# Add your first components
44	pnpm dlx ai-elements@latest add message conversation response prompt-input
45	```
46
47	CRITICAL:
48	- Components are copied into `components/ui/ai/` (NOT installed as npm package)
49	- Full source code ownership (modify as needed)
50	- Registry URL must be correct in `components.json`
51
52	### 3. Create Basic Chat Interface
53
54	```typescript
55	// app/chat/page.tsx
56	'use client';
57
58	import { useChat } from 'ai/react';
59	import { Conversation } from '@/components/ui/ai/conversation';
60	import { Message } from '@/components/ui/ai/message';
61	import { MessageContent } from '@/components/ui/ai/message-content';
62	import { Response } from '@/components/ui/ai/response';
63	import { PromptInput } from '@/components/ui/ai/prompt-input';
64
65	export default function ChatPage() {
66	const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
67	api: '/api/chat'
68	});
69
70	return (
71	<div className="flex h-screen flex-col">
72	<Conversation className="flex-1">
73	{messages.map((msg) => (
74	<Message key={msg.id} role={msg.role}>
75	<MessageContent>
76	<Response markdown={msg.content} />
77	</MessageContent>
78	</Message>
79	))}
80	</Conversation>
81
82	<PromptInput
83	value={input}
84	onChange={handleInputChange}
85	onSubmit={handleSubmit}
86	disabled={isLoading}
87	/>
88	</div>
89	);
90	}
91	```
92
93	Done! You now have a working chat interface with:
94	- ✅ Streaming markdown rendering
95	- ✅ Auto-scrolling conversation
96	- ✅ Auto-resizing input
97	- ✅ Role-based message styling
98
99	---
100
101	## The 5-Step Setup Process
102
103	### Step 1: Install AI Elements CLI
104
105	```bash
106	pnpm dlx ai-elements@latest init
107	```
108
109	This:
110	- Creates `components/ui/ai/` directory
111	- Updates `components.json` with AI Elements registry
112	- Adds necessary dependencies to package.json
113
114	Key Points:
115	- Run from project root (where package.json is)
116	- Requires shadcn/ui already initialized
117	- Will fail if `components.json` missing (run `pnpm dlx shadcn@latest init` first)
118
119	### Step 2: Add Core Chat Components
120
121	```bash
122	# Essential components for basic chat
123	pnpm dlx ai-elements@latest add message message-content conversation response
124
125	# Optional: Input component
126	pnpm dlx ai-elements@latest add prompt-input actions suggestion
127	```
128
129	Component Purpose:
130	- `message`: Container for single message (user/AI)
131	- `message-content`: Wrapper for message parts
132	- `conversation`: Auto-scrolling chat container
133	- `response`: Markdown renderer (streaming-optimized)
134	- `prompt-input`: Auto-resizing textarea with toolbar
135	- `actions`: Copy/regenerate/edit buttons
136	- `suggestion`: Quick prompt pills
137
138	### Step 3: Add Advanced Components (Optional)
139
140	```bash
141	# For tool calling
142	pnpm dlx ai-elements@latest add tool
143
144	# For reason

People who liked this also viewed

6 picks

Type

ai-elements-chatbot

15stars7forks

View on GitHub

How to install ai-elements-chatbot?

jackspace/claudeskillz/ai-elements-chatbot

$npx -y skills add jackspace/ClaudeSkillz --skill ai-elements-chatbot

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# AI Elements Chatbot Components
2
3	Status: Production Ready
4	Last Updated: 2025-11-07
5	Dependencies: tailwind-v4-shadcn (prerequisite), ai-sdk-ui (companion), nextjs (framework)
6	Latest Versions: ai-elements@1.6.0, ai@5.0+, next@15+, react@19+
7
8	---
9
10	## Quick Start (15 Minutes)
11
12	### 1. Verify Prerequisites
13
14	Before installing AI Elements, ensure these are already set up:
15
16	```bash
17	# Check Next.js version (needs 15+)
18	npx next --version
19
20	# Check AI SDK version (needs 5+)
21	npm list ai
22
23	# Check shadcn/ui is initialized
24	ls components/ui # Should exist with button.tsx etc
25	```
26
27	Why this matters:
28	- AI Elements is built ON TOP of shadcn/ui (won't work without it)
29	- Requires Next.js App Router (Pages Router not supported)
30	- AI SDK v5 has breaking changes from v4
31
32	Missing prerequisites? Use the `tailwind-v4-shadcn` skill first, then install AI SDK:
33	```bash
34	pnpm add ai@latest
35	```
36
37	### 2. Install AI Elements CLI
38
39	```bash
40	# Initialize AI Elements in your project
41	pnpm dlx ai-elements@latest init
42
43	# Add your first components
44	pnpm dlx ai-elements@latest add message conversation response prompt-input
45	```
46
47	CRITICAL:
48	- Components are copied into `components/ui/ai/` (NOT installed as npm package)
49	- Full source code ownership (modify as needed)
50	- Registry URL must be correct in `components.json`
51
52	### 3. Create Basic Chat Interface
53
54	```typescript
55	// app/chat/page.tsx
56	'use client';
57
58	import { useChat } from 'ai/react';
59	import { Conversation } from '@/components/ui/ai/conversation';
60	import { Message } from '@/components/ui/ai/message';
61	import { MessageContent } from '@/components/ui/ai/message-content';
62	import { Response } from '@/components/ui/ai/response';
63	import { PromptInput } from '@/components/ui/ai/prompt-input';
64
65	export default function ChatPage() {
66	const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
67	api: '/api/chat'
68	});
69
70	return (
71	<div className="flex h-screen flex-col">
72	<Conversation className="flex-1">
73	{messages.map((msg) => (
74	<Message key={msg.id} role={msg.role}>
75	<MessageContent>
76	<Response markdown={msg.content} />
77	</MessageContent>
78	</Message>
79	))}
80	</Conversation>
81
82	<PromptInput
83	value={input}
84	onChange={handleInputChange}
85	onSubmit={handleSubmit}
86	disabled={isLoading}
87	/>
88	</div>
89	);
90	}
91	```
92
93	Done! You now have a working chat interface with:
94	- ✅ Streaming markdown rendering
95	- ✅ Auto-scrolling conversation
96	- ✅ Auto-resizing input
97	- ✅ Role-based message styling
98
99	---
100
101	## The 5-Step Setup Process
102
103	### Step 1: Install AI Elements CLI
104
105	```bash
106	pnpm dlx ai-elements@latest init
107	```
108
109	This:
110	- Creates `components/ui/ai/` directory
111	- Updates `components.json` with AI Elements registry
112	- Adds necessary dependencies to package.json
113
114	Key Points:
115	- Run from project root (where package.json is)
116	- Requires shadcn/ui already initialized
117	- Will fail if `components.json` missing (run `pnpm dlx shadcn@latest init` first)
118
119	### Step 2: Add Core Chat Components
120
121	```bash
122	# Essential components for basic chat
123	pnpm dlx ai-elements@latest add message message-content conversation response
124
125	# Optional: Input component
126	pnpm dlx ai-elements@latest add prompt-input actions suggestion
127	```
128
129	Component Purpose:
130	- `message`: Container for single message (user/AI)
131	- `message-content`: Wrapper for message parts
132	- `conversation`: Auto-scrolling chat container
133	- `response`: Markdown renderer (streaming-optimized)
134	- `prompt-input`: Auto-resizing textarea with toolbar
135	- `actions`: Copy/regenerate/edit buttons
136	- `suggestion`: Quick prompt pills
137
138	### Step 3: Add Advanced Components (Optional)
139
140	```bash
141	# For tool calling
142	pnpm dlx ai-elements@latest add tool
143
144	# For reason

People who liked this also viewed

6 picks

Type