vscode-web-components-ai

The vscode-web-components-ai MCP server provides real-time access to information about web components discovered in your workspace and dependencies. It exposes component data via the Model Context Protocol (MCP) over HTTP and SSE, enabling AI assistants and code tools to query component metadata such as tags, properties, attributes, methods, events, and documentation as you work. This makes it easier for AI copilots and editors to understand your custom elements and libraries, and to generate accurate, context-aware code that uses your actual components.

To use it, first ensure the MCP server is running (typically via the extension’s integrated MCP server feature). Once running, you can connect your AI tool or agent to the MCP endpoint and begin querying resources like manifest://components to retrieve the full set of component data in JSON format. Popular tools supported include Copilot, Cursor, Windsurf, Claude Code, and other MCP-enabled assistants. You can search components by name, tag, or description, fetch detailed component metadata, list all components, and access structured component data through the manifest resources. The server also auto-generates configuration snippets to simplify integration with your AI assistants.

The available MCP tools include: search-components, get-component-details-by-tag-name, get-component-details-by-class-name, and list-all-components. Resources include manifest://components and manifest://components/{tag} for programmatic access to component data. This setup makes it straightforward for AI assistants to understand your workspace’s custom elements and libraries and to generate code that correctly uses their APIs.

Prerequisites:

• Visual Studio Code installed (VS Code 1.99+ recommended for initial setup, extension-dependent features may require newer versions).
• A workspace containing your web components and, ideally, Custom Elements Manifest files (custom-elements.json) or libraries referenced by your project.

Installation steps:

1. Install Visual Studio Code (if not already installed).
2. Install the vscode-web-components-ai extension from the VS Code Marketplace or via the Extensions sidebar by searching for 'd13.vscode-web-components-ai'.
3. Open your workspace in VS Code. The extension will register the MCP server automatically; ensure VS Code is connected to the internet so it can fetch necessary manifests and libraries.
4. In your AI environment, configure the MCP client to connect to the server endpoint exposed by the extension (the extension provides the MCP endpoint for HTTP/SSE access).

If you need to run the MCP server independently (for integration outside VS Code), use:

• npx-based approach (for local testing): npx -y d13.vscode-web-components-ai
• Ensure your environment allows the extension to expose an HTTP/SSE endpoint according to your setup.

Note: The recommended workflow is to use the VS Code extension as the MCP server source, since it automatically discovers components in workspace and dependencies and exposes the proper MCP endpoints for AI tools.

Tips and caveats:

• Ensure your workspace contains valid custom-elements.json manifests or accessible component libraries so the server can discover components.
• If you add new components or dependencies, re-run or refresh the MCP data to keep AI context up to date.
• Some AI tools may require explicit endpoint configuration or authentication; refer to your tool's MCP integration guide to set the correct endpoint and permissions.
• The extension targets seamless integration with Copilot, Cursor, Windsurf, Claude Code, and others; verify compatibility with your chosen AI assistant version.
• If you encounter issues with discovery, check workspace permissions, path resolutions, and ensure the extension has access to node_modules and manifest files.
• Environment variables (if needed for advanced setups): you might include MCP_ENDPOINT for the target server URL, and MCP_AUTH_TOKEN if your environment requires authentication.