building-ai-chat

Name: building-ai-chat
Author: ancoleman

109installs59forks

How to install building-ai-chat?

ancoleman/ai-design-components/building-ai-chat

$npx -y skills add ancoleman/ai-design-components --skill building-ai-chat

Installs into the current project.

Summary

Builds AI chat interfaces and conversational UI with streaming responses, context management, and multi-modal support. Use when creating ChatGPT-style interfaces, AI assistants, code copilots, or conversational agents. Handles streaming text, token limits, regeneration, feedback

Files · 1

View on GitHub

SKILL.md

1	# AI Chat Interface Components
2
3	## Purpose
4
5	Define the emerging standards for AI/human conversational interfaces in the 2024-2025 AI integration boom. This skill leverages meta-knowledge from building WITH Claude to establish definitive patterns for streaming UX, context management, and multi-modal interactions. As the industry lacks established patterns, this provides the reference implementation others will follow.
6
7	## When to Use
8
9	Activate this skill when:
10	- Building ChatGPT-style conversational interfaces
11	- Creating AI assistants, copilots, or chatbots
12	- Implementing streaming text responses with markdown
13	- Managing conversation context and token limits
14	- Handling multi-modal inputs (text, images, files, voice)
15	- Dealing with AI-specific errors (hallucinations, refusals, limits)
16	- Adding feedback mechanisms (thumbs, regeneration, editing)
17	- Implementing conversation branching or threading
18	- Visualizing tool/function calling
19
20	## Quick Start
21
22	Minimal AI chat interface in under 50 lines:
23
24	```tsx
25	import { useChat } from 'ai/react';
26
27	export function MinimalAIChat() {
28	const { messages, input, handleInputChange, handleSubmit, isLoading, stop } = useChat();
29
30	return (
31	<div className="chat-container">
32	<div className="messages">
33	{messages.map(m => (
34	<div key={m.id} className={`message ${m.role}`}>
35	<div className="content">{m.content}</div>
36	</div>
37	))}
38	{isLoading && <div className="thinking">AI is thinking...</div>}
39	</div>
40
41	<form onSubmit={handleSubmit} className="input-form">
42	<input
43	value={input}
44	onChange={handleInputChange}
45	placeholder="Ask anything..."
46	disabled={isLoading}
47	/>
48	{isLoading ? (
49	<button type="button" onClick={stop}>Stop</button>
50	) : (
51	<button type="submit">Send</button>
52	)}
53	</form>
54	</div>
55	);
56	}
57	```
58
59	For complete implementation with streaming markdown, see `examples/basic-chat.tsx`.
60
61	## Core Components
62
63	### Message Display
64
65	Build user, AI, and system message bubbles with streaming support:
66
67	```tsx
68	// User message
69	<div className="message user">
70	<div className="content">{message.content}</div>
71	<time className="timestamp">{formatTime(message.timestamp)}</time>
72	</div>
73
74	// AI message with streaming
75	<div className="message ai">
76	<Streamdown className="content">{message.content}</Streamdown>
77	{message.isStreaming && <span className="cursor">▊</span>}
78	</div>
79
80	// System message
81	<div className="message system">
82	<Icon type="info" />
83	<span>{message.content}</span>
84	</div>
85	```
86
87	For markdown rendering, code blocks, and formatting details, see `references/message-components.md`.
88
89	### Input Components
90
91	Create rich input experiences with attachments and voice:
92
93	```tsx
94	<div className="input-container">
95	<button onClick={attachFile} aria-label="Attach file">
96	<PaperclipIcon />
97	</button>
98
99	<textarea
100	value={input}
101	onChange={handleChange}
102	onKeyDown={handleKeyDown}
103	placeholder="Type a message..."
104	rows={1}
105	style={{ height: textareaHeight }}
106	/>
107
108	<button onClick={toggleVoice} aria-label="Voice input">
109	<MicIcon />
110	</button>
111
112	<button type="submit" disabled={!input.trim() \|\| isLoading}>
113	<SendIcon />
114	</button>
115	</div>
116	```
117
118	### Response Controls
119
120	Essential controls for AI responses:
121
122	```tsx
123	<div className="response-controls">
124	{isStreaming && (
125	<button onClick={stop} className="stop-btn">
126	Stop generating
127	</button>
128	)}
129
130	{!isStreaming && (
131	<>
132	<button onClick={regenerate} aria-label="Regenerate response">
133	<RefreshIcon /> Regenerate
134	</button>
135	<button onClick={continueGeneration} aria-label="Continue">
136	Continue
137	</button>
138	<button onClick={editMessage} aria-label="Edit message">
139	<EditIcon /> Edit
140	</button>
141	</>
142	)}
143	</div>
144	```
145
146	### Feedback Mechanisms
147
148	Collect user feedback to improve AI responses:
149
150	```tsx
151	<div className="feedback-controls">
152	<button
153	onClick={() => sendFeedback('positive')}
154	aria-label="Good response"
155	className={feedback === 'positive' ? 'selected' : ''}
156	>
157	<ThumbsUpIcon />
158	</button>
159
160	<button
161	onClick={() => sendFeedback('negative')}
162	aria-label="Bad response"
163	className={feedback === 'negative' ? 'selected' : ''}
164	>
165	<ThumbsDownIcon />
166	</button>
167
168	<button onClick={copyToClipboard} aria-label="Copy">
169	<CopyIcon />
170	</button>
171
172	<button onClick={share} aria-label="Share">

People who liked this also viewed

6 picks

Type

building-ai-chat

109installs59forks

View on GitHub

How to install building-ai-chat?

ancoleman/ai-design-components/building-ai-chat

$npx -y skills add ancoleman/ai-design-components --skill building-ai-chat

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# AI Chat Interface Components
2
3	## Purpose
4
5	Define the emerging standards for AI/human conversational interfaces in the 2024-2025 AI integration boom. This skill leverages meta-knowledge from building WITH Claude to establish definitive patterns for streaming UX, context management, and multi-modal interactions. As the industry lacks established patterns, this provides the reference implementation others will follow.
6
7	## When to Use
8
9	Activate this skill when:
10	- Building ChatGPT-style conversational interfaces
11	- Creating AI assistants, copilots, or chatbots
12	- Implementing streaming text responses with markdown
13	- Managing conversation context and token limits
14	- Handling multi-modal inputs (text, images, files, voice)
15	- Dealing with AI-specific errors (hallucinations, refusals, limits)
16	- Adding feedback mechanisms (thumbs, regeneration, editing)
17	- Implementing conversation branching or threading
18	- Visualizing tool/function calling
19
20	## Quick Start
21
22	Minimal AI chat interface in under 50 lines:
23
24	```tsx
25	import { useChat } from 'ai/react';
26
27	export function MinimalAIChat() {
28	const { messages, input, handleInputChange, handleSubmit, isLoading, stop } = useChat();
29
30	return (
31	<div className="chat-container">
32	<div className="messages">
33	{messages.map(m => (
34	<div key={m.id} className={`message ${m.role}`}>
35	<div className="content">{m.content}</div>
36	</div>
37	))}
38	{isLoading && <div className="thinking">AI is thinking...</div>}
39	</div>
40
41	<form onSubmit={handleSubmit} className="input-form">
42	<input
43	value={input}
44	onChange={handleInputChange}
45	placeholder="Ask anything..."
46	disabled={isLoading}
47	/>
48	{isLoading ? (
49	<button type="button" onClick={stop}>Stop</button>
50	) : (
51	<button type="submit">Send</button>
52	)}
53	</form>
54	</div>
55	);
56	}
57	```
58
59	For complete implementation with streaming markdown, see `examples/basic-chat.tsx`.
60
61	## Core Components
62
63	### Message Display
64
65	Build user, AI, and system message bubbles with streaming support:
66
67	```tsx
68	// User message
69	<div className="message user">
70	<div className="content">{message.content}</div>
71	<time className="timestamp">{formatTime(message.timestamp)}</time>
72	</div>
73
74	// AI message with streaming
75	<div className="message ai">
76	<Streamdown className="content">{message.content}</Streamdown>
77	{message.isStreaming && <span className="cursor">▊</span>}
78	</div>
79
80	// System message
81	<div className="message system">
82	<Icon type="info" />
83	<span>{message.content}</span>
84	</div>
85	```
86
87	For markdown rendering, code blocks, and formatting details, see `references/message-components.md`.
88
89	### Input Components
90
91	Create rich input experiences with attachments and voice:
92
93	```tsx
94	<div className="input-container">
95	<button onClick={attachFile} aria-label="Attach file">
96	<PaperclipIcon />
97	</button>
98
99	<textarea
100	value={input}
101	onChange={handleChange}
102	onKeyDown={handleKeyDown}
103	placeholder="Type a message..."
104	rows={1}
105	style={{ height: textareaHeight }}
106	/>
107
108	<button onClick={toggleVoice} aria-label="Voice input">
109	<MicIcon />
110	</button>
111
112	<button type="submit" disabled={!input.trim() \|\| isLoading}>
113	<SendIcon />
114	</button>
115	</div>
116	```
117
118	### Response Controls
119
120	Essential controls for AI responses:
121
122	```tsx
123	<div className="response-controls">
124	{isStreaming && (
125	<button onClick={stop} className="stop-btn">
126	Stop generating
127	</button>
128	)}
129
130	{!isStreaming && (
131	<>
132	<button onClick={regenerate} aria-label="Regenerate response">
133	<RefreshIcon /> Regenerate
134	</button>
135	<button onClick={continueGeneration} aria-label="Continue">
136	Continue
137	</button>
138	<button onClick={editMessage} aria-label="Edit message">
139	<EditIcon /> Edit
140	</button>
141	</>
142	)}
143	</div>
144	```
145
146	### Feedback Mechanisms
147
148	Collect user feedback to improve AI responses:
149
150	```tsx
151	<div className="feedback-controls">
152	<button
153	onClick={() => sendFeedback('positive')}
154	aria-label="Good response"
155	className={feedback === 'positive' ? 'selected' : ''}
156	>
157	<ThumbsUpIcon />
158	</button>
159
160	<button
161	onClick={() => sendFeedback('negative')}
162	aria-label="Bad response"
163	className={feedback === 'negative' ? 'selected' : ''}
164	>
165	<ThumbsDownIcon />
166	</button>
167
168	<button onClick={copyToClipboard} aria-label="Copy">
169	<CopyIcon />
170	</button>
171
172	<button onClick={share} aria-label="Share">

People who liked this also viewed

6 picks

Type