Prompt | Fern Documentation

The <Prompt> component displays an AI prompt card with an icon, a multi-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.

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.

Markdown

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.

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).

Markdown

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.

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).

Markdown

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.

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).

Markdown

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.

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).

Markdown

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>

Single-line mode

Set singleLine to truncate the prompt body to a single line with an ellipsis. This is useful for compact inline previews.

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).

Markdown

1 <Prompt
2   title="Generate a TypeScript SDK"
3   singleLine
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>

Hidden prompt body

Set hidePrompt to hide the prompt body chip entirely. Only the title row with copy and open-in actions is shown. This is useful when the prompt is long and you want a summary-only view.

Generate a TypeScript SDK

Markdown

1 <Prompt
2   title="Generate a TypeScript SDK"
3   hidePrompt
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

children

markdownRequired

The prompt text in markdown. This content is displayed in the prompt body, copied to the clipboard, or sent to the selected AI tool with its original markdown formatting preserved.

title

string

A title displayed above the prompt bar.

icon

string

A Font Awesome icon name or image URL displayed to the left of the prompt text. Defaults to a sparkle icon when omitted.

actions

string[]Defaults to []

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.

hidePrompt

boolean

Hide the prompt body chip. Only the title row with copy and open-in actions is shown. Requires title to be set.

singleLine

boolean

Force a single-line truncated preview with ellipsis. When false (the default), the prompt body wraps long lines and shows up to five lines with vertical scrolling.