> Markdown version of [Claude Code](https://vaadin.com/docs/next/building-apps/agentic-development/mcp/supported-tools/claude-code). Section index: [llms.txt](https://vaadin.com/docs/next/building-apps/llms.txt)

# Claude Code

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.

## <a id="recommended-install-via-the-vaadin-agent-marketplace"></a>Recommended: Install via the Vaadin Agent Marketplace

The easiest way to set up Claude Code for Vaadin development is the [Vaadin Skills](https://vaadin.com/docs/next/building-apps/agentic-development/agent-skills.md) plugin, which you install from the [Vaadin Agent Marketplace](https://github.com/vaadin/agent-marketplace). The 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:

   ```terminal
   /plugin marketplace add vaadin/agent-marketplace
   ```

2. Install the plugin:

   ```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:

```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.

### <a id="replacing-an-earlier-marketplace"></a>Replacing an Earlier Marketplace

The deprecated `vaadin/claude-plugin` marketplace uses the same name, `vaadin-marketplace`. Claude Code records the source of every marketplace you add, and won’t point an existing name at a different source. If you added the old marketplace, or added this one under a different URL, adding the marketplace fails with this error:

```
Cannot add marketplace "vaadin-marketplace": its network source differs from the one declared for it in settings
```

Remove the existing entry, and then add the marketplace again. Removing a marketplace also disables the plugins installed from it, so install the plugin again, too:

```terminal
/plugin marketplace remove vaadin-marketplace
/plugin marketplace add vaadin/agent-marketplace
/plugin install vaadin-skills@vaadin-marketplace
```

## <a id="manual-configuration"></a>Manual Configuration

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

### <a id="global-configuration"></a>Global Configuration

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

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

### <a id="project-scoped-configuration"></a>Project-Scoped Configuration

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

```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.

### <a id="editing-the-configuration-file"></a>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`:

```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.

## <a id="verify-the-setup"></a>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.

## <a id="useful-cli-commands"></a>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           |

## <a id="resources"></a>Resources

- [Vaadin Agent Marketplace](https://github.com/vaadin/agent-marketplace)

- [Claude Code MCP Documentation](https://code.claude.com/docs/en/mcp)