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/3] docs: add Prompt component page and changelog entry Co-Authored-By: Kapil Gowru --- 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 [``](/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 + +You are a technical writing assistant. Write documentation that is clear, accurate, and concise. + +``` 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. +--- + + + +The `` 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 + +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. + +``` + +## 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 + +Summarize the care instructions for this plant species. Include watering frequency, sunlight requirements, and soil preferences. + +``` + +### 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 + +Review this API endpoint documentation for completeness. Check that all parameters are documented, error responses are listed, and examples are provided. + +``` + +### 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 + +Draft a taxonomy entry for a new plant species. Include the scientific name, common name, family, native habitat, and distinguishing characteristics. + +``` + +## Properties + + + A short description displayed next to the icon. Supports basic markdown formatting: `**bold**` and `*italic*`. + + + + 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. + + + + The Font Awesome style for the icon (e.g., `solid`, `regular`, `light`, `duotone`). Only applies when `icon` is a Font Awesome icon name. + + + + The action buttons to display. Available options: `copy`, `cursor`, `claude`, `chatgpt`. + + + + The prompt text. This content is copied to the clipboard when the user clicks "Copy prompt" or sent to the selected AI tool. + From d644d35a207d397f0a6b8488addd2c5baf98d055 Mon Sep 17 00:00:00 2001 From: Devin Logan Date: Fri, 10 Apr 2026 13:46:40 -0400 Subject: [PATCH 2/3] 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 [``](/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 [``](/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. +
+
+ + Create and publish a new docs site by following these instructions: https://buildwithfern.com/learn/docs/getting-started/quickstart.md + +
+
```jsx Markdown -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 ``` + + 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 -The `` 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 `` 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 +
+
+ + Create and publish a new docs site by following these instructions: https://buildwithfern.com/learn/docs/getting-started/quickstart.md + +
+
+ ```jsx Markdown -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 ``` @@ -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. +
+
+ + Generate a TypeScript SDK from my OpenAPI spec by following these instructions: https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md + +
+
+ ```jsx Markdown -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 ``` @@ -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. +
+
+ + Generate a TypeScript SDK from my OpenAPI spec by following these instructions: https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md + +
+
+ ```jsx Markdown -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 ``` @@ -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. +
+
+ + Generate a TypeScript SDK from my OpenAPI spec by following these instructions: https://buildwithfern.com/learn/sdks/generators/typescript/quickstart.md + +
+
+ ```jsx Markdown -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 ``` 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/3] docs: update Prompt page for markdown preservation and remark plugin changes Co-Authored-By: Kapil Gowru --- .../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 [``](/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. +
`](/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.
@@ -26,7 +30,9 @@ The new [``](/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. ``` 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 `` 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
@@ -17,7 +19,9 @@ The `` 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.
@@ -29,7 +33,9 @@ The `` 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. ``` @@ -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). @@ -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). ``` @@ -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). @@ -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). ``` @@ -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). @@ -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). + +``` + +## How it works + +The `` 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 + +You are a **technical writing assistant**. + +- Use second-person voice ("you") and active verbs. +- Follow the [style guide](https://example.com/style-guide). ``` +The copied text will include the bold markers, list formatting, and link. + ## Properties @@ -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`. - - The prompt text. This content is copied to the clipboard when the user clicks "Copy prompt" or sent to the selected AI tool. + + 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.).