Documentation

Build once. Stay live.

Platform stores your design system as a JSON token document per project. You author it visually, share it with teammates, and read it from AI tools through the built-in MCP server — with no export step in between.

How it works

Platform has one core idea: your tokens live in one place, and everything else reads from it. The loop looks like this.

1. Create a project. Each project is a single JSON token document. New projects start from a small default palette you can replace immediately.
2. Author your tokens. Organize them into groups — color, typography, spacing, radius, shadow, or anything your team invents. Color values render a live swatch as you type.
3. Share the project. Invite teammates by email. Shared projects show up in their workspace and they can edit alongside you.
4. Consume the tokens anywhere. Export JSON, copy CSS custom properties, call the REST API, or connect an AI coding agent over MCP. All four read the same document, so nothing drifts.

Everything is scoped to your account. You always see the projects you own plus the ones shared with you, and never anything else.

Projects & tokens

A project holds token groups — color, typography, spacing, radius, shadow, or any group you add. Each group is an array of tokens:

A token has a name, a value, and an optional description. Values are free-form strings, so a token can hold a hex color, a length, a font stack, or a full shadow definition.

The editor

The workspace has three panes: token groups on the left, the tokens in the selected group in the middle, and the AI agent on the right.

• Add a group with + New group in the left sidebar.
• Add a token with + Add token below the list.
• Save with the Save button or Cmd/Ctrl + S. A dot beside the project name marks unsaved changes.
• Export JSON downloads the raw token document.
• Copy CSS puts the whole set on your clipboard as custom properties, named --group-token:

Sharing with your team

Open a project and use Share to invite a teammate by the email they registered with. Shared projects appear in their workspace with a shared badge, and both of you can edit tokens. Deleting and re-sharing stay with the owner.

AI agent

The right-hand panel is an assistant that knows your current tokens. Ask it to build a palette, extend a type scale, or check a set for gaps. When it proposes changes it returns a complete token document with an Apply to project button — one click loads it into the editor, where you can review before saving.

Use the Agent button in the toolbar to hide or show the panel; your conversation is kept either way. The agent requires OPENAI_API_KEY on the server, and tells you if it isn't configured.

MCP server

Platform exposes a Model Context Protocol server at https://platformdesign.app/mcp over Streamable HTTP. Any MCP client can connect and read your design tokens as live context, so the agent writing your components uses your real values instead of guessing.

It is a remote HTTP server, not a local one: there is nothing to install, and no npx or npm package in the loop. A client needs only the URL above and your access token.

1. Get your access token

Open the app and click Copy MCP token in the top bar. That copies the same JWT the API uses. You can also get one from the command line:

Tokens expire after 72 hours. When a client starts returning authorization errors, copy a fresh one.

2. Connect a client

Claude Code — add the server from your terminal:

Cursor, Claude Desktop, or any client using a JSON config — add an entry under mcpServers:

Restart the client after editing its configuration. If you are running Platform yourself, substitute your own host — locally that is http://localhost:8080/mcp.

A few older clients only speak the local stdio transport and cannot connect to a remote server directly. Those need a stdio-to-HTTP bridge such as mcp-remote; every current client listed above connects natively.

3. Available tools

• list_projects — every project you own or that is shared with you, with its id, name, description and last update.
• get_design_tokens — the full token document for one project. Takes project_id, which you get from list_projects.

4. Verify the connection

In Claude Code, run /mcp to confirm platform is connected. Then ask the agent something that needs your tokens — "what are my color tokens?" — and it should call the tools and answer with real values. You can also check the endpoint directly:

A 401 means the token is missing or expired. A successful call returns the two tools above.

5. Sync your tokens

MCP doesn't push updates — a connected client only reads your tokens when you ask it to. There's no background sync and no ID to remember: just refer to your project by the name shown in the app, and the agent looks up its id for you.

Re-run this any time your tokens change on Platform — nothing updates your code automatically. If you have two projects with the same name, the agent will ask which one you mean.

REST API

Every endpoint takes an Authorization: Bearer <token> header, using the same token as MCP.

• POST /api/account/register — {name, email, password}
• POST /api/account/authenticate — {email, password}
• GET /api/projects — list your projects (owned + shared)
• POST /api/projects — create {name, description, tokens}
• GET /api/projects/{id} — read one project
• PUT /api/projects/{id} — update {name, description, tokens}
• DELETE /api/projects/{id} — delete (owner only)
• POST /api/projects/{id}/share — share {email} (owner only)

Self-hosting

Platform is self-hostable and ships with everything needed to run it yourself. See the repository README for the current setup steps. The server needs DATABASE_URL and JWT_SECRET, plus OPENAI_API_KEY if you want the agent sidebar.