# How to integrate Zeplin MCP with Atomic Agent ```json { "title": "How to integrate Zeplin MCP with Atomic Agent", "toolkit": "Zeplin", "toolkit_slug": "zeplin", "framework": "Atomic Agent", "framework_slug": "atomic-agent", "url": "https://composio.dev/toolkits/zeplin/framework/atomic-agent", "markdown_url": "https://composio.dev/toolkits/zeplin/framework/atomic-agent.md", "updated_at": "2026-08-11T13:16:30.574Z" } ``` ## Introduction Atomic Agent is an open-source AI agent that runs on your machine and supports local models through llama.cpp. Connect it to 1,500+ apps through Composio, including Zeplin. This guide uses Atomic Agent's built-in Composio integration. You need Atomic Agent v0.5.6 or later, your own Composio API key, and a Zeplin account. See the [Atomic Agent documentation](https://atomicagent.io/docs/?cta_placement=atomic-agent-docs) for installation instructions. ## Also integrate Zeplin with - [OpenAI Agents SDK](https://composio.dev/toolkits/zeplin/framework/open-ai-agents-sdk) - [Claude Agent SDK](https://composio.dev/toolkits/zeplin/framework/claude-agents-sdk) - [Claude Code](https://composio.dev/toolkits/zeplin/framework/claude-code) - [Claude Cowork](https://composio.dev/toolkits/zeplin/framework/claude-cowork) - [Codex](https://composio.dev/toolkits/zeplin/framework/codex) - [OpenClaw](https://composio.dev/toolkits/zeplin/framework/openclaw) - [Hermes](https://composio.dev/toolkits/zeplin/framework/hermes-agent) - [Google ADK](https://composio.dev/toolkits/zeplin/framework/google-adk) - [LangChain](https://composio.dev/toolkits/zeplin/framework/langchain) - [Vercel AI SDK](https://composio.dev/toolkits/zeplin/framework/ai-sdk) - [Mastra AI](https://composio.dev/toolkits/zeplin/framework/mastra-ai) - [LlamaIndex](https://composio.dev/toolkits/zeplin/framework/llama-index) - [CrewAI](https://composio.dev/toolkits/zeplin/framework/crew-ai) - [Pydantic AI](https://composio.dev/toolkits/zeplin/framework/pydantic-ai) - [AutoGen](https://composio.dev/toolkits/zeplin/framework/autogen) ## TL;DR ### How Atomic Agent connects to Zeplin Atomic Agent connects to Composio's Tool Router over Streamable HTTP MCP. It discovers the tools needed for your request, and Composio handles account authentication. Execution and account-connection tools follow Atomic Agent's configured approval policy. Review any approval prompt before allowing an action on your connected account. ## Connect Zeplin to Atomic Agent ### Connect Zeplin to Atomic Agent - Sign up or sign in to the [Composio dashboard](https://dashboard.composio.dev/?cta_placement=atomic-agent-api-key). Copy your API key. - In Atomic Agent, open the Integrations tab and select Composio. Select API key, press e, paste the key, and press Enter. The tools become available immediately, without a restart. - Ask Atomic Agent to do something in Zeplin. It searches Composio for the right tool. - On first use, open the sign-in link returned in the chat. Connect your Zeplin account, then return to Atomic Agent to continue. ### Headless setup Add the following line to ~/.atomic-agent/.env, replacing YOUR_COMPOSIO_API_KEY with your key. Start Atomic Agent after saving the file. ```bash COMPOSIO_API_KEY=YOUR_COMPOSIO_API_KEY ``` ## What is the Zeplin MCP server, and what's possible with it? The Zeplin MCP server is an implementation of the Model Context Protocol that connects your AI agent and assistants like Claude, Cursor, etc directly to your Zeplin account. It provides structured and secure access to your Zeplin workspace, so your agent can perform actions like listing projects, fetching screens, exporting assets, managing components, and collaborating with your design team on your behalf. - Project and styleguide management: Let your agent list, fetch, or organize your Zeplin projects and associated styleguides for faster design handoff and reference. - Screen and asset retrieval: Automatically pull screen details, preview images, or export assets from any project directly into your workflow, no copy-paste required. - Component library access: Have your agent fetch, list, or update components from your shared libraries to keep your design system in sync. - Commenting and collaboration: Enable your agent to read, create, or manage comments on screens or components, streamlining feedback and design review cycles. - Resource linking and metadata extraction: Allow your agent to extract, organize, or provide direct links to design resources and metadata, making documentation and developer handoff seamless. ## Supported Tools | Tool slug | Name | Description | |---|---|---| | `ZEPLIN_AUTH_O_AUTH_AUTHORIZE` | Start OAuth authorization (PKCE) | Tool to start OAuth 2.0 authorization code flow for Zeplin apps. Use when initiating user authorization; call before exchanging the code. | | `ZEPLIN_CONNECTED_COMPONENTS_PROJECT_LIST` | List Project Connected Components | 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. | | `ZEPLIN_PROJECT_COLORS_LIST` | List Project Colors | 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. | | `ZEPLIN_PROJECT_COLOR_UPDATE` | Update Project Color | 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. | | `ZEPLIN_PROJECTS_GET` | Get Zeplin Project by ID | Tool to get a Zeplin project by ID. Use when you need detailed info about a specific project after confirming its project_id. | | `ZEPLIN_PROJECTS_MEMBERS_INVITE` | Invite Project Member | 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. | | `ZEPLIN_PROJECT_TEXT_STYLES_LIST` | List Project Text Styles | 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. | | `ZEPLIN_PROJECT_TEXT_STYLE_UPDATE` | Update Project Text Style | 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. | | `ZEPLIN_SCREEN_ANNOTATION_DELETE` | Delete Screen Annotation | Tool to delete a screen annotation in Zeplin. Use when you need to remove a specific annotation from a Zeplin screen given its IDs. | | `ZEPLIN_SCREEN_ANNOTATION_GET` | Get Screen Annotation | Tool to fetch a single screen annotation. Use when you know the screen_id and annotation_id and need the detailed annotation data. | | `ZEPLIN_SCREEN_ANNOTATIONS_LIST` | List Screen Annotations | Tool to list annotations for a Zeplin screen. Use when you have the screen_id and need its annotations. | | `ZEPLIN_SCREEN_ANNOTATIONS_UPDATE` | Update Screen Annotation | Tool to update a screen annotation's content, position, or type. Use after confirming screen_id and annotation_id. | | `ZEPLIN_SCREEN_COMPONENTS_LIST` | List Screen Components | 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. | | `ZEPLIN_SCREEN_SECTION_GET` | Get Screen Section | 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. | | `ZEPLIN_SCREEN_SECTIONS_LIST` | List Screen Sections | Tool to list screen sections in a Zeplin project. Use when you need a paginated list of screen sections after confirming the project ID. | | `ZEPLIN_SCREEN_VERSION_GET` | Get Screen Version | Tool to retrieve a specific screen version. Use after specifying both screen_id and version_id when you need detailed snapshot metadata. | | `ZEPLIN_SCREEN_VERSIONS_CREATE` | Create Screen Version | 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 include a commit_message. | | `ZEPLIN_SCREEN_VERSIONS_LIST` | List Screen Versions | Tool to list all versions of a screen. Use when you need to enumerate past screen snapshots after obtaining a screen ID. | | `ZEPLIN_STYLEGUIDE_COLOR_CREATE` | Create Styleguide Color | Tool to create a new styleguide color. Use after obtaining the styleguide ID to define custom color tokens. | | `ZEPLIN_STYLEGUIDE_COLORS_LIST` | List Styleguide Colors | Tool to list colors in a Zeplin styleguide. Use when you need to fetch defined color tokens after obtaining the styleguide ID. | | `ZEPLIN_STYLEGUIDE_COLOR_UPDATE` | Update Styleguide Color | Tool to update a color in a Zeplin styleguide. Use after obtaining the styleguide and color IDs. | | `ZEPLIN_STYLEGUIDE_TEXT_STYLES_LIST` | List Styleguide Text Styles | Tool to list text styles in a Zeplin styleguide. Use when you need to fetch defined typography tokens after obtaining the styleguide ID. | | `ZEPLIN_STYLEGUIDE_TEXT_STYLE_UPDATE` | Update Styleguide Text Style | 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. | | `ZEPLIN_USERS_GET_PERSONAL_PROJECTS` | List Personal Projects | Tool to list personal projects. Use when you need to fetch all projects in the current user's personal workspace after authentication. | ## Supported Triggers None listed. ## Troubleshooting ### Why is my API key rejected? Copy the key directly from the Composio dashboard. Atomic Agent requires ASCII characters because it sends the key in an HTTP header. Remove any extra characters introduced when copying. ### Why are Composio tools unavailable after saving a key? Check that you use Atomic Agent v0.5.6 or later and that Composio is enabled in your configuration. A "composio": { "enabled": false } setting disables the integration while keeping the saved key on disk. ### Does Composio have a free plan? The Hobby plan includes 100,000 tool calls per month. Composio-managed OAuth apps have a lower included allowance. See [Composio pricing](/pricing) for the current limits that apply to your connection. ## Complete Code None listed. ## Conclusion ### Use Zeplin from Atomic Agent With your account connected, ask Atomic Agent to work with Zeplin in natural language. You can connect more apps through the same Composio integration as you need them. Visit the [Atomic Agent website](https://atomicagent.io/?cta_placement=atomic-agent-site) or inspect the [Atomic Agent source code](https://github.com/AtomicBot-ai/atomic-agent?cta_placement=atomic-agent-repo). ## How to build Zeplin MCP Agent with another framework - [OpenAI Agents SDK](https://composio.dev/toolkits/zeplin/framework/open-ai-agents-sdk) - [Claude Agent SDK](https://composio.dev/toolkits/zeplin/framework/claude-agents-sdk) - [Claude Code](https://composio.dev/toolkits/zeplin/framework/claude-code) - [Claude Cowork](https://composio.dev/toolkits/zeplin/framework/claude-cowork) - [Codex](https://composio.dev/toolkits/zeplin/framework/codex) - [OpenClaw](https://composio.dev/toolkits/zeplin/framework/openclaw) - [Hermes](https://composio.dev/toolkits/zeplin/framework/hermes-agent) - [Google ADK](https://composio.dev/toolkits/zeplin/framework/google-adk) - [LangChain](https://composio.dev/toolkits/zeplin/framework/langchain) - [Vercel AI SDK](https://composio.dev/toolkits/zeplin/framework/ai-sdk) - [Mastra AI](https://composio.dev/toolkits/zeplin/framework/mastra-ai) - [LlamaIndex](https://composio.dev/toolkits/zeplin/framework/llama-index) - [CrewAI](https://composio.dev/toolkits/zeplin/framework/crew-ai) - [Pydantic AI](https://composio.dev/toolkits/zeplin/framework/pydantic-ai) - [AutoGen](https://composio.dev/toolkits/zeplin/framework/autogen) ## Related Toolkits - [Figma](https://composio.dev/toolkits/figma) - Figma is a collaborative interface design tool for teams and individuals. It streamlines design workflows with real-time collaboration and easy sharing. - [Abyssale](https://composio.dev/toolkits/abyssale) - Abyssale is a creative automation platform for generating images, videos, GIFs, PDFs, and HTML5 content programmatically. It streamlines and scales visual content production for marketing, design, and operations teams. - [Alttext ai](https://composio.dev/toolkits/alttext_ai) - AltText.ai is a service that generates alt text for images automatically. It helps boost accessibility and SEO for your visual content. - [Are.na](https://composio.dev/toolkits/arena) - Are.na is a creative research platform for collecting images, links, notes, and ideas in channels. Use it to organize inspiration, build knowledge maps, and connect research across projects. - [Bannerbear](https://composio.dev/toolkits/bannerbear) - Bannerbear is an API-driven platform for generating images and videos automatically at scale. It helps businesses create custom graphics, social visuals, and marketing assets using powerful templates. - [Bannerbite](https://composio.dev/toolkits/bannerbite) - Bannerbite is a creative automation platform for generating images and videos from reusable projects and templates. It helps teams produce on-brand visual assets faster without rebuilding designs from scratch. - [Builder.io](https://composio.dev/toolkits/builder_io) - Builder.io is a visual development platform for managing content, models, assets, and Space configuration. Use it to ship editable digital experiences faster without waiting on every code change. - [Canva](https://composio.dev/toolkits/canva) - Canva is a drag-and-drop design suite for creating professional graphics, presentations, and marketing materials. It makes it easy for anyone to design with beautiful templates and a vast library of elements. - [Canva MCP](https://composio.dev/toolkits/canva_mcp) - Canva MCP is Canva's remote MCP server for accessing designs and content. It centralizes design assets and enables programmatic design workflows. - [Claid ai](https://composio.dev/toolkits/claid_ai) - Claid.ai delivers AI-driven image editing APIs for tasks like background removal, upscaling, and color correction. It helps automate and enhance image workflows with powerful, developer-friendly tools. - [Cloudinary](https://composio.dev/toolkits/cloudinary) - Cloudinary is a cloud-based platform for managing, uploading, and transforming images and videos. It streamlines media workflows and delivers optimized assets globally. - [Contentdrips](https://composio.dev/toolkits/contentdrips) - Contentdrips is an asynchronous rendering API for branded graphics and carousels. It turns reusable templates into on-brand social visuals at scale. - [Creatomate](https://composio.dev/toolkits/creatomate) - Creatomate is an API for generating automated videos, images, GIFs, and reusable media templates. Use it to turn structured data into polished visual content at scale. - [Cults](https://composio.dev/toolkits/cults) - Cults is a digital marketplace for 3D printing models, connecting designers and makers. It lets creators share, sell, and discover a huge variety of printable designs easily. - [DeepImage](https://composio.dev/toolkits/deepimage) - DeepImage is an AI-powered image enhancer and upscaler. Get higher-quality images with just a few clicks. - [Dreamstudio](https://composio.dev/toolkits/dreamstudio) - DreamStudio is Stability AI’s platform for generating and editing images with AI. It lets you easily turn ideas into stunning visuals, fast. - [Dynamic Mockups](https://composio.dev/toolkits/dynamic_mockups) - Dynamic Mockups is an API platform for generating product mockups, rendering templates, and managing visual asset catalogs. Use it to automate high-quality product visuals, AI images, and motion assets at scale. - [Dynapictures](https://composio.dev/toolkits/dynapictures) - Dynapictures is a cloud-based platform for generating personalized images at scale. Instantly create hundreds of custom visuals using your data sources, like Google Sheets. - [Eraser MCP](https://composio.dev/toolkits/eraser_mcp) - Eraser MCP is a workspace for creating and managing technical diagrams and structured documents. It helps teams organize, version, and export diagrams with collaboration-focused tooling. - [Excalidraw MCP](https://composio.dev/toolkits/excalidraw_mcp) - Excalidraw MCP is a no-auth MCP server for creating hand-drawn style diagrams in Excalidraw. Use it to generate visual sketches with viewport camera control and fullscreen editing. ## Frequently Asked Questions ### What are the differences in Tool Router MCP and Zeplin MCP? With a standalone Zeplin MCP server, the agents and LLMs can only access a fixed set of Zeplin tools tied to that server. However, with the Composio Tool Router, agents can dynamically load tools from Zeplin and many other apps based on the task at hand, all through a single MCP endpoint. ### Can I use Tool Router MCP with Atomic Agent? Yes, you can. Atomic Agent fully supports MCP integration. You get structured tool calling, message history handling, and model orchestration while Tool Router takes care of discovering and serving the right Zeplin tools. ### Can I manage the permissions and scopes for Zeplin while using Tool Router? Yes, absolutely. You can configure which Zeplin scopes and actions are allowed when connecting your account to Composio. You can also bring your own OAuth credentials or API configuration so you keep full control over what the agent can do. ### How safe is my data with Composio Tool Router? All sensitive data such as tokens, keys, and configuration is fully encrypted at rest and in transit. Composio is SOC 2 Type 2 compliant and follows strict security practices so your Zeplin data and credentials are handled as safely as possible. --- [See all toolkits](https://composio.dev/toolkits) · [Composio docs](https://docs.composio.dev/llms.txt)