ai-sdk-ui

Name: ai-sdk-ui
Author: jackspace

15stars7forks

How to install ai-sdk-ui?

jackspace/claudeskillz/ai-sdk-ui

$npx -y skills add jackspace/ClaudeSkillz --skill ai-sdk-ui

Installs into the current project.

Summary

Frontend React hooks for AI-powered chat interfaces, completions, and streaming UIs with Vercel AI SDK v5. Includes useChat, useCompletion, and useObject hooks for building interactive AI applications. Use when: building React chat interfaces, implementing AI completions in UI, s

Files · 1

View on GitHub

SKILL.md

1	# AI SDK UI - Frontend React Hooks
2
3	Frontend React hooks for AI-powered user interfaces with Vercel AI SDK v5.
4
5	Version: AI SDK v5.0.76+ (Stable)
6	Framework: React 18+, Next.js 14+
7	Last Updated: 2025-10-22
8
9	---
10
11	## Quick Start (5 Minutes)
12
13	### Installation
14
15	```bash
16	npm install ai @ai-sdk/openai
17	```
18
19	### Basic Chat Component (v5)
20
21	```tsx
22	// app/chat/page.tsx
23	'use client';
24	import { useChat } from 'ai/react';
25	import { useState, FormEvent } from 'react';
26
27	export default function Chat() {
28	const { messages, sendMessage, isLoading } = useChat({
29	api: '/api/chat',
30	});
31	const [input, setInput] = useState('');
32
33	const handleSubmit = (e: FormEvent) => {
34	e.preventDefault();
35	sendMessage({ content: input });
36	setInput('');
37	};
38
39	return (
40	<div>
41	<div>
42	{messages.map(m => (
43	<div key={m.id}>
44	<strong>{m.role}:</strong> {m.content}
45	</div>
46	))}
47	</div>
48	<form onSubmit={handleSubmit}>
49	<input
50	value={input}
51	onChange={(e) => setInput(e.target.value)}
52	placeholder="Type a message..."
53	disabled={isLoading}
54	/>
55	</form>
56	</div>
57	);
58	}
59	```
60
61	### API Route (Next.js App Router)
62
63	```typescript
64	// app/api/chat/route.ts
65	import { streamText } from 'ai';
66	import { openai } from '@ai-sdk/openai';
67
68	export async function POST(req: Request) {
69	const { messages } = await req.json();
70
71	const result = streamText({
72	model: openai('gpt-4-turbo'),
73	messages,
74	});
75
76	return result.toDataStreamResponse();
77	}
78	```
79
80	Result: A functional chat interface with streaming AI responses in ~10 lines of frontend code.
81
82	---
83
84	## useChat Hook - Complete Reference
85
86	### Basic Usage (v5 Pattern)
87
88	```tsx
89	'use client';
90	import { useChat } from 'ai/react';
91	import { useState, FormEvent } from 'react';
92
93	export default function ChatComponent() {
94	const { messages, sendMessage, isLoading, error } = useChat({
95	api: '/api/chat',
96	});
97	const [input, setInput] = useState('');
98
99	const handleSubmit = (e: FormEvent) => {
100	e.preventDefault();
101	if (!input.trim()) return;
102
103	sendMessage({ content: input });
104	setInput('');
105	};
106
107	return (
108	<div className="flex flex-col h-screen">
109	{/* Messages */}
110	<div className="flex-1 overflow-y-auto p-4">
111	{messages.map(message => (
112	<div
113	key={message.id}
114	className={message.role === 'user' ? 'text-right' : 'text-left'}
115	>
116	<div className="inline-block p-2 rounded bg-gray-100">
117	{message.content}
118	</div>
119	</div>
120	))}
121	{isLoading && <div className="text-gray-500">AI is thinking...</div>}
122	</div>
123
124	{/* Input */}
125	<form onSubmit={handleSubmit} className="p-4 border-t">
126	<input
127	value={input}
128	onChange={(e) => setInput(e.target.value)}
129	placeholder="Type a message..."
130	disabled={isLoading}
131	className="w-full p-2 border rounded"
132	/>
133	</form>
134
135	{/* Error */}
136	{error && <div className="text-red-500 p-4">{error.message}</div>}
137	</div>
138	);
139	}
140	```
141
142	### Full API Reference
143
144	```typescript
145	const {
146	// Messages
147	messages, // Message[] - Chat history
148	setMessages, // (messages: Message[]) => void - Update messages
149
150	// Actions
151	sendMessage, // (message: { content: string }) => void - Send message (v5)
152	reload, // () => void - Reload last response
153	stop, // () => void - Stop current generation
154
155	// State
156	isLoading, // boolean - Is AI responding?
157	error, // Error \| undefined - Error if any
158
159	// Data
160	data, // any[] - Custom data from stream
161	metadata, // object - Response metadata
162	} = useChat({
163	// Required
164	api: '/api/chat', // API endpoint
165
166	// Optional
167	id: 'chat-1', // Chat ID for persistence
168	initialMessages: [], // Initial messages (controlled mode)
169
170	// Callbacks
171	onFinish: (message,

People who liked this also viewed

6 picks

Type

ai-sdk-ui

15stars7forks

View on GitHub

How to install ai-sdk-ui?

jackspace/claudeskillz/ai-sdk-ui

$npx -y skills add jackspace/ClaudeSkillz --skill ai-sdk-ui

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# AI SDK UI - Frontend React Hooks
2
3	Frontend React hooks for AI-powered user interfaces with Vercel AI SDK v5.
4
5	Version: AI SDK v5.0.76+ (Stable)
6	Framework: React 18+, Next.js 14+
7	Last Updated: 2025-10-22
8
9	---
10
11	## Quick Start (5 Minutes)
12
13	### Installation
14
15	```bash
16	npm install ai @ai-sdk/openai
17	```
18
19	### Basic Chat Component (v5)
20
21	```tsx
22	// app/chat/page.tsx
23	'use client';
24	import { useChat } from 'ai/react';
25	import { useState, FormEvent } from 'react';
26
27	export default function Chat() {
28	const { messages, sendMessage, isLoading } = useChat({
29	api: '/api/chat',
30	});
31	const [input, setInput] = useState('');
32
33	const handleSubmit = (e: FormEvent) => {
34	e.preventDefault();
35	sendMessage({ content: input });
36	setInput('');
37	};
38
39	return (
40	<div>
41	<div>
42	{messages.map(m => (
43	<div key={m.id}>
44	<strong>{m.role}:</strong> {m.content}
45	</div>
46	))}
47	</div>
48	<form onSubmit={handleSubmit}>
49	<input
50	value={input}
51	onChange={(e) => setInput(e.target.value)}
52	placeholder="Type a message..."
53	disabled={isLoading}
54	/>
55	</form>
56	</div>
57	);
58	}
59	```
60
61	### API Route (Next.js App Router)
62
63	```typescript
64	// app/api/chat/route.ts
65	import { streamText } from 'ai';
66	import { openai } from '@ai-sdk/openai';
67
68	export async function POST(req: Request) {
69	const { messages } = await req.json();
70
71	const result = streamText({
72	model: openai('gpt-4-turbo'),
73	messages,
74	});
75
76	return result.toDataStreamResponse();
77	}
78	```
79
80	Result: A functional chat interface with streaming AI responses in ~10 lines of frontend code.
81
82	---
83
84	## useChat Hook - Complete Reference
85
86	### Basic Usage (v5 Pattern)
87
88	```tsx
89	'use client';
90	import { useChat } from 'ai/react';
91	import { useState, FormEvent } from 'react';
92
93	export default function ChatComponent() {
94	const { messages, sendMessage, isLoading, error } = useChat({
95	api: '/api/chat',
96	});
97	const [input, setInput] = useState('');
98
99	const handleSubmit = (e: FormEvent) => {
100	e.preventDefault();
101	if (!input.trim()) return;
102
103	sendMessage({ content: input });
104	setInput('');
105	};
106
107	return (
108	<div className="flex flex-col h-screen">
109	{/* Messages */}
110	<div className="flex-1 overflow-y-auto p-4">
111	{messages.map(message => (
112	<div
113	key={message.id}
114	className={message.role === 'user' ? 'text-right' : 'text-left'}
115	>
116	<div className="inline-block p-2 rounded bg-gray-100">
117	{message.content}
118	</div>
119	</div>
120	))}
121	{isLoading && <div className="text-gray-500">AI is thinking...</div>}
122	</div>
123
124	{/* Input */}
125	<form onSubmit={handleSubmit} className="p-4 border-t">
126	<input
127	value={input}
128	onChange={(e) => setInput(e.target.value)}
129	placeholder="Type a message..."
130	disabled={isLoading}
131	className="w-full p-2 border rounded"
132	/>
133	</form>
134
135	{/* Error */}
136	{error && <div className="text-red-500 p-4">{error.message}</div>}
137	</div>
138	);
139	}
140	```
141
142	### Full API Reference
143
144	```typescript
145	const {
146	// Messages
147	messages, // Message[] - Chat history
148	setMessages, // (messages: Message[]) => void - Update messages
149
150	// Actions
151	sendMessage, // (message: { content: string }) => void - Send message (v5)
152	reload, // () => void - Reload last response
153	stop, // () => void - Stop current generation
154
155	// State
156	isLoading, // boolean - Is AI responding?
157	error, // Error \| undefined - Error if any
158
159	// Data
160	data, // any[] - Custom data from stream
161	metadata, // object - Response metadata
162	} = useChat({
163	// Required
164	api: '/api/chat', // API endpoint
165
166	// Optional
167	id: 'chat-1', // Chat ID for persistence
168	initialMessages: [], // Initial messages (controlled mode)
169
170	// Callbacks
171	onFinish: (message,

People who liked this also viewed

6 picks

Type