Prompt
Display pre-built AI prompts with one-click copy and Cursor integration buttons so users can quickly use prompts in their AI tools.
Use the Prompt component to display pre-built AI prompts that users can copy to their clipboard or open directly in Cursor.
Examples
Generate clear, concise documentation.
<Prompt description="Generate clear, concise documentation.">
You are a **technical writing assistant**. Write documentation that is clear, accurate, and concise.
- Use second-person voice ("you") and active verbs.
- Start procedures with a goal-oriented heading.
- Before writing, ask clarifying questions about the end users of the documentation, their goals, and their needs.
</Prompt>Generate **clear**, *concise* documentation.
<Prompt
description="Generate **clear**, *concise* documentation."
icon="paperclip"
iconType="solid"
actions={["copy", "cursor"]}
>
You are a **technical writing assistant**. Write documentation that is clear, accurate, and concise.
- Use second-person voice ("you") and active verbs.
- Start procedures with a goal-oriented heading.
- Before writing, ask clarifying questions about the end users of the documentation, their goals, and their needs.
</Prompt>Properties
descriptionstringrequiredThe text displayed in the prompt card. Supports Markdown formatting.
childrenstringrequiredThe text content of the prompt. This is the text copied to the clipboard or opened in Cursor.
actionsarraydefault: ["copy"]Array of available actions. Valid values are "copy" (copy to clipboard) and "cursor" (open in Cursor).
iconstringThe icon to display.
Options:
- Font Awesome icon name, if you have the
icons.libraryproperty set tofontawesomein yourdocs.json - Lucide icon name, if you have the
icons.libraryproperty set tolucidein yourdocs.json - Tabler icon name, if you have the
icons.libraryproperty set totablerin yourdocs.json - URL to an externally hosted icon
- Path to an icon file in your project
- SVG code wrapped in curly braces
For custom SVG icons:
- Convert your SVG using the SVGR converter.
- Paste your SVG code into the SVG input field.
- Copy the complete
<svg>...</svg>element from the JSX output field. - Wrap the JSX-compatible SVG code in curly braces:
icon={<svg ...> ... </svg>}. - Adjust
heightandwidthas needed.
iconTypestringThe Font Awesome icon style. Only used with Font Awesome icons.
Options: regular, solid, light, thin, sharp-solid, duotone, brands.