The zeroheight MCP server can create and edit pages in your design system. An AI agent connected to zeroheight — Claude Code, Claude Desktop, Cursor, VS Code, or any other MCP client — can assemble or edit a documentation page from the context it already has (e.g. your codebase, Figma files, other MCP servers) and save it straight into a styleguide.

This guide covers what you need to get set up, how a write session works in practice, the tools involved, and the current limitations.

Setting up

In order to be able to create pages in your styleguide, you will need to be connected via MCP via login as a zeroheight user with admin/editor permissions. If you don't see the write tools — ensure a team admin has turned on write access under Your organization → Model Context Protocol (MCP). If you're already connected via MCP via login, you might need to re-authenticate in order to access the new tools.

Viewers connecting via MCP via login, and anyone connecting via MCP via link or via the local MCP with API keys, cannot create or edit pages. If you connect without write access you'll simply see the read tools.

Once connected with write permissions, the MCP adds a format option to get-page that returns a page in editor format, plus new tools that are required to create rich pages.

Creating/editing pages

The write follows the same five steps every time. You don't have to spell them out — an agent can work this out from the tool descriptions — but knowing the shape makes it much easier to steer and to debug.

1. Choosing to either create or edit a page

Your agent calls list-pages and/or search-pages to establish what's already available in the styleguide. It reads the styleguide's navigation tree and picks a category ID for the new page, or the page ID of an existing page to edit. Pages can only be created in the current work-in-progress release, so the agent must use IDs from list-pages called without a release ID.

If no suitable category exists, the agent can create one. It calls get-structure to read the styleguide's categories and navigation tabs, then update-structure to add, rename, nest or reorder them. Once a page exists, update-page-metadata can rename it, hide or show it, move it to another category, or reorder it, without touching its content.

Prompt example:

Look at my Foundations category in the Acme design system and tell me where a new page about elevation should go. If there isn't a good fit, suggest a new category.

2. Read the content format guide

Page content is written in zeroheight's editor XML format. Rather than guessing it, your agent fetches the zeroheight://editor-instructions MCP resource, which documents every supported element. The same resource also lists the styleguide's live code templates, which the agent reads before writing a code or live code block. Clients that can't read MCP resources directly (for example, the Claude desktop app) can reach the same guide through the read-resource tool.

3. Gather the references the page needs

Any references to external sources (e.g. Figma, Storybook etc) need to point to IDs in zeroheight before the page can be saved and these IDs can be fetched by the agent using:

• upload-asset for images and downloadable file attachments
• list-design-libraries then get-designs to embed Figma designs, or images for a do's & don'ts block
• list-repositories, get-repository, then create-markdown-snapshot to embed a markdown file from a connected git repository
• list-component-sets and get-component-set for component data tables
• list-token-sets and list-tokens for token mentions and token tables
• get-storybooks and get-stories for Storybook embeds
• get-livecode-settings before writing a livecode block that imports a package

If your Figma or git connection has lapsed, these tools still list existing items, but the agent can't read repository files or add designs to a page until you re-authorise. The tool response says so explicitly and returns a re-authorisation link — follow it, then ask your agent to try again.

4. Create or edit the page

Before writing any prose, your agent reads the styleguide's tone of voice with get-tone-of-voice. If you've set one in the styleguide's AI settings, everything it writes follows it, including edits to existing pages. Learn more about tone of voice.

When creating a new page, the agent can start from a template using list-page-templates and get-page-template. This includes zeroheight's built-in page templates as well as any custom templates your team has created. Templates contain placeholder slots for page-specific content, such as a design or a Storybook story, which the agent fills in or removes before saving. Learn more about page templates.

Your agent then calls create-page with the category, a page name and the content. On plans that include drafts, the page is created as a draft by default: viewers can't see it until the draft is merged in zeroheight. If you want the page live straight away, tell your agent so explicitly — it only skips the draft when you ask. It can also create the page hidden from viewers, which is a good default when you want to review before anyone sees it.

To change an existing page, the agent first re-reads it in editor format and then calls edit-page with targeted find-and-replace changes rather than rewriting the whole page. Edits are saved to a draft by default, so the published page is untouched until the draft is merged. As with create-page, you can ask your agent to write straight to the published page instead — it won't do so unless you ask, and it can't while the page already has an open draft.

Drafts are available on Professional and Enterprise plans. On Free and Starter, where drafts aren't available, your agent doesn't offer them: both new pages and edits are written straight to the published page, and there's nothing extra you need to ask for.

Both tools return the page's URL — ask your agent to share it.

5. Verify and finish up

Your agent can read the page back with get-page to confirm the content landed as intended. Then take it the rest of the way, either in zeroheight or by asking your agent:

• If you use releases, the page sits in the work-in-progress release until you create a release.
• If the work went into a draft, review and merge it — either in the app, or by asking your agent (see below).
• If you created the page hidden, unhide it when you're happy with it, either in the app or by asking your agent to use update-page-metadata.

Your agent can also merge a draft for you, without you leaving the conversation. get-draft-changes shows what merging would actually do — a diff of the draft against the published page, any name or status changes, who else has edited the draft, and whether a review has been requested — and merge-draft merges it. Ask to see the changes, check them, then ask your agent to merge. Anything a colleague added to the same draft goes live too, so your agent will tell you who else has edited it. These two tools are only available on plans that include drafts.

Review feedback can flow back into the agent too. Comments left on the page in zeroheight, whether on highlighted text or on a whole block, are readable with get-comments, so you can ask your agent to work through the open threads and apply the requested changes with edit-page. Comments are read-only over MCP: the agent can't reply to or resolve them, so do that in the app once you're satisfied.

What you can put on a page

Write mode supports the current zeroheight block types, so an agent can build essentially the same page you could build in the editor: text and headings, a page intro, tables, lists and task lists, callouts, blockquotes, toggles, columns, dividers, code blocks and live code, images and attachments, external embeds, design uploads, do's & don'ts, component sets, token mentions and token tables, markdown from a connected repository, Storybook embeds, status tables, release notes, shortcut tiles, and both block-level and page-level tabs.

Accuracy on references depends on your prompt and on how your libraries are named, in the same way it does for a person: an agent asked to "embed the primary button" will pick well from a tidy Figma library and less well from an ambiguous one. Being specific — naming the file, the frame, or the token set — makes a large difference.