# Zeplin — how to use (mcp.ai)

Connect your Zeplin account and use 24 tools for images and design straight from your AI agent. Connect in one click, no API key needed. Zeplin is a design delivery platform that connects designers and developers, enabling access to design resources like projects, screens, components, and assets.

## Option A — via MCP (recommended)
Remote MCP endpoint (HTTP, streamable): `https://api.mcp.ai/p_zeplin?ms=1787293440000`
Add it as a custom/remote MCP connector in your client (Claude, Cursor, VS Code…), then authenticate when prompted. Once connected, ask the agent to use the server's tools (e.g. `zeplin_auth_o_auth_authorize`).

## Option B — via direct REST API
Base URL: `https://api.mcp.ai/api/zeplin`
Auth: `Authorization: Bearer sk_live_…` — create a workspace API key at https://mcp.ai/settings/api-keys
Discover endpoints: `GET https://api.mcp.ai/api/zeplin/_endpoints`

### Endpoints
- `POST https://api.mcp.ai/api/zeplin/auth/o/auth/authorize` — Tool to start OAuth 2.0 authorization code flow for Zeplin apps. Use when initiating user authorization; call before exchanging the code.
  - body: { state?: string, client_id: string, redirect_uri: string, response_type?: string, code_challenge?: string, code_challenge_method?: string }
- `POST https://api.mcp.ai/api/zeplin/connected/components/project/list` — Tool to list connected components in a Zeplin project. Use when you have the project_id and need to retrieve connected components in a specific project.
  - body: { limit?: integer, offset?: integer, project_id: string }
- `POST https://api.mcp.ai/api/zeplin/project/color/update` — Tool to update a color in a Zeplin project. Use when you need to modify RGBA channels or source ID of an existing color after confirming the project and color IDs.
  - body: { a?: number, b?: integer, g?: integer, r?: integer, color_id: string, source_id?: string, project_id: string }
- `POST https://api.mcp.ai/api/zeplin/project/colors/list` — Tool to list colors in a Zeplin project. Use when you need to fetch defined color tokens at the project level after obtaining the project ID.
  - body: { project_id: string, token_type?: string, access_token?: string, authorization?: string }
- `POST https://api.mcp.ai/api/zeplin/project/text/style/update` — Tool to update a text style in a Zeplin project. Use when you need to modify typography settings of an existing text style after confirming the project and text style IDs.
  - body: { data: object, project_id: string, token_type?: string, access_token?: string, authorization?: string, text_style_id: string }
- `POST https://api.mcp.ai/api/zeplin/project/text/styles/list` — Tool to list text styles in a Zeplin project. Use when you need to fetch typography tokens defined at the project level after obtaining the project ID.
  - body: { limit?: integer, offset?: integer, project_id: string, token_type?: string, access_token?: string, authorization?: string }
- `POST https://api.mcp.ai/api/zeplin/projects/get` — Tool to get a Zeplin project by ID. Use when you need detailed info about a specific project after confirming its project_id.
  - body: { project_id: string }
- `POST https://api.mcp.ai/api/zeplin/projects/members/invite` — Tool to invite a user to a Zeplin project. Use when you need to add a member by email or username to a project after obtaining the project ID.
  - body: { role?: string, handle: string, project_id: string }
- `POST https://api.mcp.ai/api/zeplin/screen/annotation/delete` — Tool to delete a screen annotation in Zeplin. Use when you need to remove a specific annotation from a Zeplin screen given its IDs.
  - body: { screen_id: string, annotation_id: string }
- `POST https://api.mcp.ai/api/zeplin/screen/annotation/get` — Tool to fetch a single screen annotation. Use when you know the screen_id and annotation_id and need the detailed annotation data.
  - body: { screen_id: string, annotation_id: string }
- `POST https://api.mcp.ai/api/zeplin/screen/annotations/list` — Tool to list annotations for a Zeplin screen. Use when you have the screen_id and need its annotations.
  - body: { limit?: integer, offset?: integer, screen_id: string }
- `POST https://api.mcp.ai/api/zeplin/screen/annotations/update` — Tool to update a screen annotation's content, position, or type. Use after confirming screen_id and annotation_id.
  - body: { type?: object, content?: string, position?: object, screen_id: string, annotation_id: string }
- `POST https://api.mcp.ai/api/zeplin/screen/components/list` — Tool to list components in a Zeplin screen. Use when you have the screen_id and need to retrieve UI components in a specific screen.
  - body: { limit?: integer, offset?: integer, screen_id: string, include_latest_version?: boolean }
- `POST https://api.mcp.ai/api/zeplin/screen/section/get` — Tool to get a single screen section. Use when you need to fetch detailed information of a screen section by its ID after confirming the project and section IDs.
  - body: { project_id: string, section_id: string }
- `POST https://api.mcp.ai/api/zeplin/screen/sections/list` — Tool to list screen sections in a Zeplin project. Use when you need a paginated list of screen sections after confirming the project ID.
  - body: { limit?: integer, offset?: integer, project_id: string }
- `POST https://api.mcp.ai/api/zeplin/screen/version/get` — Tool to retrieve a specific screen version. Use after specifying both screen_id and version_id when you need detailed snapshot metadata.
  - body: { screen_id: string, version_id: string }
- `POST https://api.mcp.ai/api/zeplin/screen/versions/create` — Tool to create a new version of a screen. Use when uploading a new design snapshot (PNG or JPEG image) as a screen version. Requires a valid project_id, screen_id, and an image file. Optionally includ
  - body: { image: object, screen_id: string, project_id: string, commit_message?: string }
- `POST https://api.mcp.ai/api/zeplin/screen/versions/list` — Tool to list all versions of a screen. Use when you need to enumerate past screen snapshots after obtaining a screen ID.
  - body: { limit?: integer, offset?: integer, screen_id: string }
- `POST https://api.mcp.ai/api/zeplin/styleguide/color/create` — Tool to create a new styleguide color. Use after obtaining the styleguide ID to define custom color tokens.
  - body: { a: number, b: integer, g: integer, r: integer, name: string, token_type?: string, access_token?: string, authorization?: string, styleguide_id: string }
- `POST https://api.mcp.ai/api/zeplin/styleguide/color/update` — Tool to update a color in a Zeplin styleguide. Use after obtaining the styleguide and color IDs.
  - body: { a?: number, b?: integer, g?: integer, r?: integer, name?: string, color_id: string, source_id?: string, token_type?: string, access_token?: string, authorization?: string, styleguide_id: string }
- `POST https://api.mcp.ai/api/zeplin/styleguide/colors/list` — Tool to list colors in a Zeplin styleguide. Use when you need to fetch defined color tokens after obtaining the styleguide ID.
  - body: { token_type?: string, access_token?: string, authorization?: string, styleguide_id: string, linked_project?: string }
- `POST https://api.mcp.ai/api/zeplin/styleguide/text/style/update` — Tool to update a text style in a Zeplin styleguide. Use when you need to modify typography settings of an existing text style after confirming the styleguide and text style IDs.
  - body: { data: object, token_type?: string, access_token?: string, authorization?: string, styleguide_id: string, text_style_id: string }
- `POST https://api.mcp.ai/api/zeplin/styleguide/text/styles/list` — Tool to list text styles in a Zeplin styleguide. Use when you need to fetch defined typography tokens after obtaining the styleguide ID.
  - body: { limit?: integer, offset?: integer, token_type?: string, access_token?: string, authorization?: string, styleguide_id: string, linked_project?: string }
- `POST https://api.mcp.ai/api/zeplin/users/get/personal/projects` — Tool to list personal projects. Use when you need to fetch all projects in the current user's personal workspace after authentication.
  - body: { limit?: integer, offset?: integer }

## Example prompts
- "What can I do in Zeplin?"
- "Show me a summary of my Zeplin account"

## More
- Page: https://mcp.ai/zeplin
- Agent spec (llms.txt): https://mcp.ai/zeplin/llms.txt
- Postman collection: https://mcp.ai/zeplin/postman.json