fern-api · kgowru · Mar 26, 2026 · Apr 10, 2026 · Apr 14, 2026
@@ -129,6 +129,9 @@ navigation:
             path: ./pages/component-library/default-components/parameter-fields.mdx
             icon: fa-duotone fa-list
             slug: parameter-fields
+          - page: Prompt
+            path: ./pages/component-library/default-components/prompt.mdx
+            icon: fa-duotone fa-terminal
           - page: Runnable endpoint
             path: ./pages/component-library/default-components/runnable-endpoint.mdx
             icon: fa-duotone fa-play-circle

@@ -0,0 +1,39 @@
+---
+tags: ["components", "ai"]
+---
+
+## Prompt component
+
+The new [`<Prompt>`](/learn/docs/writing-content/components/prompt) component displays an AI prompt with a description, icon, and action buttons. Add it to the top of a tutorial page so readers can copy the instructions or open them directly in an AI tool like Cursor, Claude, or ChatGPT.
+
+Markdown formatting in prompt children is automatically preserved when copied or sent to an AI tool.
+
+<div className="highlight-frame">
+  <div className="highlight-frame-content">
+  <Prompt
+    description="Create a **docs site** with an AI assistant."
+    icon="rocket"
+    iconType="solid"
+    actions={["copy", "claude"]}
+  >
+  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) step by step.
+  </Prompt>
+  </div>
+</div>
+
+```jsx Markdown
+<Prompt
+  description="Create a **docs site** with an AI assistant."
+  icon="rocket"
+  iconType="solid"
+  actions={["copy", "claude"]}
+>
+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) step by step.
+</Prompt>
+```
+
+<Button intent="none" outlined rightIcon="arrow-right" href="/learn/docs/writing-content/components/prompt">Read the docs</Button>
@@ -0,0 +1,163 @@
+---
+title: Prompt
+description: Display a copyable prompt with optional open-in actions for AI tools like Cursor, Claude, and ChatGPT.
+---
+
+<Markdown src="/snippets/agent-directive.mdx"/>
+
+The `<Prompt>` component displays an AI prompt with a description, icon, and action buttons. Add it to the top of a tutorial page so readers can copy the instructions or open them directly in an AI tool like Cursor, Claude, or ChatGPT.
+
+When a reader copies a prompt or opens it in an AI tool, the component sends the **original markdown** content — including formatting, links, and lists — so the AI tool receives a well-structured prompt rather than plain text.
+
+## Usage
+
+<div className="highlight-frame">
+  <div className="highlight-frame-content">
+  <Prompt
+    description="Create a **docs site** with an AI assistant."
+    icon="rocket"
+    iconType="solid"
+    actions={["copy", "claude"]}
+  >
+  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) step by step.
+  </Prompt>
+  </div>
+</div>
+
+```jsx Markdown
+<Prompt
+  description="Create a **docs site** with an AI assistant."
+  icon="rocket"
+  iconType="solid"
+  actions={["copy", "claude"]}
+>
+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) step by step.
+</Prompt>
+```
+
+## Variants
+
+### Copy only
+
+When only the `copy` action is specified (or no actions are provided), the component displays a single "Copy prompt" button.
+
+<div className="highlight-frame">
+  <div className="highlight-frame-content">
+  <Prompt
+    description="Generate a **TypeScript SDK**."
+    icon="rocket"
+    iconType="solid"
+  >
+  Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart).
+  </Prompt>
+  </div>
+</div>
+
+```jsx Markdown
+<Prompt
+  description="Generate a **TypeScript SDK**."
+  icon="rocket"
+  iconType="solid"
+>
+Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart).
+</Prompt>
+```
+
+### Single open-in action
+
+When one open-in action is specified alongside `copy`, the component shows both a "Copy prompt" button and an "Open in" button.
+
+<div className="highlight-frame">
+  <div className="highlight-frame-content">
+  <Prompt
+    description="Generate a **TypeScript SDK** in Cursor."
+    icon="rocket"
+    iconType="solid"
+    actions={["copy", "cursor"]}
+  >
+  Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart).
+  </Prompt>
+  </div>
+</div>
+
+```jsx Markdown
+<Prompt
+  description="Generate a **TypeScript SDK** in Cursor."
+  icon="rocket"
+  iconType="solid"
+  actions={["copy", "cursor"]}
+>
+Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart).
+</Prompt>
+```
+
+### Multiple open-in actions
+
+When multiple open-in actions are specified, they collapse into a dropdown menu labeled "Open in..." with options for each tool.
+
+<div className="highlight-frame">
+  <div className="highlight-frame-content">
+  <Prompt
+    description="Generate a **TypeScript SDK** with your tool of choice."
+    icon="rocket"
+    iconType="solid"
+    actions={["copy", "cursor", "claude", "chatgpt"]}
+  >
+  Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart).
+  </Prompt>
+  </div>
+</div>
+
+```jsx Markdown
+<Prompt
+  description="Generate a **TypeScript SDK** with your tool of choice."
+  icon="rocket"
+  iconType="solid"
+  actions={["copy", "cursor", "claude", "chatgpt"]}
+>
+Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart).
+</Prompt>
+```
+
+## How it works
+
+The `<Prompt>` component automatically preserves the **original markdown** of its children. When a reader copies the prompt or opens it in an AI tool, they receive the raw markdown source — including bold, italic, links, and lists — rather than a lossy plain-text extraction.
+
+This means you can write rich prompts with formatting and links, and the AI tool will see the full markdown context:
+
+```jsx Markdown
+<Prompt actions={["copy", "cursor"]}>
+You are a **technical writing assistant**.
+
+- Use second-person voice ("you") and active verbs.
+- Follow the [style guide](https://example.com/style-guide).
+</Prompt>
+```
+
+The copied text will include the bold markers, list formatting, and link.
+
+## Properties
+
+<ParamField path="description" type="string">
+  A short description displayed next to the icon. Supports basic markdown formatting: `**bold**` and `*italic*`.
+</ParamField>
+
+<ParamField path="icon" type="string | ReactElement">
+  The icon displayed alongside the description. Accepts a [Font Awesome](https://fontawesome.com/icons) icon name, a URL to an image, or a React element.
+</ParamField>
+
+<ParamField path="iconType" type="string">
+  The Font Awesome style for the icon (e.g., `solid`, `regular`, `light`, `duotone`). Only applies when `icon` is a Font Awesome icon name.
+</ParamField>
+
+<ParamField path="actions" type="string[]" default='["copy"]'>
+  The action buttons to display. Available options: `copy`, `cursor`, `claude`, `chatgpt`.
+</ParamField>
+
+<ParamField path="children" type="markdown" required={true}>
+  The prompt text in markdown. This content is copied to the clipboard or sent to the selected AI tool with its original markdown formatting preserved (bold, italic, links, lists, etc.).
+</ParamField>