Skip to content

Commit a824bd9

Browse files
docs: document custom URL actions on Prompt component
Co-Authored-By: Devin Logan <devinannlogan@gmail.com>
1 parent 77a6e38 commit a824bd9

2 files changed

Lines changed: 66 additions & 5 deletions

File tree

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,27 @@
11
---
2-
tags: ["ai"]
2+
tags: ["ai", "components"]
33
---
44

55
## API catalog discovery
66

77
AI agents, MCP clients, and API catalog crawlers can now discover your APIs automatically. Every Fern Docs site exposes a standards-based ([RFC 9727](https://www.rfc-editor.org/rfc/rfc9727)) `/.well-known/api-catalog` endpoint generated from your visible API Reference navigation.
88

99
<Button intent="none" outlined rightIcon="arrow-right" href="/learn/docs/ai-features/api-catalog">Read the docs</Button>
10+
11+
## Custom URL actions on the Prompt component
12+
13+
The `<Prompt>` component's `actions` prop now accepts custom action objects with `label`, `url`, and optional `icon` fields alongside the existing `cursor`, `claude`, and `chatgpt` shorthands. Use `{prompt}` in the URL as a placeholder for the URL-encoded prompt body, or let the prompt be appended as a `prompt` query parameter.
14+
15+
```jsx Markdown
16+
<Prompt
17+
title="Identify a houseplant"
18+
actions={[
19+
"cursor",
20+
{ label: "Open in Plant ID", url: "https://example.com/plant-id?q={prompt}", icon: "leaf" }
21+
]}
22+
>
23+
Given a photo of a houseplant, identify the species and list its top three care requirements (light, water, humidity).
24+
</Prompt>
25+
```
26+
27+
<Button intent="none" outlined rightIcon="arrow-right" href="/learn/docs/writing-content/components/prompt#with-a-custom-url-action">Read the docs</Button>

fern/products/docs/pages/component-library/default-components/prompt.mdx

Lines changed: 47 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
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.
44
---
55

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.
77

88
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.
99

@@ -99,6 +99,38 @@ Generate a TypeScript SDK from my OpenAPI spec. Follow the [TypeScript SDK quick
9999
</Prompt>
100100
```
101101
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+
102134
### With a custom icon
103135
104136
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
189221
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.
190222
</ParamField>
191223
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.
194226
</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>
195238
196239
<ParamField path="hidePrompt" type="boolean" default={false}>
197240
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

Comments
 (0)