From 81bbb35a7f833b21cb4f5f0311fffb961f915b3c Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Thu, 26 Mar 2026 02:46:43 +0000
Subject: [PATCH 1/4] docs: add Prompt component page and changelog entry

Co-Authored-By: Kapil Gowru <k.gowru@gmail.com>
---
 fern/products/docs/docs.yml                   |  3 +
 .../docs/pages/changelog/2026-03-26.mdx       | 16 ++++
 .../default-components/prompt.mdx             | 90 +++++++++++++++++++
 3 files changed, 109 insertions(+)
 create mode 100644 fern/products/docs/pages/changelog/2026-03-26.mdx
 create mode 100644 fern/products/docs/pages/component-library/default-components/prompt.mdx

diff --git a/fern/products/docs/docs.yml b/fern/products/docs/docs.yml
index 161333fb4..7e4458103 100644
--- a/fern/products/docs/docs.yml
+++ b/fern/products/docs/docs.yml
@@ -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
diff --git a/fern/products/docs/pages/changelog/2026-03-26.mdx b/fern/products/docs/pages/changelog/2026-03-26.mdx
new file mode 100644
index 000000000..1aecf76cd
--- /dev/null
+++ b/fern/products/docs/pages/changelog/2026-03-26.mdx
@@ -0,0 +1,16 @@
+## Prompt component
+
+The new [`<Prompt>`](/learn/docs/writing-content/components/prompt) component displays a copyable prompt with optional "open in" actions for AI tools. Readers can copy the prompt text or open it directly in Cursor, Claude, or ChatGPT.
+
+When multiple open-in actions are configured, they collapse into a dropdown menu.
+
+```jsx Markdown
+<Prompt
+  description="Generate **clear**, *concise* documentation."
+  icon="paperclip"
+  iconType="solid"
+  actions={["copy", "cursor", "claude"]}
+>
+You are a technical writing assistant. Write documentation that is clear, accurate, and concise.
+</Prompt>
+```
diff --git a/fern/products/docs/pages/component-library/default-components/prompt.mdx b/fern/products/docs/pages/component-library/default-components/prompt.mdx
new file mode 100644
index 000000000..b0279b95e
--- /dev/null
+++ b/fern/products/docs/pages/component-library/default-components/prompt.mdx
@@ -0,0 +1,90 @@
+---
+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 a prompt with a description, icon, and action buttons. Use it to share reusable prompts that readers can copy or open directly in AI tools like Cursor, Claude, or ChatGPT.
+
+## Usage
+
+```jsx Markdown
+<Prompt
+  description="Generate **clear**, *concise* documentation."
+  icon="paperclip"
+  iconType="solid"
+  actions={["copy", "cursor"]}
+>
+You are a **technical writing assistant**. Write documentation that is clear, accurate, and concise.
+- Use second-person voice ("you") and active verbs.
+- Start procedures with a goal-oriented heading.
+- Before writing, ask clarifying questions about the end users of the documentation, their goals, and their needs.
+</Prompt>
+```
+
+## Variants
+
+### Copy only
+
+When only the `copy` action is specified (or no actions are provided), the component displays a single "Copy prompt" button.
+
+```jsx Markdown
+<Prompt
+  description="Summarize a plant care guide."
+  icon="seedling"
+  actions={["copy"]}
+>
+Summarize the care instructions for this plant species. Include watering frequency, sunlight requirements, and soil preferences.
+</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.
+
+```jsx Markdown
+<Prompt
+  description="Review **API endpoint** documentation."
+  icon="code"
+  actions={["copy", "cursor"]}
+>
+Review this API endpoint documentation for completeness. Check that all parameters are documented, error responses are listed, and examples are provided.
+</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.
+
+```jsx Markdown
+<Prompt
+  description="Draft a **plant taxonomy** entry."
+  icon="leaf"
+  actions={["copy", "cursor", "claude", "chatgpt"]}
+>
+Draft a taxonomy entry for a new plant species. Include the scientific name, common name, family, native habitat, and distinguishing characteristics.
+</Prompt>
+```
+
+## 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="string | ReactNode" required={true}>
+  The prompt text. This content is copied to the clipboard when the user clicks "Copy prompt" or sent to the selected AI tool.
+</ParamField>

From d644d35a207d397f0a6b8488addd2c5baf98d055 Mon Sep 17 00:00:00 2001
From: Devin Logan <devinannlogan@gmail.com>
Date: Fri, 10 Apr 2026 13:46:40 -0400
Subject: [PATCH 2/4] refine explanation

---
 .../docs/pages/changelog/2026-03-26.mdx       | 29 +++++--
 .../default-components/prompt.mdx             | 86 +++++++++++++++----
 2 files changed, 91 insertions(+), 24 deletions(-)

diff --git a/fern/products/docs/pages/changelog/2026-03-26.mdx b/fern/products/docs/pages/changelog/2026-03-26.mdx
index 1aecf76cd..fa4d6a9ce 100644
--- a/fern/products/docs/pages/changelog/2026-03-26.mdx
+++ b/fern/products/docs/pages/changelog/2026-03-26.mdx
@@ -1,16 +1,33 @@
+---
+tags: ["components", "ai"]
+---
+
 ## Prompt component
 
-The new [`<Prompt>`](/learn/docs/writing-content/components/prompt) component displays a copyable prompt with optional "open in" actions for AI tools. Readers can copy the prompt text or open it directly in Cursor, Claude, or ChatGPT.
+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.
 
-When multiple open-in actions are configured, they collapse into a dropdown menu.
+<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"]}
+  >
+  Create and publish a new docs site by following these instructions: https://buildwithfern.com/learn/docs/getting-started/quickstart.md
+  </Prompt>
+  </div>
+</div>
 
 ```jsx Markdown
 <Prompt
-  description="Generate **clear**, *concise* documentation."
-  icon="paperclip"
+  description="Create a **docs site** with an AI assistant."
+  icon="rocket"
   iconType="solid"
-  actions={["copy", "cursor", "claude"]}
+  actions={["copy", "claude"]}
 >
-You are a technical writing assistant. Write documentation that is clear, accurate, and concise.
+Create and publish a new docs site by following these instructions: https://buildwithfern.com/learn/docs/getting-started/quickstart.md
 </Prompt>
 ```
+
+<Button intent="none" outlined rightIcon="arrow-right" href="/learn/docs/writing-content/components/prompt">Read the docs</Button>
diff --git a/fern/products/docs/pages/component-library/default-components/prompt.mdx b/fern/products/docs/pages/component-library/default-components/prompt.mdx
index b0279b95e..bd9dac01e 100644
--- a/fern/products/docs/pages/component-library/default-components/prompt.mdx
+++ b/fern/products/docs/pages/component-library/default-components/prompt.mdx
@@ -5,21 +5,31 @@ description: Display a copyable prompt with optional open-in actions for AI tool
 
 <Markdown src="/snippets/agent-directive.mdx"/>
 
-The `<Prompt>` component displays a prompt with a description, icon, and action buttons. Use it to share reusable prompts that readers can copy or open directly in AI tools like Cursor, Claude, or ChatGPT.
+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.
 
 ## 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"]}
+  >
+  Create and publish a new docs site by following these instructions: https://buildwithfern.com/learn/docs/getting-started/quickstart.md
+  </Prompt>
+  </div>
+</div>
+
 ```jsx Markdown
 <Prompt
-  description="Generate **clear**, *concise* documentation."
-  icon="paperclip"
+  description="Create a **docs site** with an AI assistant."
+  icon="rocket"
   iconType="solid"
-  actions={["copy", "cursor"]}
+  actions={["copy", "claude"]}
 >
-You are a **technical writing assistant**. Write documentation that is clear, accurate, and concise.
-- Use second-person voice ("you") and active verbs.
-- Start procedures with a goal-oriented heading.
-- Before writing, ask clarifying questions about the end users of the documentation, their goals, and their needs.
+Create and publish a new docs site by following these instructions: https://buildwithfern.com/learn/docs/getting-started/quickstart.md
 </Prompt>
 ```
 
@@ -29,13 +39,25 @@ You are a **technical writing assistant**. Write documentation that is clear, ac
 
 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 by following these instructions: https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md
+  </Prompt>
+  </div>
+</div>
+
 ```jsx Markdown
 <Prompt
-  description="Summarize a plant care guide."
-  icon="seedling"
-  actions={["copy"]}
+  description="Generate a **TypeScript SDK**."
+  icon="rocket"
+  iconType="solid"
 >
-Summarize the care instructions for this plant species. Include watering frequency, sunlight requirements, and soil preferences.
+Generate a TypeScript SDK from my OpenAPI spec by following these instructions: https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md
 </Prompt>
 ```
 
@@ -43,13 +65,27 @@ Summarize the care instructions for this plant species. Include watering frequen
 
 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 by following these instructions: https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md
+  </Prompt>
+  </div>
+</div>
+
 ```jsx Markdown
 <Prompt
-  description="Review **API endpoint** documentation."
-  icon="code"
+  description="Generate a **TypeScript SDK** in Cursor."
+  icon="rocket"
+  iconType="solid"
   actions={["copy", "cursor"]}
 >
-Review this API endpoint documentation for completeness. Check that all parameters are documented, error responses are listed, and examples are provided.
+Generate a TypeScript SDK from my OpenAPI spec by following these instructions: https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md
 </Prompt>
 ```
 
@@ -57,13 +93,27 @@ Review this API endpoint documentation for completeness. Check that all paramete
 
 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 by following these instructions: https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md
+  </Prompt>
+  </div>
+</div>
+
 ```jsx Markdown
 <Prompt
-  description="Draft a **plant taxonomy** entry."
-  icon="leaf"
+  description="Generate a **TypeScript SDK** with your tool of choice."
+  icon="rocket"
+  iconType="solid"
   actions={["copy", "cursor", "claude", "chatgpt"]}
 >
-Draft a taxonomy entry for a new plant species. Include the scientific name, common name, family, native habitat, and distinguishing characteristics.
+Generate a TypeScript SDK from my OpenAPI spec by following these instructions: https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md
 </Prompt>
 ```
 

From f1d1503b34aa376c79160ec72a665fde0c826d2b Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 14 Apr 2026 01:47:35 +0000
Subject: [PATCH 3/4] docs: update Prompt page for markdown preservation and
 remark plugin changes

Co-Authored-By: Kapil Gowru <k.gowru@gmail.com>
---
 .../docs/pages/changelog/2026-03-26.mdx       | 10 ++++-
 .../default-components/prompt.mdx             | 43 ++++++++++++++-----
 2 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/fern/products/docs/pages/changelog/2026-03-26.mdx b/fern/products/docs/pages/changelog/2026-03-26.mdx
index fa4d6a9ce..ee3a295a9 100644
--- a/fern/products/docs/pages/changelog/2026-03-26.mdx
+++ b/fern/products/docs/pages/changelog/2026-03-26.mdx
@@ -6,6 +6,8 @@ tags: ["components", "ai"]
 
 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
@@ -14,7 +16,9 @@ The new [`<Prompt>`](/learn/docs/writing-content/components/prompt) component di
     iconType="solid"
     actions={["copy", "claude"]}
   >
-  Create and publish a new docs site by following these instructions: https://buildwithfern.com/learn/docs/getting-started/quickstart.md
+  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>
@@ -26,7 +30,9 @@ The new [`<Prompt>`](/learn/docs/writing-content/components/prompt) component di
   iconType="solid"
   actions={["copy", "claude"]}
 >
-Create and publish a new docs site by following these instructions: https://buildwithfern.com/learn/docs/getting-started/quickstart.md
+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>
 ```
 
diff --git a/fern/products/docs/pages/component-library/default-components/prompt.mdx b/fern/products/docs/pages/component-library/default-components/prompt.mdx
index bd9dac01e..48f127a14 100644
--- a/fern/products/docs/pages/component-library/default-components/prompt.mdx
+++ b/fern/products/docs/pages/component-library/default-components/prompt.mdx
@@ -7,6 +7,8 @@ description: Display a copyable prompt with optional open-in actions for AI tool
 
 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">
@@ -17,7 +19,9 @@ The `<Prompt>` component displays an AI prompt with a description, icon, and act
     iconType="solid"
     actions={["copy", "claude"]}
   >
-  Create and publish a new docs site by following these instructions: https://buildwithfern.com/learn/docs/getting-started/quickstart.md
+  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>
@@ -29,7 +33,9 @@ The `<Prompt>` component displays an AI prompt with a description, icon, and act
   iconType="solid"
   actions={["copy", "claude"]}
 >
-Create and publish a new docs site by following these instructions: https://buildwithfern.com/learn/docs/getting-started/quickstart.md
+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>
 ```
 
@@ -46,7 +52,7 @@ When only the `copy` action is specified (or no actions are provided), the compo
     icon="rocket"
     iconType="solid"
   >
-  Generate a TypeScript SDK from my OpenAPI spec by following these instructions: https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md
+  Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart).
   </Prompt>
   </div>
 </div>
@@ -57,7 +63,7 @@ When only the `copy` action is specified (or no actions are provided), the compo
   icon="rocket"
   iconType="solid"
 >
-Generate a TypeScript SDK from my OpenAPI spec by following these instructions: https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md
+Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart).
 </Prompt>
 ```
 
@@ -73,7 +79,7 @@ When one open-in action is specified alongside `copy`, the component shows both
     iconType="solid"
     actions={["copy", "cursor"]}
   >
-  Generate a TypeScript SDK from my OpenAPI spec by following these instructions: https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md
+  Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart).
   </Prompt>
   </div>
 </div>
@@ -85,7 +91,7 @@ When one open-in action is specified alongside `copy`, the component shows both
   iconType="solid"
   actions={["copy", "cursor"]}
 >
-Generate a TypeScript SDK from my OpenAPI spec by following these instructions: https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md
+Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart).
 </Prompt>
 ```
 
@@ -101,7 +107,7 @@ When multiple open-in actions are specified, they collapse into a dropdown menu
     iconType="solid"
     actions={["copy", "cursor", "claude", "chatgpt"]}
   >
-  Generate a TypeScript SDK from my OpenAPI spec by following these instructions: https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md
+  Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart).
   </Prompt>
   </div>
 </div>
@@ -113,10 +119,27 @@ When multiple open-in actions are specified, they collapse into a dropdown menu
   iconType="solid"
   actions={["copy", "cursor", "claude", "chatgpt"]}
 >
-Generate a TypeScript SDK from my OpenAPI spec by following these instructions: https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md
+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">
@@ -135,6 +158,6 @@ Generate a TypeScript SDK from my OpenAPI spec by following these instructions:
   The action buttons to display. Available options: `copy`, `cursor`, `claude`, `chatgpt`.
 </ParamField>
 
-<ParamField path="children" type="string | ReactNode" required={true}>
-  The prompt text. This content is copied to the clipboard when the user clicks "Copy prompt" or sent to the selected AI tool.
+<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>

From 1cdb5720bdb5bb770056cf2d036e4167f6c886c8 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 21 Apr 2026 16:15:04 +0000
Subject: [PATCH 4/4] docs: update Prompt component docs for new visual design
 with title prop

Co-Authored-By: Kapil Gowru <k.gowru@gmail.com>
---
 .../default-components/prompt.mdx             | 106 ++++--------------
 1 file changed, 20 insertions(+), 86 deletions(-)

diff --git a/fern/products/docs/pages/component-library/default-components/prompt.mdx b/fern/products/docs/pages/component-library/default-components/prompt.mdx
index 48f127a14..b63504de4 100644
--- a/fern/products/docs/pages/component-library/default-components/prompt.mdx
+++ b/fern/products/docs/pages/component-library/default-components/prompt.mdx
@@ -5,33 +5,16 @@ description: Display a copyable prompt with optional open-in actions for AI tool
 
 <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.
+The `<Prompt>` component displays an AI prompt card with a title, 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 quickly copy the instructions or open them directly in 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"]}
+  title="Create a docs site"
+  actions={["copy", "cursor", "claude"]}
 >
 You are a **docs setup assistant**. Help the user create and publish a new docs site.
 
@@ -39,56 +22,30 @@ Follow the [Quickstart guide](https://buildwithfern.com/learn/docs/getting-start
 </Prompt>
 ```
 
-## Variants
+The component renders:
+- A **title** at the top left
+- **Action buttons** at the top right (first action as primary button, others in a dropdown)
+- A **prompt preview bar** below with a `>` chevron, the prompt text truncated to one line, and a copy button
 
-### Copy only
+## Variants
 
-When only the `copy` action is specified (or no actions are provided), the component displays a single "Copy prompt" button.
+### Copy only (default)
 
-<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>
+When no `actions` prop is provided (defaults to `["copy"]`), only the copy button in the prompt preview bar is shown — no "Open in" button appears.
 
 ```jsx Markdown
-<Prompt
-  description="Generate a **TypeScript SDK**."
-  icon="rocket"
-  iconType="solid"
->
+<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).
 </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>
+When one open-in action is specified alongside `copy`, a single "Open in" button appears in the top right.
 
 ```jsx Markdown
 <Prompt
-  description="Generate a **TypeScript SDK** in Cursor."
-  icon="rocket"
-  iconType="solid"
+  title="Generate a TypeScript SDK"
   actions={["copy", "cursor"]}
 >
 Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart).
@@ -97,26 +54,11 @@ Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quick
 
 ### 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>
+When multiple open-in actions are specified, the first one becomes the primary button and the rest are accessible via a dropdown arrow.
 
 ```jsx Markdown
 <Prompt
-  description="Generate a **TypeScript SDK** with your tool of choice."
-  icon="rocket"
-  iconType="solid"
+  title="Generate a TypeScript SDK"
   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).
@@ -130,7 +72,7 @@ The `<Prompt>` component automatically preserves the **original markdown** of it
 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"]}>
+<Prompt title="Writing assistant" actions={["copy", "cursor"]}>
 You are a **technical writing assistant**.
 
 - Use second-person voice ("you") and active verbs.
@@ -142,22 +84,14 @@ 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 path="title" type="string">
+  A title displayed at the top left of the prompt card.
 </ParamField>
 
 <ParamField path="actions" type="string[]" default='["copy"]'>
-  The action buttons to display. Available options: `copy`, `cursor`, `claude`, `chatgpt`.
+  The action buttons to display. Available options: `copy`, `cursor`, `claude`, `chatgpt`. The `copy` action controls the copy button in the prompt preview bar. Open-in actions (`cursor`, `claude`, `chatgpt`) appear as buttons in the top right — the first one is the primary button, and any additional ones are accessible via a dropdown.
 </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.).
+  The prompt text in markdown. This content is shown as a single-line preview, copied to the clipboard, or sent to the selected AI tool with its original markdown formatting preserved (bold, italic, links, lists, etc.).
 </ParamField>