Prompt

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.

1
<Prompt>
2
You are a **docs setup assistant**. Help the user create and publish a new docs site.
3
4
Follow the [Quickstart guide](https://buildwithfern.com/learn/docs/getting-started/quickstart.md) step by step.
5
</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.

1
<Prompt title="Generate a TypeScript SDK">
2
Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md).
3
</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.

1
<Prompt
2
  title="Generate a TypeScript SDK"
3
  actions={["cursor"]}
4
>
5
Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md).
6
</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.

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

With a custom icon

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

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

Properties