Usage
<Prompt> is the visual hook for NookDocs' LLM-first authoring story. It renders an AI prompt block with a copy button and one-click deep links to popular LLM platforms and IDEs.
<Prompt
title="Scaffold a docs site"
description="Paste this into Cursor with NookDocs MCP installed"
targets={["cursor", "claude", "chatgpt"]}
>
Create a NookDocs site for a REST API. Use the component library
(Callout, Card, CodeGroup, Steps, ParamField, ResponseField).
Include an introduction, quickstart, and 3 endpoint pages.
</Prompt>Scaffold a docs site
Paste this into Cursor with NookDocs MCP installed
Create a NookDocs site for a REST API. Use the component library (Callout, Card, CodeGroup, Steps, ParamField, ResponseField). Include an introduction, quickstart, and 3 endpoint pages.
Why this exists
Most documentation platforms expect you to write content by hand. NookDocs assumes the reader will often hand the page off to an LLM — to extend it, debug it, or generate a companion. The Prompt component is the lightweight version of that handoff: a ready-to-use AI prompt the reader can copy or open in their tool of choice with a single click.
In Phase 3 the platform ships an MCP server that lets LLMs query the component library directly. Until then, Prompt is the bridge — it preloads the LLM with enough context to write valid NookDocs MDX without any tool integration.
Without metadata
The title and description props are optional. A bare prompt body still works:
<Prompt>
Convert this OpenAPI spec to a NookDocs API reference page using
the ParamField, ResponseField, and CodeGroup components.
</Prompt>Convert this OpenAPI spec to a NookDocs API reference page using the ParamField, ResponseField, and CodeGroup components.
Target platforms
The targets prop controls which deep-link buttons appear. Default is ["cursor", "claude", "chatgpt"].
| Target | Platform | Deep link protocol |
cursor | Cursor IDE | cursor:// |
claude | Claude.ai | https://claude.ai/new?q=... |
chatgpt | ChatGPT | https://chat.openai.com/?q=... |
windsurf | Codeium Windsurf | windsurf://chat?prompt=... |
vscode | VS Code + Copilot Chat | vscode://github.copilot-chat/... |
perplexity | Perplexity | https://www.perplexity.ai/?q=... |
<Prompt targets={["cursor", "claude", "chatgpt", "windsurf", "vscode", "perplexity"]}>
Improve this documentation page for clarity and SEO.
</Prompt>How copy + deep link work
The component walks the children tree and concatenates all text content into a single string. That string is what:
Copy button writes to the system clipboard
Open-in-X buttons URL-encode and append as a query parameter to the platform's deep link
So inline formatting in the children (markdown bold, links, etc.) is rendered visually inside the prompt body, but only the plain text ships to the LLM.
Use cases
Workflow templates
"Generate a complete API reference for my OpenAPI spec." Reader clicks Cursor, gets a working starter file.
Improve this page
Page-level prompt at the bottom: "Suggest improvements to this page using the NookDocs component library."
Code generation
"Implement a NookDocs component called <Foo> that does X." Drops the LLM into the right context.
Migration help
"Convert this Mintlify MDX file to NookDocs format." Pre-fills with the source the reader wants to migrate.
Phase 3 forward reference
When the LLM-first authoring phase ships, the Prompt component will gain three more capabilities:
MCP-aware prompts — automatically include
npx nookdocs-mcp installinstructions for IDEs that support itComponent spec injection — the prompt body can reference
{components}and the platform inlines the full library spec on copyPage context auto-include —
<Prompt usePageContext>automatically appends the current page's MDX source to the prompt so the LLM sees the surrounding content
The current API stays — Phase 3 only adds. No breaking changes.
Actions prop (Mintlify compat)
The actions prop is an alias for targets. If you're migrating from Mintlify, existing markup that uses actions works without changes:
<Prompt actions={["cursor", "claude"]}>
Refactor this component to use server actions.
</Prompt>If both actions and targets are set, targets takes priority.
Props
| Prop | Type | Default | Description |
title | string | — | Bold heading shown above the prompt body |
description | string | — | One-line description shown under the title |
icon | string | — | Icon beside the title, replacing the default sparkle |
iconType | string | — | Font Awesome style, when the icon comes from that library |
targets | ("cursor" | "claude" | "chatgpt" | "windsurf" | "vscode" | "perplexity")[] | ["cursor", "claude", "chatgpt"] | Which deep-link buttons to render |
actions | ("cursor" | "claude" | "chatgpt" | "windsurf" | "vscode" | "perplexity")[] | — | Alias for targets (Mintlify compat) |
children | ReactNode | required | The prompt body — can include markdown formatting |