Prompt

Usage

<Prompt> is the visual hook for CodivDocs' 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 CodivDocs MCP installed"
  targets={["cursor", "claude", "chatgpt"]}
>
  Create a CodivDocs site for a REST API. Use the component library
  (Callout, Card, CodeGroup, Steps, ParamField, ResponseField).
  Include an introduction, quickstart, and 3 endpoint pages.
</Prompt>

Why this exists

Most documentation platforms expect you to write content by hand. CodivDocs 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 CodivDocs 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 CodivDocs API reference page using
  the ParamField, ResponseField, and CodeGroup components.
</Prompt>

Target platforms

The targets prop controls which deep-link buttons appear. Default is ["cursor", "claude", "chatgpt"].

<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:

1. Copy button writes to the system clipboard

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

Phase 3 forward reference

When the LLM-first authoring phase ships, the Prompt component will gain three more capabilities:

1. MCP-aware prompts — automatically include npx codivdocs-mcp install instructions for IDEs that support it

2. Component spec injection — the prompt body can reference {components} and the platform inlines the full library spec on copy

3. Page 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.

Props