Docs

Docs

Claude Code

Learn how to configure Claude Code to access Vaadin documentation through the Model Context Protocol server

Claude Code is Anthropic’s official CLI tool for agentic coding. It provides native support for HTTP-based MCP servers, making it straightforward to connect to the Vaadin MCP server.

The easiest way to set up Claude Code for Vaadin development is the Vaadin Agent Marketplace plugin. A single plugin installs both the Vaadin MCP server and a set of Vaadin development skills. When you use the plugin, you don’t need to configure the MCP server manually as described below.

Installing the plugin requires a recent version of Claude Code with plugin support.

  1. Add the marketplace:

    Source code
    terminal
    /plugin marketplace add vaadin/agent-marketplace

  2. Install the plugin:

    Source code
    terminal
    /plugin install vaadin-skills@vaadin-marketplace

Alternatively, run /plugin and select vaadin-skills from the marketplace browser.

To update the plugin later, refresh the marketplace and update from the plugin manager:

Source code
terminal
/plugin marketplace update vaadin-marketplace

If you prefer to connect only the MCP server, without the bundled skills, follow the manual configuration instructions below instead.

Manual Configuration

The recommended way to add the MCP server on its own is Claude Code’s built-in CLI.

Global Configuration

To add the Vaadin MCP server globally (available in all projects):

Source code
terminal
claude mcp add --transport http vaadin https://mcp.vaadin.com/docs --scope user

Project-Scoped Configuration

To add the server only for the current project, navigate to your project directory and run:

Source code
terminal
claude mcp add --transport http vaadin https://mcp.vaadin.com/docs --scope project

This creates a .mcp.json file in your project root.

Tip
 Use claude mcp add --help for all available options.

After adding the server, restart Claude Code to load it.

Editing the Configuration File

Alternatively, add the server to Claude Code’s configuration directly. User-scoped servers are stored in ~/.claude.json, while project-scoped servers go in a .mcp.json file in your project root. Add a vaadin entry under mcpServers:

Source code
JSON
{
  "mcpServers": {
    "vaadin": {
      "type": "http",
      "url": "https://mcp.vaadin.com/docs"
    }
  }
}
Tip

You can add multiple MCP servers to the configuration. Each server needs a unique name in the mcpServers object.

Verify the Setup

After restarting Claude Code:

  1. Start a new conversation

  2. Ask a question about Vaadin development (e.g., "How to create a Button in Vaadin?")

  3. Claude Code automatically uses the Vaadin MCP server to fetch relevant documentation

You can verify that the MCP server is connected by running the /mcp command in Claude Code, which lists each connected server along with its available tools.

Useful CLI Commands

Command

Description

claude mcp list

List all configured MCP servers

claude mcp get vaadin

Show details for the Vaadin MCP server

claude mcp remove vaadin

Remove the Vaadin MCP server

Resources