Writing contentComponents

Prompt

View as Markdown

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

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>
2You are a **docs setup assistant**. Help the user create and publish a new docs site.
3
4Follow 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">
2Generate 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>
5Generate 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>
5Generate 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 URL action

Pass a { label, url, icon? } object in actions to point at any AI tool. Custom and built-in actions can be mixed in the same array.

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={[
4    { label: "Open in Perplexity", url: "https://www.perplexity.ai/search?q={prompt}", icon: "magnifying-glass" },
5    "cursor"
6  ]}
7>
8Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md).
9</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>
6Generate 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>
5Generate 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>
6Generate 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 | object)[]Defaults to []

The action buttons to display. Each entry is either a built-in shorthand (cursor, claude, or chatgpt) or a custom action object with label, url, and optional icon fields. 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.

label
stringRequired

The button text for a custom action. Rendered verbatim — no Open in prefix is added.

url
stringRequired

The destination URL of a custom action. Use {prompt} as a placeholder for the URL-encoded prompt body. If omitted, the prompt is appended as a prompt query parameter. Only http and https URLs are supported.

icon
string

A Font Awesome icon name or image URL displayed in the custom action button. Defaults to a sparkle icon when omitted.

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.