hopper-design-system-mcp.md

Hopper Design System MCP Server

MCP server

from"Workleap"

Workleap hosts this official MCP server for the Hopper Design System. It exposes current component documentation, design tokens, icon search, Orbiter-to-Hopper migration help and source validation through a remote HTTP endpoint.

Not for: A general-purpose component generator or embedded design canvas. It serves Hopper documentation and tooling and does not register an MCP Apps UI.

Source and setup verified on 2026-11-05

Developer Tools

Hopperdesign systemtokensvalidation

Visit Website

Quick facts

Maintainer: Workleap (official)
Endpoint: https://hopper.workleap.design/mcp
Transport: HTTP
Install: Hosted; no local package
UI: None documented; tools and resources only

What you can do

get_component_doc and get_guide
get_design_tokens and get_icons
migrate_from_orbiter_to_hopper
validate_hopper_code
generate_code_from_figma_design when a Figma MCP server is also available

Requirements

An MCP client that accepts remote HTTP servers
GitHub Copilot and Copilot Chat for the documented VS Code setup
A Hopper project for migration or validation work

setup.md

# 1. Create the project config

Add the hosted endpoint to .vscode/mcp.json at the project root.

# 2. Start the server

Open the MCP server list in VS Code and click Start for hopper.

# VS Code → .vscode/mcp.json

{
  "servers": {
    "hopper": {
      "url": "https://hopper.workleap.design/mcp",
      "type": "http"
    }
  }
}

Always confirm the latest setup instructions with the maintainer before installing.

>Questions

Is Hopper MCP official?

Yes. Workleap publishes the server in the Hopper documentation and hosts the endpoint on hopper.workleap.design.

What is the difference between the Hopper agent skill and MCP server?

Workleap says the skill works offline and needs no configuration. The MCP server adds current data, fuzzy icon search and the full component API.

Does Hopper MCP show an inline component browser?

No inline MCP App resource is documented. It exposes tools, prompts and hopper:// documentation resources.

>Related Apps

system-monitor-server.md2.4k

export system-monitor

UI App

from "modelcontextprotocol"

Real-time OS metrics dashboard for system monitoring

monitoringmetricsdashboard

qr-server.md2.4k

export qr-server

UI App

from "modelcontextprotocol"

QR code generator for creating scannable codes

UI over MCP - Create next-gen UI experiences with the protocol and SDK

SDKUIframework