docs: add Prompt component page and changelog entry #4863
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| --- | ||
| 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 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. | ||
|
Contributor
There was a problem hiding this comment. 📝 [vale] reported by reviewdog 🐶 |
||
|
|
||
| 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 | ||
| <Prompt | ||
| 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. | ||
|
|
||
| Follow the [Quickstart guide](https://buildwithfern.com/learn/docs/getting-started/quickstart) step by step. | ||
| </Prompt> | ||
| ``` | ||
|
|
||
| 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 | ||
| <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`, a single "Open in" button appears in the top right. | ||
|
|
||
| ```jsx Markdown | ||
| <Prompt | ||
| 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). | ||
| </Prompt> | ||
| ``` | ||
|
|
||
| ### 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 | ||
| <Prompt | ||
| 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). | ||
| </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 title="Writing assistant" 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="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 `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 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> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🔴 New changelog page missing required agent directive snippet
The new
fern/products/docs/pages/changelog/2026-03-26.mdxfile is missing the mandatory<Markdown src="/snippets/agent-directive.mdx"/>line. PerAGENTS.md, every new.mdxpage created underfern/products/must include this directive after the closing---of the front matter.Was this helpful? React with 👍 or 👎 to provide feedback.