|
1 | 1 | --- |
2 | 2 | title: Prompt |
3 | | -description: Display a copyable prompt with optional open-in actions for AI tools like Cursor, Claude, and ChatGPT. |
| 3 | +description: Display a copyable prompt with optional open-in actions for AI tools like Cursor, Claude, ChatGPT, or any custom URL. |
4 | 4 | --- |
5 | 5 |
|
6 | | -The `<Prompt>` component displays an AI prompt card with an icon, a multi-line prompt preview, a copy button, and optional "Open in" action buttons for AI tools. Add it to any page so readers can copy the instructions or open them directly in Cursor, Claude, or ChatGPT. |
| 6 | +The `<Prompt>` component displays an AI prompt card with an icon, a multi-line prompt preview, a copy button, and optional action buttons for AI tools. Add it to any page so readers can copy the instructions or open them directly in Cursor, Claude, ChatGPT, or any custom URL you define. |
7 | 7 |
|
8 | 8 | Use it in tutorials, quickstarts, migration guides, or any page where you want readers to hand off a task to an AI assistant — for example, scaffolding a project, generating an SDK, or applying a code change. |
9 | 9 |
|
@@ -99,6 +99,38 @@ Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quick |
99 | 99 | </Prompt> |
100 | 100 | ``` |
101 | 101 |
|
| 102 | +### With a custom URL action |
| 103 | +
|
| 104 | +Beyond the `cursor`, `claude`, and `chatgpt` shorthands, you can pass a custom action object to point at any AI tool. The `label` is rendered verbatim (no `Open in` prefix), and the `url` accepts an optional `{prompt}` placeholder that's replaced with the URL-encoded prompt body. If you omit `{prompt}`, the prompt is appended as a `prompt` query parameter. Custom URLs must use `http` or `https`. The optional `icon` accepts a [Font Awesome icon](/learn/docs/writing-content/components/icons) name or image URL and falls back to a sparkle icon when omitted. |
| 105 | +
|
| 106 | +Custom and built-in actions can be mixed in the same `actions` array. |
| 107 | +
|
| 108 | +<div className="highlight-frame"> |
| 109 | + <div className="highlight-frame-content"> |
| 110 | + <Prompt |
| 111 | + title="Identify a houseplant" |
| 112 | + actions={[ |
| 113 | + "cursor", |
| 114 | + { label: "Open in Plant ID", url: "https://example.com/plant-id?q={prompt}", icon: "leaf" } |
| 115 | + ]} |
| 116 | + > |
| 117 | + Given a photo of a houseplant, identify the species and list its top three care requirements (light, water, humidity). |
| 118 | + </Prompt> |
| 119 | + </div> |
| 120 | +</div> |
| 121 | +
|
| 122 | +```jsx Markdown |
| 123 | +<Prompt |
| 124 | + title="Identify a houseplant" |
| 125 | + actions={[ |
| 126 | + "cursor", |
| 127 | + { label: "Open in Plant ID", url: "https://example.com/plant-id?q={prompt}", icon: "leaf" } |
| 128 | + ]} |
| 129 | +> |
| 130 | +Given a photo of a houseplant, identify the species and list its top three care requirements (light, water, humidity). |
| 131 | +</Prompt> |
| 132 | +``` |
| 133 | +
|
102 | 134 | ### With a custom icon |
103 | 135 |
|
104 | 136 | Set the `icon` prop to a Font Awesome icon name or image URL. |
@@ -189,9 +221,20 @@ Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quick |
189 | 221 | A [Font Awesome icon](/learn/docs/writing-content/components/icons) name or image URL displayed to the left of the prompt text. Defaults to a sparkle icon when omitted. |
190 | 222 | </ParamField> |
191 | 223 |
|
192 | | -<ParamField path="actions" type="string[]" default="[]"> |
193 | | - The "Open in" action buttons to display. Available values: `cursor`, `claude`, `chatgpt`. The first action renders as the primary button. Additional actions are accessible via a dropdown. The copy button is always present regardless of this prop. |
| 224 | +<ParamField path="actions" type="(string | object)[]" default="[]"> |
| 225 | + The action buttons to display. Each entry is either a built-in shorthand (`cursor`, `claude`, or `chatgpt`) or a custom action object with `label`, `url`, and optional `icon` fields. The first action renders as the primary button; additional actions are accessible via a dropdown. The copy button is always present regardless of this prop. |
194 | 226 | </ParamField> |
| 227 | +<Indent> |
| 228 | + <ParamField path="label" type="string" required={true}> |
| 229 | + The button text for a custom action. Rendered verbatim — no `Open in` prefix is added. |
| 230 | + </ParamField> |
| 231 | + <ParamField path="url" type="string" required={true}> |
| 232 | + The destination URL of a custom action. Use `{prompt}` as a placeholder for the URL-encoded prompt body. If omitted, the prompt is appended as a `prompt` query parameter. Only `http` and `https` URLs are supported. |
| 233 | + </ParamField> |
| 234 | + <ParamField path="icon" type="string"> |
| 235 | + A [Font Awesome icon](/learn/docs/writing-content/components/icons) name or image URL displayed in the custom action button. Defaults to a sparkle icon when omitted. |
| 236 | + </ParamField> |
| 237 | +</Indent> |
195 | 238 |
|
196 | 239 | <ParamField path="hidePrompt" type="boolean" default={false}> |
197 | 240 | Hide the prompt body chip. Only the title row with copy and open-in actions is shown. Requires `title` to be set. |
|
0 commit comments