drio
Open app

Vite MCP Server

Source

Catalog onlyCatalog onlySTDIO

Overview

Vite MCP Server adds a Model Context Protocol (MCP) server to the Vite development server, enabling integration with Cursor for enhanced development capabilities.

To use Vite MCP Server, add it to your Cursor MCP configuration by running the command: npx vite-mcp-server. You can then utilize various tools to manage logs and browser interactions.

  • Integration of Vite development server with MCP server - Capture and transmit browser console logs via MCP - Manage logs with checkpoints and circular buffer storage - Retrieve logs and monitor network requests in the browser
  1. Debugging and monitoring browser console logs during development.
  2. Managing snapshots of browser states for testing.
  3. Capturing screenshots and monitoring network requests in real-time.

Add to your AI client

Use these steps to connect Vite MCP Server in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "vite-mcp-server-esnark": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-vite-mcp-server-esnark"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "vite-mcp-server-esnark": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-vite-mcp-server-esnark"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "vite-mcp-server-esnark": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-vite-mcp-server-esnark"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "vite-mcp-server-esnark": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-vite-mcp-server-esnark"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "vite-mcp-server-esnark": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-vite-mcp-server-esnark"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "vite-mcp-server-esnark": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-vite-mcp-server-esnark"
      ]
    }
  }
}

FAQ

What is the maximum log storage capacity?

The server can store up to 1000 lines of logs using a circular buffer method.

How does the checkpoint system work?

Checkpoints allow you to manage snapshots and logs for specific versions, maintaining up to 2 checkpoint log files.

Can I query logs for specific checkpoints?

Yes, you can use the `get-console-logs` tool to query logs for specific checkpoints.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":3185,"uuid":"36294ead-5df2-4746-86dc-695c2ae4f85b","name":"vite-mcp-server","title":"Vite MCP Server","description":"","avatar_url":"https://avatars.githubusercontent.com/u/31977180?v=4","created_at":"2025-03-18T03:14:06.683Z","updated_at":"2025-03-18T18:14:28.006Z","status":"created","author_name":"ESnark","author_avatar_url":"https://avatars.githubusercontent.com/u/31977180?v=4","tags":"[]","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/ESnark/vite-mcp-server","target":"_self","content":"$29","summary":"$2a","img_url":null,"type":null,"metadata":"{\"star\":\"3\",\"license\":\"\",\"language\":\"TypeScript\",\"is_official\":false,\"latest_commit_time\":\"2025-03-19 16:33:28\"}","user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools