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​

Bei einer 401-Antwort gibt der Server einen JSON-RPC-Fehler zurück, dessen data.reason einer von missing_credentials, invalid_token, token_revoked oder token_expired ist. data.hint verweist auf die Einstellungsseite des Widget Builders.

Zusätzlich setzt der Server einen WWW-Authenticate-Header. Der error=-Wert ist RFC-6750-konform (invalid_request bei missing_credentials, invalid_token bei allen anderen Auth-Fehlern); der feinere Grund wird als nicht standardisierter reason=-Parameter mitgegeben, identisch zu data.reason, zum Beispiel:

WWW-Authenticate: Bearer error="invalid_token", error_description="…", reason="token_expired"

So können Clients bereits am Header erkennen, warum die Anfrage abgelehnt wurde, ohne den JSON-RPC-Body zu parsen.

data.reasonBedeutungLösung
missing_credentialsKein Authorization: Bearer <token>-Header gesendetKonfigurieren Sie den MCP Client mit einem Token
invalid_tokenDas Token ist auf diesem Server unbekannt (gelöscht oder von einer anderen Instanz)Generieren Sie ein neues Token in Widget Builder → Einstellungen → MCP API Tokens
token_revokedDas Token wurde explizit widerrufenGenerieren Sie ein neues Token
token_expiredFür das Token wurde ein Ablaufdatum gesetzt und dieses ist überschrittenGenerieren Sie ein neues Token (oder lassen Sie expiresAt weg, um ein Token ohne Ablauf zu erstellen)
Verbindungs-Timeout—Stellen Sie sicher, dass die Server-URL korrekt und erreichbar ist
Tools werden nicht angezeigt—Starten Sie den MCP Client nach der Konfigurationsänderung neu

Tokens ohne expiresAt-Wert laufen nicht ab. Wenn ein MCP Client bei einem nicht ablaufenden Token meldet, dass „das Token abgelaufen" sei, prüfen Sie die tatsächliche Server-Antwort — der wirkliche reason ist meist invalid_token (das Token liegt nicht in der Datenbank dieses Servers) und nicht token_expired.

Nächste Schritte​

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