# Zeplin

```json
{
  "name": "Zeplin",
  "slug": "zeplin",
  "url": "https://composio.dev/toolkits/zeplin",
  "markdown_url": "https://composio.dev/toolkits/zeplin.md",
  "logo_url": "https://logos.composio.dev/api/zeplin",
  "categories": [
    "design & creative tools"
  ],
  "is_composio_managed": false,
  "updated_at": "2026-05-12T10:31:12.652Z"
}
```

![Zeplin logo](https://logos.composio.dev/api/zeplin)

## Description

Securely connect your AI agents and chatbots (Claude, ChatGPT, Cursor, etc) with Zeplin MCP or direct API to fetch project details, organize screens, share asset links, and automate design handoff through natural language.

## Summary

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.

## Categories

- design & creative tools

## Toolkit Details

- Tools: 24

## Images

- Logo: https://logos.composio.dev/api/zeplin

## Authentication

- **Oauth2**
  - Type: `oauth2`
  - Description: Oauth2 authentication for Zeplin.
  - Setup:
    - Configure Oauth2 credentials for Zeplin.
    - Use the credentials when creating an auth config in Composio.
- **Api Key**
  - Type: `api_key`
  - Description: Api Key authentication for Zeplin.
  - Setup:
    - Configure Api Key credentials for Zeplin.
    - Use the credentials when creating an auth config in Composio.

## Suggested Prompts

- List all project styleguides in Zeplin
- Get all screens for a specific project
- Fetch comments from a specific Zeplin screen
- Show latest assets uploaded to a project

## 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.

## Installation and MCP Setup

### Path 1: SDK Installation

#### Path 1, Step 1: Install Composio

Install the Composio SDK
```python
pip install composio_openai
```

```typescript
npm install @composio/openai
```

#### Path 1, Step 2: Initialize Composio and Create Tool Router Session

Import and initialize Composio client, then create a Tool Router session
```python
from openai import OpenAI
from composio import Composio
from composio_openai import OpenAIResponsesProvider

composio = Composio(provider=OpenAIResponsesProvider())
openai = OpenAI()
session = composio.create(user_id='your-user-id')
```

```typescript
import OpenAI from 'openai';
import { Composio } from '@composio/core';
import { OpenAIResponsesProvider } from '@composio/openai';

const composio = new Composio({
  provider: new OpenAIResponsesProvider(),
});
const openai = new OpenAI({});
const session = await composio.create('your-user-id');
```

#### Path 1, Step 3: Execute Zeplin Tools via Tool Router with Your Agent

Get tools from Tool Router session and execute Zeplin actions with your Agent
```python
tools = session.tools
response = openai.responses.create(
  model='gpt-4.1',
  tools=tools,
  input=[{
    'role': 'user',
    'content': 'Show the latest Zeplin screens added to the project "Mobile App Redesign"'
  }]
)
result = composio.provider.handle_tool_calls(
  response=response,
  user_id='your-user-id'
)
print(result)
```

```typescript
const tools = session.tools;
const response = await openai.responses.create({
  model: 'gpt-4.1',
  tools: tools,
  input: [{
    role: 'user',
    content: 'Show the latest Zeplin screens added to the project "Mobile App Redesign"'
  }],
});
const result = await composio.provider.handleToolCalls(
  'your-user-id',
  response.output
);
console.log(result);
```

### Path 2: MCP Server Setup

#### Path 2, Step 1: Install Composio

Install the Composio SDK and Claude Agent SDK
```python
pip install composio claude-agent-sdk
```

```typescript
npm install @composio/core ai @ai-sdk/openai @ai-sdk/mcp
```

#### Path 2, Step 2: Create Tool Router Session

Initialize the Composio client and create a Tool Router session
```python
from composio import Composio
from claude_agent_sdk import ClaudeSDKClient, ClaudeAgentOptions

composio = Composio(api_key='your-composio-api-key')
session = composio.create(user_id='your-user-id')
url = session.mcp.url
```

```typescript
import { Composio } from '@composio/core';

const composio = new Composio({ apiKey: 'your-api-key' });

console.log("Creating Tool Router session...");
const { mcp } = await composio.create('your-user-id');
console.log(`Tool Router session created: ${mcp.url}`);
```

#### Path 2, Step 3: Connect to AI Agent

Use the MCP server with your AI agent
```python
import asyncio

options = ClaudeAgentOptions(
    permission_mode='bypassPermissions',
    mcp_servers={
        'tool_router': {
            'type': 'http',
            'url': url,
            'headers': {
                'x-api-key': 'your-composio-api-key'
            }
        }
    },
    system_prompt='You are a helpful assistant with access to Zeplin tools.',
    max_turns=10
)

async def main():
    async with ClaudeSDKClient(options=options) as client:
        await client.query('List all Zeplin projects I have access to')
        async for message in client.receive_response():
            if hasattr(message, 'content'):
                for block in message.content:
                    if hasattr(block, 'text'):
                        print(block.text)

asyncio.run(main())
```

```typescript
import { openai } from '@ai-sdk/openai';
import { experimental_createMCPClient as createMCPClient } from '@ai-sdk/mcp';
import { generateText, stepCountIs } from 'ai';

const client = await createMCPClient({
  transport: {
    type: 'http',
    url: mcp.url,
    headers: { 'x-api-key': 'your-composio-api-key' }
  }
});

const tools = await client.tools();

const { text } = await generateText({
  model: openai('gpt-4o'),
  tools,
  messages: [{ role: 'user', content: 'List all Zeplin projects I have access to' }],
  stopWhen: stepCountIs( 5 )
});

console.log(`Agent: ${text}`);
```

## Why Use Composio?

### 1. AI Native Zeplin Integration

- Supports both Zeplin MCP and direct API based integrations
- Structured, LLM-friendly schemas for reliable tool execution
- Rich coverage for reading, writing, and querying your Zeplin data

### 2. Managed Auth

- Built-in OAuth handling with automatic token refresh and rotation
- Central place to manage, scope, and revoke Zeplin access
- Per user and per environment credentials instead of hard-coded keys

### 3. Agent Optimized Design

- Tools are tuned using real error and success rates to improve reliability over time
- Comprehensive execution logs so you always know what ran, when, and on whose behalf

### 4. Enterprise Grade Security

- Fine-grained RBAC so you control which agents and users can access Zeplin
- Scoped, least privilege access to Zeplin resources
- Full audit trail of agent actions to support review and compliance

## Use Zeplin with any AI Agent Framework

Choose a framework you want to connect 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)

## 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.
- [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.
- [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.
- [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.
- [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.
- [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.
- [Fal.ai](https://composio.dev/toolkits/fal_ai) - Fal.ai is a generative media platform offering 600+ AI models for images, video, voice, and audio. Developers use Fal.ai for fast, scalable access to cutting-edge generative AI tools.
- [Gamma](https://composio.dev/toolkits/gamma) - Gamma is an AI-powered platform for making beautiful, interactive presentations and documents. It lets anyone create and share engaging decks with minimal effort.
- [Html to image](https://composio.dev/toolkits/html_to_image) - Html to image converts HTML and CSS into images or captures web page screenshots. Instantly generate visuals from code or web content—no manual screenshots needed.
- [Imagior](https://composio.dev/toolkits/imagior) - Imagior is an AI-powered image generation platform that lets you create and customize images using dynamic templates and APIs. Perfect for businesses and creators needing fast, scalable visuals without design hassle.
- [Imejis io](https://composio.dev/toolkits/imejis_io) - Imejis io is an API-based image generation platform with powerful customization and template support. It lets you create and modify images in seconds, no manual design work required.
- [Imgix](https://composio.dev/toolkits/imgix) - Imgix is a real-time image processing and delivery service for developers. It helps you optimize, transform, and deliver images efficiently at any scale.
- [Kraken io](https://composio.dev/toolkits/kraken_io) - Kraken.io is an image optimization and compression platform. It helps you shrink image file sizes while keeping visual quality intact.
- [Logo dev](https://composio.dev/toolkits/logo_dev) - Logo.dev is an API and database for high-resolution company logos and brand metadata. Instantly fetch official logos from any domain without scraping or manual searching.
- [Miro](https://composio.dev/toolkits/miro) - Miro is a collaborative online whiteboard platform for teams to brainstorm, design, and manage projects visually. It streamlines teamwork by enabling real-time idea sharing, diagramming, and workflow planning in a single space.

## Frequently Asked Questions

### Do I need my own developer credentials to use Zeplin with Composio?

Yes, Zeplin requires you to configure your own API key credentials. Once set up, Composio handles secure credential storage and API request handling for you.

### Can I use multiple toolkits together?

Yes! Composio's Tool Router enables agents to use multiple toolkits. [Learn more](https://docs.composio.dev/tool-router/overview).

### Is Composio secure?

Composio is SOC 2 and ISO 27001 compliant with all data encrypted in transit and at rest. [Learn more](https://trust.composio.dev).

### What if the API changes?

Composio maintains and updates all toolkit integrations automatically, so your agents always work with the latest API versions.

---
[See all toolkits](https://composio.dev/toolkits) · [Composio docs](https://docs.composio.dev/llms.txt)