01plannar

Plans your AI agent writes
that you actually want to read.

Your coding agent already writes plans before it ships features. Plannar gives it an MDX surface — tabs, tradeoff tables, live previews — so the plan is skimmable in a minute instead of a wall of bullets you scroll past.

$npx plannar@latest init
Works with Claude Code, Cursor, Codex, or anything that can write a file.
02A plan, rendered

Pagination for /messages

The exact MDX file the agent wrote is in the next section. Below is what the reviewer sees: a tab per option, a tradeoff table, and a live API preview to click through.

Recommended

Return an opaque cursor with each page; the client passes it back as ?after. Stable under concurrent writes, and the index lookup stays O(log n) at any depth.

Live request
GET /messages?limit=3
{
"items": ["msg_104", "msg_103", "msg_102"],
"next_cursor": "eyJpZCI6Im1zZ18xMDIifQ"
}
Stable under writes
Yes
Deep page cost
O(log n) — index seek
Jump to page N
No — sequential only

Switching tabs swaps the prose, the request, the response, and the tradeoffs in one click — the agent wrote it once, in one MDX file.

03Why Plannar

Built for what agents are already good at

PropertyPlain markdownHand-rolled HTMLPlannar
Skimmable layoutWalls of textYesYes (tabs / cards / accordion)
Interactive previewNoYes, hand-rolledYes, via <Playground>
Tokens to authorCheapExpensive (full page)Cheap (MDX + components)
Easy to reviseEasyHard (one blob)Easy (named components)
Agent re-runsRewrites proseRewrites whole pagePatches MDX in place
Reads like a docYesOne-off webpageYes (Fumadocs chrome)

Agents are great at writing components and structured MDX. Plannar leans into that instead of asking them to format pretty prose.

04How it works
1
Your agent writes the plan

Plannar ships a Claude Code skill (and works with any agent). The agent emits an MDX file with tabs, tradeoff tables, and Playground blocks instead of a flat wall of bullets.

2
You review it in the editor

plannar editor opens a local preview with HMR. Every Playground is live. Highlight any line to leave inline feedback for the agent.

3
Send it back, or export it

Comments turn into a prompt you paste straight back to the agent. When the plan is final, plannar export packages it as a single HTML file to share.

05What you get
01
Inline comments → agent prompt

Highlight any line and leave feedback. Plannar bundles every comment into a single prompt your agent can act on directly — no copy-paste roundtrips.

02
Self-contained exports

plannar export packages a plan — interactivity, state, styles — into one HTML file. Drop it in Slack, attach it to a ticket, no server required.

03
Real components, not screenshots

Plans render with the same shadcn/ui primitives as your app. The agent's mockup and the eventual implementation look the same.

06The source the agent wrote

One MDX file produced the plan above

No hand-wired state, no per-tab component. The agent writes structured MDX; Plannar handles tabs, bindings, and the Playground.

.plannar/plans/messages-pagination.mdx~ 40 lines
mdx

bind="api:cursor" wires the tab state without a single useState. The same pattern works for sliders, selects, and any registered control.

07Get started

Give your agent a better way to plan

$npx plannar@latest init
plannar·v0.1