LLM Documentation Generator
Use AI to generate component documentation automatically.
This guide explains how to use the LLM prompt files to automatically generate high-quality documentation for Evolphin UI components.
Overview
We provide two files in llm.txt/ that help AI assistants generate documentation:
| File | Purpose |
|---|---|
component-docs-prompt.md | The main prompt file - drag this into any AI chat |
component-template.mdx | Reference template showing the expected output format |
Quick Start
This workflow works with any AI assistant (ChatGPT, Claude, Gemini, Copilot, etc.)
Step 1: Open Your AI Chat
Open your preferred AI assistant in a new conversation.
Step 2: Drag and Drop the Prompt
Drag the llm.txt/component-docs-prompt.md file directly into the chat window.
Step 3: Add Your Component Source Code
After the prompt, paste your component's source code. For example:
// registry/default/ui/my-button.tsx
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const myButtonVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground",
outline: "border border-input bg-background",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 px-3",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
);
export interface MyButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof myButtonVariants> {}
const MyButton = React.forwardRef<HTMLButtonElement, MyButtonProps>(
({ className, variant, size, ...props }, ref) => {
return (
<button
className={cn(myButtonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
);
}
);
MyButton.displayName = "MyButton";
export { MyButton, myButtonVariants };Step 4: Review and Save
The AI will generate a complete MDX file. Review it and save to:
content/docs/components/{component-name}.mdxWhat the Prompt Does
The prompt instructs the AI to:
- Analyze your component - Identifies exports, props, variants, and sizes
- Generate frontmatter - Title and description
- Create installation section - With pnpm/npm/yarn tabs
- Write usage examples - Import statement and basic usage
- Add type definitions - With twoslash hover hints
- Create interactive examples - Using
<ComponentPreview> - Build API reference tables - For all props with correct formatting
- Include accessibility notes - Keyboard, screen reader, focus info
Common Pitfalls the Prompt Prevents
The prompt explicitly addresses these common AI mistakes.
Broken Markdown Tables
Union types like "default" | "outline" break tables because | is the column separator.
// ❌ WRONG - Creates 5 columns
| `variant` | "default" | "outline" | "default" | Description |
// ✅ CORRECT - Escaped pipe character
| `variant` | `"default" \| "outline"` | `"default"` | Description |Tabs Component Syntax
// ❌ WRONG - String instead of array
<Tabs items="['pnpm', 'npm']">
// ✅ CORRECT - JavaScript array expression
<Tabs items={["pnpm", "npm"]}>ComponentPreview Mismatch
// ❌ WRONG - Code prop doesn't match children
<ComponentPreview code={`<Button>Click</Button>`}>
<Button variant="outline">Click Me</Button>
</ComponentPreview>
// ✅ CORRECT - Code and children match exactly
<ComponentPreview code={`<Button variant="outline">Click Me</Button>`}>
<Button variant="outline">Click Me</Button>
</ComponentPreview>File Locations
evolphin-ui/
├── llm.txt/
│ ├── component-docs-prompt.md # Main prompt (drag this)
│ ├── component-template.mdx # Reference template
│ └── README.md # Quick reference
└── content/docs/components/ # Output location
└── {component-name}.mdxTips for Best Results
- Include the full source file - Don't truncate the component code
- Mention sub-components - If your component has multiple exports, list them
- Specify the component name - The AI uses this for file naming
- Review the output - Always verify tables render correctly
- Run the dev server - Check the preview at
localhost:3000
Customizing the Prompt
Feel free to modify component-docs-prompt.md if you need:
- Different documentation sections
- Additional examples for specific component types
- Custom branding or terminology
- Stricter or looser formatting rules
After generating docs, run pnpm dev and preview the page to catch any
rendering issues before committing.