Prompt, disclosure, and views
Use Mintlify-style prompt blocks, accordions, expandables, views, and visibility controls for progressive docs and agent-aware content.
Use this family when the docs should teach progressively. Prompt blocks give agents and developers a copyable instruction. Disclosure components hide optional detail until needed. View and visibility controls let the same page support human readers and agent contexts.
Progressive docs
Start with the shortest successful path, then reveal caveats, alternatives, and agent context as the reader needs them.
Prompt
Use Prompt for copyable agent instructions. Keep prompts concrete: name the product primitive, expected files, constraints, and verification step.
Generate an offer checkout button
Copy this into an agent when adding Plandalf to an existing site.
Create a Plandalf checkout button for an existing sales page.
- Use the browser SDK.
- Open offer
offer_123in a modal. - Listen for checkout completion.
- Do not expose private API keys in browser code.
- Link the docs page that explains Offers.
<Prompt title="Generate an offer checkout button" actions={["copy", "cursor"]}>
Create a Plandalf checkout button for an existing sales page.
- Use the browser SDK.
- Open offer `offer_123` in a modal.
- Do not expose private API keys in browser code.
</Prompt>
Accordions and expandables
Use accordions for grouped optional questions. Use Expandable for one local detail, especially nested API fields or implementation caveats.
When should this be an accordion?
Use an accordion when the reader may need the answer but should not be forced through it on the first pass.
When should this stay in the article?
If the detail changes the required path, keep it visible in the main flow.
<AccordionGroup>
<Accordion title="When should this be an accordion?" icon="list-tree">
Use an accordion when the reader may need the answer but should not be forced through it.
</Accordion>
</AccordionGroup>
<Expandable title="Nested object example">
`purchase.customer.email` is useful for fulfilment and CRM syncs.
</Expandable>
Views
Use adjacent View blocks when the same concept has different human, JavaScript, React, or agent presentations. The renderer turns adjacent views into a switcher.
Start by creating one test offer and connecting one visible checkout button. Keep the page focused on the sale the buyer is trying to complete.
Load the browser SDK, call openOffer, and handle completion from the returned flow handle.
Prefer the simplest working implementation first. Link to /docs/offers/overview when explaining what an offer contains.
<View title="Human" icon="user">
Start by creating one test offer and connecting one visible checkout button.
</View>
<View title="JavaScript" icon="js">
Load the browser SDK and call `openOffer`.
</View>
<View title="Agent" icon="sparkles">
Prefer the simplest working implementation first.
</View>
Visibility
Use Visibility when content should exist in source for a specific audience. Human-visible content renders on the public docs page. Agent-only content stays out of the human page.
This sentence is visible to readers and keeps the page understandable in the browser.
<Visibility for="humans">
This sentence is visible to readers.
</Visibility>
<Visibility for="agents">
Agent note: verify implementation claims before publishing.
</Visibility>
Prompt properties
titlestringOptional heading above the prompt body.
descriptionstringShort context line shown before the prompt text.
actionsarraydefault: ["copy"]Supported prompt actions. Use ["copy", "cursor"] when the prompt should support both clipboard and Cursor handoff.
iconstringIcon shown beside the prompt title.
copyLabelstringdefault: Copy promptAccessible label for the copy action.
cursorLabelstringdefault: Open in CursorAccessible label for the Cursor handoff action.
Disclosure properties
AccordionGroup.childrenAccordion[]requiredGroup related accordions so optional detail reads as one section, not scattered toggles.
Accordion.titlestringrequiredVisible accordion heading.
Accordion.iconstringIcon shown beside the accordion title.
Accordion.defaultOpenbooleandefault: falseOpens the accordion on first load. Use sparingly for a detail that should be visible immediately.
Expandable.titlestringLabel for one inline reveal.
Expandable.defaultOpenbooleandefault: falseOpens the inline detail by default.
View and visibility properties
View.titlestringrequiredLabel shown in the generated view switcher.
View.iconstringIcon shown beside the view title.
View.whenalways | human | agentdefault: alwaysControls whether the view is available in human or agent contexts.
View.forhumans | agents | human | agentCompatibility alias for targeted views.
Visibility.forhumans | agentsrequiredUse humans for visible reader text and agents for source-only agent context.
Visibility.modevisible | hidden | human | agentdefault: visibleCompatibility mode for imported MDX that uses visibility labels instead of for.