SIGN UPLOG IN
X (Twitter)LinkedInGitHubDiscordYouTube

How to integrate Dribbble MCP with Hermes

Connect Hermes to Dribbble MCP. Upload new shot from figma export, create project and add selected shots, and more using natural language, with authentication handled for you.

Get started for freeGet a demo
Dribbble logoDribbble
Oauth2

Dribbble is a design community and publishing platform for managing shots, projects, and attachments. Use it to showcase work, collect feedback, and organize creative designs.

12 Tools

Introduction

Hermes is a 24/7 autonomous agent that lives on your computer or server — it remembers what it learns and evolves as your usage grows.

This guide explains the easiest and most robust way to connect your Dribbble account to Hermes. You can do this through either Composio Connect CLI or Composio Connect MCP. For personal use we recommend the CLI, but you won't go wrong with MCP either.

Also integrate Dribbble with

ChatGPTClaude CoworkAtomic Agent

What is Composio Connect?

Composio Connect is a consumer offering that lets anyone plug 1,500+ applications directly into their agent harness — including Hermes. It can:

  • Search and load tools from relevant toolkits on-demand, reducing context usage.
  • Chain multiple tools to accomplish complex workflows via a remote workbench, without excessive back-and-forth with the LLM.
  • Manage app authentication end-to-end with zero manual overhead.

Integrating Dribbble with Hermes

Using Composio Connect CLI

1. Install the Composio CLI

Run the install script directly, or paste https://composio.dev/hermes into your Hermes chat box to have it installed for you.

bash
curl -fsSL https://composio.dev/install | bash
Hermes authenticating with Composio

2. Authenticate

Once the CLI is installed, ask Hermes to authenticate with Composio.

3. Connect to Dribbble

Ask your agent to connect to Dribbble, or simply request any Dribbble-related task. Hermes will prompt you to authenticate and authorize access.

4. Done. You're all set with a new Dribbble connection.

Using Composio Connect MCP

1. Get your MCP URL and API Key

Go to dashboard.composio.dev and copy your Connect MCP URL and API key.

Copy MCP URL and API key from Composio dashboard

2. Open the Hermes config file

bash
nano ~/.hermes/config.yaml

3. Add the Composio Connect MCP server

bash
mcp_servers:
  composio:
    url: "https://connect.composio.dev/mcp"
    headers:
      x-consumer-api-key: "YOUR_COMPOSIO_API_KEY"
    connect_timeout: 60
    timeout: 180

Save with Ctrl + O, Enter, then exit with Ctrl + X.

4. Restart your Hermes agent

Once restarted, ask your agent to connect to Dribbble or request any Dribbble-related task. It will prompt you to authenticate and authorize access.

5. Done!

What is the Dribbble MCP server, and what's possible with it?

The Dribbble MCP server is an implementation of the Model Context Protocol that connects your AI agent and assistants like Claude, Cursor, etc directly to your Dribbble account. It provides structured and secure access to your profile, shots, projects, and shot attachments, so your agent can review your portfolio, publish shots, organize projects, update content, and manage attachments on your behalf.

  • Profile and publishing access: Have your agent check your profile, account capabilities, teams, and eligibility to upload shots.
  • Shot publishing and management: Direct your agent to publish image shots, retrieve your existing shots, update their metadata, or delete shots.
  • Project organization: Let the agent list your projects, create new ones, revise their names or descriptions, and delete projects.
  • Shot details and portfolio review: Instruct your agent to retrieve a shot with its media, tags, projects, attachments, and description.
  • Attachment management: Have your agent upload file attachments to your shots or remove attachments you no longer need.

Way Forward

With Dribbble connected, Hermes can now act on your behalf whenever it detects a relevant task or you ask it to.

From here, you can extend Hermes further:

  • Connect more apps: Calendar, Slack, Notion, Linear, and hundreds of others are available through the same Composio Connect setup. Each new integration compounds what Hermes can do for you.
  • Build workflows across tools: Once multiple apps are connected, Hermes can chain actions together — turn an email into a calendar invite, a Slack message into a Linear ticket, or a meeting note into a follow-up draft.
  • Let it learn your patterns: The more you use Hermes, the better it gets at anticipating how you'd handle recurring tasks. Give it feedback on drafts and decisions, and it will adapt.

If you run into trouble or want to share what you've built, join the community or check out the Docs for deeper configuration options.

TOOLS

Supported Tools

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

Create Project

Create a project for the connected Dribbble user.

Create Shot

Upload an image to create a public Dribbble shot asynchronously.

Delete Project

Permanently delete a project belonging to the connected Dribbble user.

Delete Shot

Permanently delete a shot owned by the connected Dribbble user.

Delete Shot Attachment

Permanently delete an attachment from a shot owned by the connected Dribbble user.

Get Current User

Return the connected Dribbble user's profile, account capabilities, teams, and shot-upload eligibility.

Get My Shot

Return one shot owned by the connected user, including its media, tags, projects, and attachments.

List My Projects

Return one page of projects belonging to the connected Dribbble user, with a safe cursor for the next page.

List My Shots

Return one page of shots owned by the connected Dribbble user, with a safe cursor and selectable HTML or plain-text description representation.

Update Project

Update the name or description of a project belonging to the connected user.

Update Shot

Update an owned Dribbble shot's metadata and choose the HTML or plain-text description representation returned in the response.

Upload Shot Attachment

Upload a file attachment to an owned Dribbble shot asynchronously.

FRAMEWORKS

How to build Dribbble MCP Agent with another framework

ChatGPT logo

ChatGPT

Use Dribbble MCP with ChatGPT

Claude Cowork logo

Claude Cowork

Use Dribbble MCP with Claude Cowork

Atomic Agent logo

Atomic Agent

Use Dribbble MCP with Atomic Agent

FAQ

Frequently asked questions

With a standalone Dribbble MCP server, the agents and LLMs can only access a fixed set of Dribbble tools tied to that server. However, with the Composio Tool Router, agents can dynamically load tools from Dribbble and many other apps based on the task at hand, all through a single MCP endpoint.

Yes, you can. Hermes 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 Dribbble tools.

Yes, absolutely. You can configure which Dribbble 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.

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 Dribbble data and credentials are handled as safely as possible.

Start with Dribbble.It takes 30 seconds.

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

Start building