Skip to content

Commit 607bb65

Browse files
m7rcelohaydenbleaselclaude
authored
Fix skill description, docs, and PromptInput usage across references (#395)
* Fix skill description, docs, and PromptInput usage across references - Fix SKILL.md frontmatter description to describe user-facing use case instead of internal library development - Remove empty "Quick Start" section (header with no content) - Remove extra consecutive blank lines throughout SKILL.md - Add package runner note (npx/pnpm dlx/bunx) after install description - Fix troubleshooting sub-headings from ## to ### (were same level as parent) - Fix trailing colon to period in theme switching troubleshooting section - Fix wrong `Input` import to `PromptInput` in 6 skill references and 6 docs pages (conversation, message, suggestion, sources, image, web-preview) — `Input` export does not exist, likely leftover from rename - Fix wrong `onSubmit` handler signature in 7 skill references and 7 docs pages — `PromptInput.onSubmit` passes `(message: PromptInputMessage)` as the first argument, not a `FormEvent`. Calling `e.preventDefault()` on a PromptInputMessage object would crash at runtime * fix: don't overwrite SKILL.md in generate-skills Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Hayden Bleasel <hello@haydenbleasel.com> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 2551702 commit 607bb65

16 files changed

Lines changed: 109 additions & 165 deletions

File tree

‎apps/docs/content/components/(chatbot)/conversation.mdx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ import {
3434
MessageResponse,
3535
} from "@/components/ai-elements/message";
3636
import {
37-
Input,
37+
PromptInput,
38+
type PromptInputMessage,
3839
PromptInputTextarea,
3940
PromptInputSubmit,
4041
} from "@/components/ai-elements/prompt-input";
@@ -46,10 +47,9 @@ const ConversationDemo = () => {
4647
const [input, setInput] = useState("");
4748
const { messages, sendMessage, status } = useChat();
4849

49-
const handleSubmit = (e: React.FormEvent) => {
50-
e.preventDefault();
51-
if (input.trim()) {
52-
sendMessage({ text: input });
50+
const handleSubmit = (message: PromptInputMessage) => {
51+
if (message.text.trim()) {
52+
sendMessage({ text: message.text });
5353
setInput("");
5454
}
5555
};
@@ -90,7 +90,7 @@ const ConversationDemo = () => {
9090
<ConversationScrollButton />
9191
</Conversation>
9292

93-
<Input
93+
<PromptInput
9494
onSubmit={handleSubmit}
9595
className="mt-4 w-full max-w-2xl mx-auto relative"
9696
>
@@ -105,7 +105,7 @@ const ConversationDemo = () => {
105105
disabled={!input.trim()}
106106
className="absolute bottom-1 right-1"
107107
/>
108-
</Input>
108+
</PromptInput>
109109
</div>
110110
</div>
111111
);

‎apps/docs/content/components/(chatbot)/message.mdx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@ import {
6363
ConversationScrollButton,
6464
} from "@/components/ai-elements/conversation";
6565
import {
66-
Input,
66+
PromptInput,
67+
type PromptInputMessage,
6768
PromptInputTextarea,
6869
PromptInputSubmit,
6970
} from "@/components/ai-elements/prompt-input";
@@ -76,10 +77,9 @@ const ActionsDemo = () => {
7677
const [input, setInput] = useState("");
7778
const { messages, sendMessage, status, regenerate } = useChat();
7879

79-
const handleSubmit = (e: React.FormEvent) => {
80-
e.preventDefault();
81-
if (input.trim()) {
82-
sendMessage({ text: input });
80+
const handleSubmit = (message: PromptInputMessage) => {
81+
if (message.text.trim()) {
82+
sendMessage({ text: message.text });
8383
setInput("");
8484
}
8585
};
@@ -134,7 +134,7 @@ const ActionsDemo = () => {
134134
<ConversationScrollButton />
135135
</Conversation>
136136

137-
<Input
137+
<PromptInput
138138
onSubmit={handleSubmit}
139139
className="mt-4 w-full max-w-2xl mx-auto relative"
140140
>
@@ -149,7 +149,7 @@ const ActionsDemo = () => {
149149
disabled={!input.trim()}
150150
className="absolute bottom-1 right-1"
151151
/>
152-
</Input>
152+
</PromptInput>
153153
</div>
154154
</div>
155155
);

‎apps/docs/content/components/(chatbot)/reasoning.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import {
3535
} from "@/components/ai-elements/conversation";
3636
import {
3737
PromptInput,
38+
type PromptInputMessage,
3839
PromptInputTextarea,
3940
PromptInputSubmit,
4041
} from "@/components/ai-elements/prompt-input";
@@ -96,9 +97,8 @@ const ReasoningDemo = () => {
9697

9798
const { messages, sendMessage, status } = useChat();
9899

99-
const handleSubmit = (e: React.FormEvent) => {
100-
e.preventDefault();
101-
sendMessage({ text: input });
100+
const handleSubmit = (message: PromptInputMessage) => {
101+
sendMessage({ text: message.text });
102102
setInput("");
103103
};
104104

‎apps/docs/content/components/(chatbot)/sources.mdx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ import {
2929
SourcesTrigger,
3030
} from "@/components/ai-elements/sources";
3131
import {
32-
Input,
32+
PromptInput,
33+
type PromptInputMessage,
3334
PromptInputTextarea,
3435
PromptInputSubmit,
3536
} from "@/components/ai-elements/prompt-input";
@@ -54,10 +55,9 @@ const SourceDemo = () => {
5455
}),
5556
});
5657

57-
const handleSubmit = (e: React.FormEvent) => {
58-
e.preventDefault();
59-
if (input.trim()) {
60-
sendMessage({ text: input });
58+
const handleSubmit = (message: PromptInputMessage) => {
59+
if (message.text.trim()) {
60+
sendMessage({ text: message.text });
6161
setInput("");
6262
}
6363
};
@@ -118,7 +118,7 @@ const SourceDemo = () => {
118118
</Conversation>
119119
</div>
120120

121-
<Input
121+
<PromptInput
122122
onSubmit={handleSubmit}
123123
className="mt-4 w-full max-w-2xl mx-auto relative"
124124
>
@@ -133,7 +133,7 @@ const SourceDemo = () => {
133133
disabled={!input.trim()}
134134
className="absolute bottom-1 right-1"
135135
/>
136-
</Input>
136+
</PromptInput>
137137
</div>
138138
</div>
139139
);

‎apps/docs/content/components/(chatbot)/suggestion.mdx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ Add the following component to your frontend:
2222
"use client";
2323

2424
import {
25-
Input,
25+
PromptInput,
26+
type PromptInputMessage,
2627
PromptInputTextarea,
2728
PromptInputSubmit,
2829
} from "@/components/ai-elements/prompt-input";
@@ -40,10 +41,9 @@ const SuggestionDemo = () => {
4041
const [input, setInput] = useState("");
4142
const { sendMessage, status } = useChat();
4243

43-
const handleSubmit = (e: React.FormEvent) => {
44-
e.preventDefault();
45-
if (input.trim()) {
46-
sendMessage({ text: input });
44+
const handleSubmit = (message: PromptInputMessage) => {
45+
if (message.text.trim()) {
46+
sendMessage({ text: message.text });
4747
setInput("");
4848
}
4949
};
@@ -65,7 +65,7 @@ const SuggestionDemo = () => {
6565
/>
6666
))}
6767
</Suggestions>
68-
<Input
68+
<PromptInput
6969
onSubmit={handleSubmit}
7070
className="mt-4 w-full max-w-2xl mx-auto relative"
7171
>
@@ -80,7 +80,7 @@ const SuggestionDemo = () => {
8080
disabled={!input.trim()}
8181
className="absolute bottom-1 right-1"
8282
/>
83-
</Input>
83+
</PromptInput>
8484
</div>
8585
</div>
8686
</div>

‎apps/docs/content/components/(code)/web-preview.mdx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ import {
3535
} from "@/components/ai-elements/web-preview";
3636
import { useState } from "react";
3737
import {
38-
Input,
38+
PromptInput,
39+
type PromptInputMessage,
3940
PromptInputTextarea,
4041
PromptInputSubmit,
4142
} from "@/components/ai-elements/prompt-input";
@@ -46,17 +47,16 @@ const WebPreviewDemo = () => {
4647
const [prompt, setPrompt] = useState("");
4748
const [isGenerating, setIsGenerating] = useState(false);
4849

49-
const handleSubmit = async (e: React.FormEvent) => {
50-
e.preventDefault();
51-
if (!prompt.trim()) return;
50+
const handleSubmit = async (message: PromptInputMessage) => {
51+
if (!message.text.trim()) return;
5252
setPrompt("");
5353

5454
setIsGenerating(true);
5555
try {
5656
const response = await fetch("/api/v0", {
5757
method: "POST",
5858
headers: { "Content-Type": "application/json" },
59-
body: JSON.stringify({ prompt }),
59+
body: JSON.stringify({ prompt: message.text }),
6060
});
6161

6262
const data = await response.json();
@@ -94,7 +94,7 @@ const WebPreviewDemo = () => {
9494
)}
9595
</div>
9696

97-
<Input
97+
<PromptInput
9898
onSubmit={handleSubmit}
9999
className="w-full max-w-2xl mx-auto relative"
100100
>
@@ -109,7 +109,7 @@ const WebPreviewDemo = () => {
109109
disabled={!prompt.trim()}
110110
className="absolute bottom-1 right-1"
111111
/>
112-
</Input>
112+
</PromptInput>
113113
</div>
114114
</div>
115115
);

‎apps/docs/content/components/(utilities)/image.mdx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ Add the following component to your frontend:
2929

3030
import { Image } from "@/components/ai-elements/image";
3131
import {
32-
Input,
32+
PromptInput,
33+
type PromptInputMessage,
3334
PromptInputTextarea,
3435
PromptInputSubmit,
3536
} from "@/components/ai-elements/prompt-input";
@@ -41,16 +42,15 @@ const ImageDemo = () => {
4142
const [imageData, setImageData] = useState<any>(null);
4243
const [isLoading, setIsLoading] = useState(false);
4344

44-
const handleSubmit = async (e: React.FormEvent) => {
45-
e.preventDefault();
46-
if (!prompt.trim()) return;
45+
const handleSubmit = async (message: PromptInputMessage) => {
46+
if (!message.text.trim()) return;
4747
setPrompt("");
4848

4949
setIsLoading(true);
5050
try {
5151
const response = await fetch("/api/image", {
5252
method: "POST",
53-
body: JSON.stringify({ prompt: prompt.trim() }),
53+
body: JSON.stringify({ prompt: message.text.trim() }),
5454
});
5555

5656
const data = await response.json();
@@ -79,7 +79,7 @@ const ImageDemo = () => {
7979
{isLoading && <Spinner />}
8080
</div>
8181

82-
<Input
82+
<PromptInput
8383
onSubmit={handleSubmit}
8484
className="mt-4 w-full max-w-2xl mx-auto relative"
8585
>
@@ -94,7 +94,7 @@ const ImageDemo = () => {
9494
disabled={!prompt.trim()}
9595
className="absolute bottom-1 right-1"
9696
/>
97-
</Input>
97+
</PromptInput>
9898
</div>
9999
</div>
100100
);

‎packages/scripts/src/generate-skills.ts‎

Lines changed: 10 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import matter from "gray-matter";
1010

1111
const ROOT_DIR = join(import.meta.dirname, "../../..");
1212
const CONTENT_DIR = join(ROOT_DIR, "apps/docs/content");
13-
const DOCS_DIR = join(CONTENT_DIR, "docs");
1413
const COMPONENTS_DIR = join(CONTENT_DIR, "components");
1514
const EXAMPLES_DIR = join(ROOT_DIR, "packages/examples/src");
1615
const SKILLS_DIR = join(ROOT_DIR, "skills");
@@ -38,12 +37,6 @@ const replacePreviews = (content: string): string =>
3837
(_, path) => `See \`scripts/${path}.tsx\` for this example.`
3938
);
4039

41-
const removeCustomComponents = (content: string): string =>
42-
content
43-
.replaceAll(/<ElementsInstaller\s*\/>/g, "")
44-
.replaceAll(/<ElementsDemo\s*\/>/g, "")
45-
.replaceAll(/<Callout>\s*[\s\S]*?<\/Callout>/g, "");
46-
4740
const replaceInstaller = (content: string): string =>
4841
content.replaceAll(
4942
/<ElementsInstaller\s+path=["']([^"']+)["']\s*\/>/g,
@@ -140,15 +133,6 @@ const transformComponentMdx = (fileContent: string): string => {
140133
return processedContent.trim();
141134
};
142135

143-
const transformOverviewMdx = (fileContent: string): string => {
144-
const { content } = matter(fileContent);
145-
146-
let processedContent = removeCustomComponents(content);
147-
processedContent = processedContent.trim();
148-
149-
return processedContent;
150-
};
151-
152136
const findMatchingExamples = async (
153137
componentName: string
154138
): Promise<string[]> => {
@@ -164,46 +148,18 @@ const findMatchingExamples = async (
164148
});
165149
};
166150

167-
const cleanSkillsDir = (): void => {
168-
if (existsSync(SKILLS_DIR)) {
169-
rmSync(SKILLS_DIR, { recursive: true });
170-
}
171-
mkdirSync(SKILLS_DIR, { recursive: true });
172-
};
173-
174-
const generateOverviewSkill = async (): Promise<void> => {
175-
const indexContent = await readFile(join(DOCS_DIR, "index.mdx"), "utf8");
176-
const usageContent = await readFile(join(DOCS_DIR, "usage.mdx"), "utf8");
177-
const troubleshootingContent = await readFile(
178-
join(DOCS_DIR, "troubleshooting.mdx"),
179-
"utf8"
180-
);
181-
182-
const skillContent = `---
183-
name: ai-elements
184-
description: Create new AI chat interface components for the ai-elements library following established composable patterns, shadcn/ui integration, and Vercel AI SDK conventions. Use when creating new components in packages/elements/src or when the user asks to add a new component to ai-elements.
185-
---
186-
187-
# AI Elements
188-
189-
${transformOverviewMdx(indexContent)}
190-
191-
## Usage
192-
193-
${transformOverviewMdx(usageContent)}
194-
195-
## Troubleshooting
196-
197-
${transformOverviewMdx(troubleshootingContent)}
198-
199-
## Available Components
151+
const cleanGeneratedDirs = (): void => {
152+
const referencesDir = join(SKILL_DIR, "references");
153+
const scriptsDir = join(SKILL_DIR, "scripts");
200154

201-
See the \`references/\` folder for detailed documentation on each component.
202-
`;
155+
if (existsSync(referencesDir)) {
156+
rmSync(referencesDir, { recursive: true });
157+
}
158+
if (existsSync(scriptsDir)) {
159+
rmSync(scriptsDir, { recursive: true });
160+
}
203161

204162
mkdirSync(SKILL_DIR, { recursive: true });
205-
await writeFile(join(SKILL_DIR, "SKILL.md"), skillContent);
206-
console.log("Generated: SKILL.md (overview)");
207163
};
208164

209165
const processComponent = async (mdxPath: string): Promise<number> => {
@@ -249,9 +205,7 @@ ${transformComponentMdx(fileContent)}
249205
const main = async (): Promise<void> => {
250206
console.log("Generating ai-elements skill from docs and examples...\n");
251207

252-
cleanSkillsDir();
253-
254-
await generateOverviewSkill();
208+
cleanGeneratedDirs();
255209

256210
const mdxFiles = await discoverMdxFiles(COMPONENTS_DIR);
257211
console.log(`\nFound ${mdxFiles.length} component MDX files\n`);

0 commit comments

Comments
 (0)