Cursor IDE Integration

Diese Anleitung zeigt, wie du den Codefluss MCP Server mit Cursor IDE verbindest.

Voraussetzungen

Cursor IDE (Version 0.40 oder höher)
Codefluss API Key (hier erstellen)

Konfiguration über Settings

Schritt 1: MCP Settings öffnen

Öffne Cursor IDE
Gehe zu Settings (⌘ + ,)
Suche nach "MCP" oder navigiere zu Features → MCP Servers

Schritt 2: Server hinzufügen

Klicke auf "Add MCP Server" und konfiguriere:

Feld	Wert
Name	`codefluss`
Transport	`HTTP`
URL	`https://api.codefluss.com/api/mcp`

Schritt 3: Authentifizierung

Füge den Header hinzu:

Authorization: Bearer cf_live_xxx

Konfigurationsdatei

Alternativ kannst du die Konfiguration in einer Datei speichern:

Global (alle Projekte)

~/.cursor/mcp.json:

{
  "mcpServers": {
    "codefluss": {
      "transport": "http",
      "url": "https://api.codefluss.com/api/mcp",
      "headers": {
        "Authorization": "Bearer cf_live_xxx"
      }
    }
  }
}

Workspace (nur aktuelles Projekt)

.cursor/mcp.json im Projektverzeichnis:

{
  "mcpServers": {
    "codefluss": {
      "transport": "http",
      "url": "https://api.codefluss.com/api/mcp",
      "headers": {
        "Authorization": "Bearer cf_live_xxx"
      },
      "metadata": {
        "projectId": "proj_abc"
      }
    }
  }
}

Workspace vs Global Settings

Aspekt	Global	Workspace
Pfad	`~/.cursor/mcp.json`	`.cursor/mcp.json`
Geltungsbereich	Alle Projekte	Nur aktuelles Projekt
Im Git	Nein (persönlich)	Möglich (Team-Sharing)
API Key	Persönlicher Key	Projekt-Key möglich

Empfehlung: API Keys immer global speichern, nur Projekt-spezifische Settings im Workspace.

Praktisches Beispiel: Design System bearbeiten

Szenario

Du arbeitest an einer React-Komponente und möchtest das Codefluss Design System nutzen.

Workflow

Design Tokens abrufen

Im Cursor Chat:

@codefluss Zeige mir die Farb-Tokens für proj_abc

Cursor ruft get_design_tokens auf und zeigt:

{ "colors": { "primary": "#3b82f6", "secondary": "#10b981", "background": "#0a0a0a" } }
Komponente mit Tokens erstellen

@codefluss Erstelle einen Button mit den Primary-Farben

Cursor generiert Code basierend auf den echten Design Tokens.
Komponente in Codefluss speichern

@codefluss Speichere diese Button-Komponente in proj_abc

Cursor ruft create_component auf.

Code-Beispiel

// Von Cursor generiert basierend auf Codefluss Design Tokens
import { cn } from '@/lib/utils';

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  children: React.ReactNode;
}

export function Button({ variant = 'primary', children }: ButtonProps) {
  return (
    <button
      className={cn(
        'rounded-lg px-4 py-2 font-medium transition-colors',
        variant === 'primary' && 'bg-[#3b82f6] text-white hover:bg-[#2563eb]',
        variant === 'secondary' && 'bg-[#10b981] text-white hover:bg-[#059669]'
      )}
    >
      {children}
    </button>
  );
}

Composer Integration

Cursor's Composer kann MCP Tools direkt nutzen:

Öffne Composer (⌘ + I)
Beschreibe deine Aufgabe:
Erstelle eine Landing Page für mein Codefluss-Projekt "Marketing Website". Nutze die Design Tokens und vorhandenen Komponenten.
Composer ruft automatisch die relevanten Tools auf

Inline Chat

Im Editor kannst du Code markieren und MCP-Aktionen ausführen:

Markiere Code
Drücke ⌘ + K
Schreibe: @codefluss Speichere als Komponente "HeroSection"

Troubleshooting

Server nicht verbunden

Status prüfen: Unten rechts in Cursor den MCP-Status prüfen
Logs öffnen: View → Output → MCP
Neu verbinden: Settings → MCP → Reconnect

Langsame Responses

Cursor cached MCP-Responses. Bei veralteten Daten: MCP → Refresh Cache

"Unauthorized" Fehler

API Key prüfen
Header-Format kontrollieren: Bearer (mit Leerzeichen)

Tools nicht sichtbar

Cursor zeigt nur Tools, die zum Kontext passen
Explizit mit @codefluss referenzieren

Best Practices

Workspace-Kontext: Verknüpfe Cursor-Projekte mit Codefluss-Projekten
Composer nutzen: Für komplexe Aufgaben die Composer-Integration verwenden
Shortcuts lernen: ⌘ + K für schnelle MCP-Aktionen
Cache beachten: Nach Änderungen in Codefluss den Cache refreshen