Integrating with the MCP Server

The Web Component AI Tools extension provides a local Model Context Protocol (MCP) server that exposes information about the web components in your workspace. This server can be integrated with various AI assistants and tools that support the MCP protocol.

MCP Server Overview

The MCP server provided by this extension supports the following transports:

• HTTP
• SSE
• STDIO (coming soon)

Host & Port Settings

The MCP Server's hostname by default is 127.0.0.1 and the port is randomly assigned by the OS, but these can be customized through the settings.json file:

{
  "wcai.mcp.host": "localhost",
  "wcai.mcp.port": 3000
}

JSON Configuration Information

1. If the MCP server is not already running, start the MCP server in VS Code by opening the command palette (Ctrl+Shift+P or Cmd+Shift+P) and running the Web Components AI: Start MCP Server command.
2. Copy the server configuration by running the Web Components AI: MCP Server Information command and clicking the "Copy Config" button.
3. Paste the configuration into the settings for your AI assistant or tool.

{
  "mcpServers": {
    "mcp-wcai-http": {
      "type": "http",
      "url": "http://<host>:<port>/mcp"
    },
    "mcp-wcai-sse": {
      "type": "sse",
      "url": "http://<host>:<port>/sse"
    }
  }
}

Integrating with AI Assistants

• VS Code (including Copilot)
• Cursor
• Claude Desktop
• Claude Code
• Trae
• Windsurf
• Void
• Cline
• Augment
• AMP
• Kiro

VS Code (including Copilot)

Automatically installation

The extension will automatically register the MCP server with VS Code, so no additional configuration is required. Run MCP: List Servers in the command palette to see the server listed.

Older versions (<1.101.0)

Using the copied configuration, manually add the MCP server into your .vscode/mcp.json:

{
  "servers": {
    "mcp-wcai-http": {
      "type": "http",
      "url": "http://<host>:<port>/mcp"
    },
    "mcp-wcai-sse": {
      "type": "sse",
      "url": "http://<host>:<port>/sse"
    }
  }
}

Cursor

Copy the MCP server configuration from the VS Code notification and paste it into your .cursor/mcp.json:

{
  "mcpServers": {
    "mcp-wcai-http": {
      "type": "http",
      "url": "http://<host>:<port>/mcp"
    },
    "mcp-wcai-sse": {
      "type": "sse",
      "url": "http://<host>:<port>/sse"
    }
  }
}

Claude Desktop

• Click Connected Apps.
• Click + Add Integration.
• In the Integration URL field, paste the SSE URL http://<host>:<port>/sse.
• Click the Add button.

Claude Code

Use a project-scoped server configuration adding a .mcp.json file into the root of your project.

Generate file using the CLI:

claude mcp add --transport sse sse-server http://<host>:<port>/sse --scope project /path/to/your/project

Creating the file manually

Add a .mcp.json file in the the root of your project:

{
  "mcpServers": {
    "mcp-wcai-http": {
      "type": "http",
      "url": "http://<host>:<port>/mcp"
    },
    "mcp-wcai-sse": {
      "type": "sse",
      "url": "http://<host>:<port>/sse"
    }
  }
}

Trae

• At the top right of the side chat box, click the Settings icon, and select MCP from the menu. The MCP tab appears.
• Click the + Add button and select Add Manually from the menu. The Configure Manually window appears.

{
  "mcpServers": {
    "mcp-wcai-http": {
      "type": "http",
      "url": "http://localhost:3000/mcp"
    }
  }
}

NOTE: Only one MCP server entry is allowed at a time.

Windsurf

You can add an MCP server to Cascade by adding the following configuration to your ~/.codeium/windsurf/mcp_config.json file:

{
  "mcpServers": {
    "mcp-wcai-http": {
      "type": "http",
      "url": "http://<host>:<port>/mcp"
    },
    "mcp-wcai-sse": {
      "type": "sse",
      "url": "http://<host>:<port>/sse"
    }
  }
}

Void

Copy the MCP server configuration from the VS Code notification and paste it into your .void-editor/mcp.json:

{
  "mcpServers": {
    "mcp-wcai-http": {
      "type": "http",
      "url": "http://<host>:<port>/mcp"
    },
    "mcp-wcai-sse": {
      "type": "sse",
      "url": "http://<host>:<port>/sse"
    }
  }
}

Cline

• Click the MCP Servers icon in the top navigation bar of the Cline extension.
• Click the Installed tab.
• Click the Configure MCP Servers button and enter the configuration into the cline_mcp_settings.json file:

{
  "mcpServers": {
    "mcp-wcai-http": {
      "type": "http",
      "url": "http://<host>:<port>/mcp"
    },
    "mcp-wcai-sse": {
      "type": "sse",
      "url": "http://<host>:<port>/sse"
    }
  }
}

Augment

Product release support coming soon once STDIO transport is added!

HTTP & SSE Support in >0.491.0 Pre-Release.

Using the Augment Settings view:

HTTP streaming:

• Click "Add HTTP MCP"
• Name, add mcp-wcai-http
• URL add http://<host>:<port>/mcp

SSE:

• Click "Add SSE MCP"
• Name, add mcp-wcai-sse
• URL add http://<host>:<port>/sse

Using settings.json:

"augment.advanced": {
  "mcpServers": {
    "mcp-wcai-http": {
      "type": "http",
      "url": "http://<host>:<port>/mcp"
    },
    "mcp-wcai-sse": {
      "type": "sse",
      "url": "http://<host>:<port>/sse"
    }
  }
}

AMP

Using settings.json:

"amp.mcpServers": {
  "mcp-wcai-http": {
    "type": "http",
    "url": "http://<host>:<port>/mcp"
  },
  "mcp-wcai-sse": {
    "type": "sse",
    "url": "http://<host>:<port>/sse"
  }
}

Kiro

Kiro doesn't support http-based MCP servers, however you can use the mcp-remote NPM package to make requests through stdio.

Copy the MCP server configuration from the VS Code notification and paste it into:

• Workspace-level .kiro/settings/mcp.json
• User-level ~/.kiro/settings/mcp.json

{
  "mcpServers": {
    "mcp-wcai-http": {
      "command": "npx",
      "args": ["mcp-remote", "http://<host>:<port>/mcp", "--transport", "http"]
    },
    "mcp-wcai-sse": {
      "command": "npx",
      "args": ["mcp-remote", "http://<host>:<port>/sse", "--transport", "sse"]
    }
  }
}