> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

# Prompt

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

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

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

#### 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`**

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

#### 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`**

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

#### 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`**

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

```jsx Markdown
<Prompt
  title="Generate a TypeScript SDK"
  actions={[
    { label: "Open in Perplexity", url: "https://www.perplexity.ai/search?q={prompt}", icon: "magnifying-glass" },
    "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 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`**

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

### 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`**

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

Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md).

**`Markdown`**

```jsx Markdown
<Prompt
  title="Generate a TypeScript SDK"
  hidePrompt
  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

**`children`** `markdown` — required

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](/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.

---

**`actions`** `(string | object)[]` — default: \[]

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`** `string` — required

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

---

**`url`** `string` — required

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](/learn/docs/writing-content/components/icons) 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.

---

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