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
.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?"

Tools

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

Getting Started

  • get_started: Essential first step that provides a guided workflow for using the Hopper Design System.

Component Tools

  • get_components_list: Get a complete list of all available components in the Hopper Design System
  • get_component_usage: Retrieve comprehensive component documentation including anatomy, structure, examples, dos and don'ts, and best practices
  • get_component_props: Get detailed component API as JSON, including properties, attributes, methods, and events

Guide Tools

  • get_design_tokens: Retrieve design tokens used in the Hopper Design System.
  • get_guide: Access comprehensive guides and best practices.

Migration Tools