Webentwicklung-MCP

Ein MCP-Server, der nützliche Tools zur Webentwicklung bereitstellt.

Verwendung

Cursor

• Um die Installation in einem Projekt durchzuführen, fügen Sie den MCP-Server zu Ihrer .cursor/mcp.json hinzu:

{
	"mcpServers": {
		"webdev": {
			"command": "npx",
			"args": ["webdev-mcp"],

		}
	}
}

• Um eine globale Installation durchzuführen, fügen Sie diesen Befehl zu Ihren Cursoreinstellungen hinzu:

npx webdev-mcp

Windsurf

• Fügen Sie den MCP-Server zu Ihrer Datei ~/.codeium/windsurf/mcp_config.json hinzu:

{
	"mcpServers": {
		"webdev": {
			"command": "npx",
			"args": ["webdev-mcp"]
		}
	}
}

Related MCP server: PuppeteerMCP Server

Werkzeuge

Derzeit sind die einzigen beiden Tools takeScreenshot und listScreens . Ihr Agent kann das Tool „Bildschirme auflisten“ verwenden, um die Bildschirm-ID des Bildschirms abzurufen, von dem er einen Screenshot erstellen möchte.

Das Tool gibt den Screenshot als Base64-codierte Zeichenfolge zurück.

Tipps

Stellen Sie sicher, dass der YOLO-Modus aktiviert und der MCP-Tool-Schutz in Ihren Cursor-Einstellungen deaktiviert ist, um ein optimales Ergebnis zu erzielen. Möglicherweise müssen Sie Cursor erlauben, Ihren Bildschirm unter macOS aufzuzeichnen.