How to integrate Zeplin MCP with OpenClaw

Connect OpenClaw to Zeplin MCP. List all project styleguides in zeplin, get all screens for a specific project, and more using natural language, with authentication handled for you.

Zeplin logoZeplin
Oauth2Api Key

Zeplin is a collaborative workspace for designers and developers to organize and hand off design projects. It streamlines design file sharing and communication for smoother product development.

24 Tools

Introduction

OpenClaw is the fastest growing agent harness out there, which can work 24/7 to automate almost any kind of tasks. However, its capabilities are limited to the tools it has access to. Composio allows your OpenClaw to access Zeplin with authentication management handled for you. You can execute actions on Zeplin via your favorite OpenClaw interface (Telegram, WhatsApp, TUI, etc), whichever you prefer.

Also integrate Zeplin with

Why use Composio?

Apart from a managed and hosted MCP server, you will get:

  • Programmatic tool calling allows LLMs to write its code in a remote workbench to handle complex tool chaining. Reduces to-and-fro with LLMs for frequent tool calling.
  • Handling Large tool responses out of LLM context to minimize context rot.
  • Dynamic just-in-time access to 20,000 tools across 1700+ other Apps for cross-app workflows. It loads the tools you need, so LLMs aren't overwhelmed by tools you don't need.

How to install Zeplin with OpenClaw

Using Composio API Key and Setup Prompt

Copy the setup prompt from the OpenClaw dashboard
  • Run it in your OpenClaw chat interface.
  • Authenticate Zeplin from the dashboard
  • Go back to your OpenClaw interface and start asking questions.

Using OpenClaw/Composio Plugin

1. Install OpenClaw Composio plugin

bash
openclaw plugins install @composio/openclaw-plugin

2. Copy the API Key from dashboard.composio.dev

3. Setup OpenClaw Config

bash
openclaw config set plugins.entries.composio.config.consumerKey "ck_your_key_here"

4. Restart OpenClaw

bash
openclaw gateway restart

5. Go to your chat interface and start asking questions.

6. When prompted, authenticate the app and you're all set.

How It Works

The plugin connects to Composio's MCP server at https://connect.composio.dev/mcp and registers all available tools directly into the OpenClaw agent. Tools are called by name — no extra search or execute steps needed.

If a tool returns an auth error, the agent will prompt you to connect that toolkit at dashboard.composio.dev.

Configuration

bash
{
  "plugins": {
    "entries": {
      "composio": {
        "enabled": true,
        "config": {
          "consumerKey": "ck_your_key_here"
        }
      }
    }
  }
}
OptionDescriptionDefault
enabledEnable or disable the plugintrue
consumerKeyYour Composio consumer key (ck_...)—
mcpUrlMCP server URL (advanced)https://connect.composio.dev/mcp

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.

Conclusion

You've successfully integrated Zeplin with OpenClaw using Composio plugin. Now interact with Zeplin directly from your terminal, Web UI, or any messenger app using natural language commands.

Key benefits of this setup:

  • Seamless integration across TUI, Web UIs, and Messenger apps like Telegram, WhatsApp, Slack, etc.
  • Natural language commands for Zeplin operations
  • Managed authentication through Composio
  • Access to 20,000+ tools across 1700+ apps for cross-app workflows
  • Programmatic tool calling for complex tool chaining

Next steps:

  • Try asking OpenClaw to perform various Zeplin operations
  • Explore cross-app workflows by connecting more toolkits like Calendar, Slack, Notion, etc.
  • Build complex automation scripts that leverage OpenClaw's 24/7 running capabilities
TOOLS

Supported Tools

Every Zeplin action and event your agent gets out of the box.

Start OAuth authorization (PKCE)

Construct an OAuth 2.

List Project Connected Components

List connected components in a Zeplin project by project ID.

List Project Colors

List colors defined in a Zeplin project by project ID, for example to retrieve its color tokens.

Update Project Color

Tool to update a color in a Zeplin project.

Get Zeplin Project by ID

Get a Zeplin project by ID to view details about a specific project.

Invite Project Member

Invite a user to a Zeplin project by handle, with an optional role.

List Project Text Styles

List text styles in a Zeplin project by project ID to retrieve its typography tokens.

Update Project Text Style

Update an existing text style in a Zeplin project by project and text style IDs.

Delete Screen Annotation

Tool to delete a screen annotation in Zeplin.

Get Screen Annotation

Tool to fetch a single screen annotation.

List Screen Annotations

List a page of annotations for a Zeplin screen by screen ID.

Update Screen Annotation

Update a screen annotation's content, position, or type by screen and annotation IDs.

List Screen Components

List components in a Zeplin screen by screen ID.

Get Screen Section

Tool to get a single screen section.

List Screen Sections

List screen sections in a Zeplin project by project ID.

Get Screen Version

Retrieve a specific Zeplin screen version by screen and version IDs to inspect its snapshot metadata.

Create Screen Version

Tool to create a new version of a screen.

List Screen Versions

List a page of versions for a Zeplin screen to enumerate its past snapshots.

Create Styleguide Color

Create a color token in a Zeplin styleguide.

List Styleguide Colors

List color tokens in a Zeplin styleguide by styleguide ID.

Update Styleguide Color

Update a color in a Zeplin styleguide.

List Styleguide Text Styles

List a page of text styles in a Zeplin styleguide to retrieve its typography tokens.

Update Styleguide Text Style

Update typography settings of a text style in a Zeplin styleguide.

List Personal Projects

List a page of projects in the current user's personal workspace.

FAQ

Frequently asked questions

Start with Zeplin.It takes 30 seconds.

Managed auth, hosted MCP servers, and every Zeplin tool your agent needs.Free to start.

Start building