> If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.
>
> GET https://buildwithfern.com/learn/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiJhYzFjOTMxMi0xZTdiLTQyM2ItODQyZC1jNWQ4NDFjODBkYjEiLCJleHAiOjE3Nzc0ODcxMDYsImlhdCI6MTc3NzQ4NjgwNn0.AV4dMp2G9aDBtMx6EDUUCtZPyaGJvSBMdP8Q82UZUCA
>
> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt.

# Prompt

> Display a copyable prompt with optional open-in actions for AI tools like Cursor, Claude, and ChatGPT.

The `<Prompt>` component displays an AI prompt card with an icon, a single-line prompt preview, a copy button, and optional "Open in" action buttons for AI tools. Add it to any page so readers can copy the instructions or open them directly in Cursor, Claude, or ChatGPT.

Use it in tutorials, quickstarts, migration guides, or any page where you want readers to hand off a task to an AI assistant — for example, scaffolding a project, generating an SDK, or applying a code change.

Copying or opening a prompt preserves its original markdown formatting.

## Usage

By default, `<Prompt>` renders a sparkle icon, the prompt text, and a copy button. Action buttons appear inline when no title is set.

<div>
  <div>
    <Prompt>
      You are a **docs setup assistant**. Help the user create and publish a new docs site.

      Follow the [Quickstart guide](https://buildwithfern.com/learn/docs/getting-started/quickstart.md) step by step.
    </Prompt>
  </div>
</div>

```jsx Markdown
<Prompt>
You are a **docs setup assistant**. Help the user create and publish a new docs site.

Follow the [Quickstart guide](https://buildwithfern.com/learn/docs/getting-started/quickstart.md) step by step.
</Prompt>
```

## Variants

### With title

Set the `title` prop to add a header row above the prompt bar. When a title is set, action buttons move into the header row.

<div>
  <div>
    <Prompt title="Generate a TypeScript SDK">
      Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md).
    </Prompt>
  </div>
</div>

```jsx Markdown
<Prompt title="Generate a TypeScript SDK">
Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md).
</Prompt>
```

### With a single open-in action

Set the `actions` prop to add a button that opens the prompt directly in an AI tool. Available values: `cursor`, `claude`, `chatgpt`.

<div>
  <div>
    <Prompt title="Generate a TypeScript SDK" actions={["cursor"]}>
      Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md).
    </Prompt>
  </div>
</div>

```jsx Markdown
<Prompt
  title="Generate a TypeScript SDK"
  actions={["cursor"]}
>
Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md).
</Prompt>
```

### With multiple open-in actions

When multiple actions are specified, the first becomes the primary button and the rest are accessible via a dropdown.

<div>
  <div>
    <Prompt title="Generate a TypeScript SDK" actions={["cursor", "claude", "chatgpt"]}>
      Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md).
    </Prompt>
  </div>
</div>

```jsx Markdown
<Prompt
  title="Generate a TypeScript SDK"
  actions={["cursor", "claude", "chatgpt"]}
>
Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md).
</Prompt>
```

### With a custom icon

Set the `icon` prop to a Font Awesome icon name or image URL.

<div>
  <div>
    <Prompt title="Generate a TypeScript SDK" icon="code" actions={["cursor"]}>
      Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md).
    </Prompt>
  </div>
</div>

```jsx Markdown
<Prompt
  title="Generate a TypeScript SDK"
  icon="code"
  actions={["cursor"]}
>
Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md).
</Prompt>
```

## Properties

<ParamField path="children" type="markdown" required={true}>
  The prompt text in markdown. This content is shown as a single-line preview, copied to the clipboard, or sent to the selected AI tool with its original markdown formatting preserved.
</ParamField>

<ParamField path="title" type="string">
  A title displayed above the prompt bar.
</ParamField>

<ParamField path="icon" type="string">
  A [Font Awesome icon](/learn/docs/writing-content/components/icons) name or image URL displayed to the left of the prompt text. Defaults to a sparkle icon when omitted.
</ParamField>

<ParamField path="actions" type="string[]" default="[]">
  The "Open in" action buttons to display. Available values: `cursor`, `claude`, `chatgpt`. The first action renders as the primary button. Additional actions are accessible via a dropdown. The copy button is always present regardless of this prop.
</ParamField>