> Arbitrary text to add at the BEGINNING of the page

# AI Prompts

> Share copyable AI prompts with your users

The `<Prompt>` component lets you display pre-built AI prompts that users can copy to their clipboard or open directly in tools like Cursor, Claude, and ChatGPT.

## Basic prompt

The simplest usage — a description and prompt content with a copy button (the default action).

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.

```jsx
<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>
```

## Markdown in description

The description supports **bold** and *italic* markdown formatting.

You are a technical writing assistant. Write documentation that is clear, accurate, and concise.

```jsx
<Prompt description="Generate **clear**, *concise* documentation.">
You are a technical writing assistant.
</Prompt>
```

## Copy and Open In Cursor

Add `actions={["copy", "cursor"]}` to show both a copy button and an "Open in Cursor" button.

You are a code review assistant. Review the following code for bugs, performance issues, and best practices. Suggest improvements and explain your reasoning.

```jsx
<Prompt description="Code review assistant" actions={["copy", "cursor"]}>
You are a code review assistant. Review the following code for bugs,
performance issues, and best practices.
</Prompt>
```

## Multiple Open In options

When you specify more than one open-in action, a dropdown menu appears.

You are a helpful AI assistant. Analyze the provided data and generate a comprehensive report with key insights and actionable recommendations.

```jsx
<Prompt
  description="Multi-tool prompt"
  actions={["copy", "cursor", "claude", "chatgpt"]}
>
You are a helpful AI assistant. Analyze the provided data and generate
a comprehensive report with key insights and actionable recommendations.
</Prompt>
```

## Open In without copy

You can omit the copy button entirely and only show an open-in action.

You are Claude. Help the user write a blog post about AI safety. Focus on concrete examples and actionable recommendations.

```jsx
<Prompt description="Open directly in Claude" actions={["claude"]}>
You are Claude. Help the user write a blog post about AI safety.
</Prompt>
```

## Display only (no actions)

Pass an empty `actions` array to render a prompt with no buttons — useful for displaying example prompts as reference.

You are a customer support agent for Acme Corp. Always be polite, helpful, and concise. If you don't know the answer, say so and offer to escalate to a human agent.

```jsx
<Prompt description="Example system prompt" actions={[]}>
You are a customer support agent for Acme Corp.
</Prompt>
```

## With an icon

Use the `icon` and `iconType` props to add an icon next to the description.

You are a file organization assistant. Help the user organize their documents into a logical folder structure based on content type and project.

```jsx
<Prompt
  description="Prompt with icon"
  icon="paperclip"
  iconType="solid"
  actions={["copy", "cursor"]}
>
You are a file organization assistant. Help the user organize
their documents into a logical folder structure.
</Prompt>
```

> Share copyable AI prompts with your users