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..ee3a295a9 --- /dev/null +++ b/fern/products/docs/pages/changelog/2026-03-26.mdx @@ -0,0 +1,39 @@ +--- +tags: ["components", "ai"] +--- + +## Prompt component + +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. + +
+
+ + 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. + +
+
+ +```jsx Markdown + +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 new file mode 100644 index 000000000..b63504de4 --- /dev/null +++ b/fern/products/docs/pages/component-library/default-components/prompt.mdx @@ -0,0 +1,97 @@ +--- +title: Prompt +description: Display a copyable prompt with optional open-in actions for AI tools like Cursor, Claude, and ChatGPT. +--- + + + +The `` 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 + +```jsx Markdown + +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. + +``` + +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 + +## Variants + +### Copy only (default) + +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 + +Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart). + +``` + +### Single open-in action + +When one open-in action is specified alongside `copy`, a single "Open in" button appears in the top right. + +```jsx Markdown + +Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart). + +``` + +### Multiple open-in actions + +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 + +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 + + + A title displayed at the top left of the prompt card. + + + + 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. + + + + 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.). +