Zum Hauptinhalt springen

MCP Client konfigurieren

Nachdem Sie ein API Token generiert haben, müssen Sie Ihren MCP Client konfigurieren, um sich mit dem Widget Builder zu verbinden. Im Folgenden finden Sie Einrichtungsanleitungen für gängige MCP Clients.

Verbindungsdetails​

Alle MCP Clients benötigen dieselben zwei Informationen:

EinstellungWert
Server-URLhttps://app.widgetbuilder.de/api/mcp
Authorization HeaderBearer wb_your_token_here
tipp

Wenn Sie den Widget Builder lokal für die Entwicklung betreiben, verwenden Sie http://localhost:7071/api/mcp als Server-URL.

Claude Desktop​

Claude Desktop von Anthropic unterstützt MCP Server nativ.

1. Konfigurationsdatei öffnen​

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json

2. Widget Builder MCP Server hinzufügen​

{
  "mcpServers": {
    "widget-builder": {
      "type": "http",
      "url": "https://app.widgetbuilder.de/api/mcp",
      "headers": {
        "Authorization": "Bearer wb_your_token_here"
      }
    }
  }
}

3. Claude Desktop neu starten​

Schließen Sie Claude Desktop und öffnen Sie es erneut. Sie sollten die Widget Builder Tools in der Tool-Liste (Hammer-Symbol) sehen.

Claude Code (CLI)​

Claude Code unterstützt MCP Server über seine Einstellungsdatei.

1. Einstellungsdatei öffnen​

Die Einstellungsdatei befindet sich unter ~/.claude/settings.json.

2. Widget Builder MCP Server hinzufügen​

{
  "mcpServers": {
    "widget-builder": {
      "type": "http",
      "url": "https://app.widgetbuilder.de/api/mcp",
      "headers": {
        "Authorization": "Bearer wb_your_token_here"
      }
    }
  }
}

3. Claude Code neu starten​

Starten Sie eine neue Claude Code Sitzung. Die Widget Builder Tools sind automatisch verfügbar.

Cursor​

Cursor unterstützt MCP Server über seine Einstellungen.

1. Cursor-Einstellungen öffnen​

Gehen Sie zu Cursor Settings > MCP oder erstellen/bearbeiten Sie die Datei .cursor/mcp.json in Ihrem Projektstammverzeichnis.

2. Widget Builder MCP Server hinzufügen​

{
  "mcpServers": {
    "widget-builder": {
      "type": "http",
      "url": "https://app.widgetbuilder.de/api/mcp",
      "headers": {
        "Authorization": "Bearer wb_your_token_here"
      }
    }
  }
}

3. Cursor neu starten​

Starten Sie den Editor neu, um die MCP-Verbindung zu aktivieren.

Windsurf​

Windsurf unterstützt MCP Server über seine Konfiguration.

1. MCP-Konfiguration öffnen​

Gehen Sie zu Windsurf Settings > Cascade > MCP oder bearbeiten Sie ~/.codeium/windsurf/mcp_config.json.

2. Widget Builder MCP Server hinzufügen​

{
  "mcpServers": {
    "widget-builder": {
      "type": "http",
      "url": "https://app.widgetbuilder.de/api/mcp",
      "headers": {
        "Authorization": "Bearer wb_your_token_here"
      }
    }
  }
}

3. Windsurf neu starten​

Starten Sie den Editor neu, um die Verbindung zu aktivieren.

Andere MCP Clients​

Jeder MCP-kompatible Client, der HTTP-basierte MCP Server (Streamable HTTP Transport) unterstützt, kann sich mit dem Widget Builder verbinden. Die wichtigsten Anforderungen sind:

  1. Protokoll: MCP 2025-03-26 (JSON-RPC 2.0 über HTTP)
  2. Endpunkt: POST https://app.widgetbuilder.de/api/mcp
  3. Content-Type: application/json
  4. Autorisierung: Bearer Token im Authorization Header

Verbindung überprüfen​

Nach der Konfiguration können Sie die Verbindung überprüfen, indem Sie Ihren KI-Assistenten fragen:

„Liste meine Widget Builder Widgets auf"

Wenn die Verbindung funktioniert, gibt der Assistent eine Liste Ihrer Widgets zurück.

Fehlerbehebung​

ProblemLösung
„Unauthorized" oder 401-FehlerÜberprüfen Sie, ob das Token korrekt ist und mit wb_ beginnt
„Token expired"-FehlerGenerieren Sie ein neues Token in der Widget Builder App
Verbindungs-TimeoutStellen Sie sicher, dass die Server-URL korrekt und erreichbar ist
Tools werden nicht angezeigtStarten Sie den MCP Client nach der Konfigurationsänderung neu
„Token revoked"-FehlerDas Token wurde widerrufen; generieren Sie ein neues

Nächste Schritte​

Jetzt, da Ihr MCP Client verbunden ist, erkunden Sie die verfügbaren Tools, um zu sehen, was Sie tun können.