MCP Server

The Hopper MCP Server is a specialized Model Context Protocol server that provides AI assistants (like GitHub Copilot, Claude Code, and Cursor) with access to the Hopper Design System component library, design tokens, icons, and migration guidance.

Setup

The Hopper MCP server is available at https://hopper.workleap.design/mcp.

Visual Studio Code

To use the Hopper MCP server in Visual Studio Code, you need to configure the MCP server in your project.

Make sure you have the GitHub Copilot and GitHub Copilot Chat extensions installed.

In the .vscode/mcp.json file at the root of your project, add the MCP server configuration:

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

The MCP server is now ready to use. Click on Start on the MCP server. Follow this guide to learn how to run an MCP server.

To know how to use MCP tools in agent mode, refer to the Use MCP tools in agent mode section.

Try It Now

You can use it for code generation, migration, or any questions you have about the Hopper Design System. A few examples:

• "What are Hopper design tokens and how should I use them?"
• "How do I create an accessible Hopper button component?"
• "How should I implement responsive design in the Hopper Design System?"
• "What are the best practices for using icons in Hopper?"
• "/generate_code_from_figma_design [figma_file_url]"
• "Use Hopper tooling to analyze Hopper usage in this folder"
• "Use Hopper MCP migration tool to migrate only layout components imported from the Orbiter within the src folder"
• "How could I use Hopper CLI tool to analyze Hopper usage in this folder?"

Tools

The Hopper MCP server exposes the following tools to AI agents:

Component Tools

• get_component_doc: Retrieve comprehensive component documentation including anatomy, structure, examples, dos and don'ts, and best practices. Also supports retrieving detailed component API as JSON, including properties, attributes, methods, and events.

Guide Tools

• get_guide: Access comprehensive guides, best practices, and design tokens for the Hopper Design System.
  • For regular guides: get_guide("styles"), get_guide("layout")
  • For design tokens: get_guide("tokens", category="semantic-color") - category parameter is required

Migration Tools

• migrate_from_orbiter_to_hopper: Helps agents migrate pages from Orbiter to Hopper using the Design Systems Migrations Tools and provided guides.

Prompts

• build_hopper_app: Provides essential workflow and best practices for building applications with the Hopper Design System. Includes guidance on design tokens, component usage, styling, layout, and validation.
• generate_code_from_figma_design: Generate Hopper code from Figma designs (Required: Figma MCP server).

Resources

The Hopper MCP server exposes documentation through structured resource URIs:

• hopper://llms-full: Complete documentation with all components, APIs, tokens, styles, and icons
• hopper://components/{name}/usage: Component usage documentation and best practices
• hopper://components/{name}/props: Component API (brief or full)
• hopper://tokens/{category}: Design tokens by category (e.g., semantic-color, core-dimensions)
• hopper://guides/{section}: Guides for installation, styles, layout, forms, etc.
• hopper://icons/{type}: Icon collections (react or svg)
• hopper://component-list: List of all available components