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..48f127a14 --- /dev/null +++ b/fern/products/docs/pages/component-library/default-components/prompt.mdx @@ -0,0 +1,163 @@ +--- +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 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 + +
+
+ + 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. + +``` + +## Variants + +### Copy only + +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. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart). + +
+
+ +```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`, the component shows both a "Copy prompt" button and an "Open in" button. + +
+
+ + Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart). + +
+
+ +```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, they collapse into a dropdown menu labeled "Open in..." with options for each tool. + +
+
+ + Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quickstart](https://buildwithfern.com/learn/sdks/generators/typescript/quickstart). + +
+
+ +```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 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 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.). +