MCP

MCP (Model Context Protocol) lets Hermes talk to outside tools: browsers, design apps, file systems, APIs. Instead of copy-pasting context, the tool feeds data directly into the conversation.

Hermes supports MCP in two ways:

• Native MCP client — configure servers in ~/.hermes/config.yaml
• mcporter bridge — connect ad-hoc MCP servers from the terminal

Add an MCP server

Just tell Hermes what you want to connect:

install the Figma MCP Bridge from github.com/gethopp/figma-mcp-bridge

Hermes adds the server to ~/.hermes/config.yaml. After it restarts, the server is available.

Your config will look like this:

mcp:
  servers:
    figma-bridge:
      command: npx
      args: ["-y", "@gethopp/figma-mcp-bridge"]

No API token needed.

Useful MCP servers for designers

Tool	What it does	How to use it with Hermes
Figma MCP Bridge	Reads variables, components, frames, and tokens from Figma files via a plugin	Install the plugin once from the repo’s plugin/manifest.json (Figma: Plugins > Development > Import plugin from manifest). Then open the plugin inside a Figma file and paste the file link in Hermes: “build the landing page from the hero frame in this file”
Paper Design	AI-native canvas where every element is real HTML/CSS	Install the Paper MCP, share the canvas link, and ask Hermes to read or update the design directly
PenDev	Design canvas that lives in your codebase as an open format	Install the PenDev CLI, enable its MCP server, and install the bundled agent skill. Then point Hermes at your repo’s PenDev files and iterate on the UI as code

Note on Figma MCP Bridge

It has two parts:

1. Figma plugin — runs inside the Figma file you want to use. You install it from the repo’s latest release by importing plugin/manifest.json in Figma via Plugins > Development > Import plugin from manifest.
2. MCP server — runs locally on your machine (npx -y @gethopp/figma-mcp-bridge). It connects to the plugin through a WebSocket on ws://localhost:1994/ws.

When the plugin is open in a Figma file, the MCP server streams live document data to Hermes without using the Figma REST API. That means no API token and no rate limits. You can open the plugin in multiple files at once; Hermes targets a file by its fileKey.

The bridge also has opt-in write tools for agent-driven edits, but they only work in Figma’s design editor (not Dev Mode) and require edit permission.

Comparison

Tool	Best for	Plus	Minus
Figma MCP Bridge	Existing Figma design systems and handoff	No Figma API token needed; bypasses API rate limits; reads document tree, variables, styles, screenshots; supports multiple files at once; has opt-in write tools	Requires installing a Figma plugin from the repo’s plugin/manifest.json; write tools only work in design editor, not Dev Mode; current write surface is intentionally limited (no components/instances, no variables/styles authoring, no vector booleans)
Paper Design	Fast AI-to-code prototypes	Native agent read/write; no handoff gap; elements are real HTML/CSS from the start	Smaller ecosystem than Figma; team may need to learn new canvas conventions
PenDev	Design-as-code in Git-backed projects	Designs live in the repo; version control through Git; strong MCP integration for code-first teams	Less visual exploration than Figma/Paper; heavier setup if your repo is not ready

What MCP changes

Without MCP:

"Here is a screenshot of my design. Please build it."

With MCP:

"Read my Figma file and build the landing page from the hero frame."
"Update the Paper canvas to use the new color tokens."
"Regenerate the PenDev header based on this prompt."

The agent gets real structure, real tokens, real component names. Less guessing, less back-and-forth.

Security

• Never put API keys inside a prompt. Put them in the MCP env block or a .env file.
• Limit each server’s scope. A design server only needs read access to your files, not your whole workspace.
• Review what an MCP server can do before you install it.

💡

Designer Tip:

Pick one MCP that removes your biggest copy-paste bottleneck. Run a real task through it. Only add the next one after that workflow feels smooth.