Open MCP Client: Webbasierter MCP-Client für eine schnelle Verbindung zu jedem MCP-Dienst.

Allgemeine Einführung

Öffnen Sie MCP Client ist ein Open-Source-Tool, dessen Highlight darin besteht, dass es einen webbasierten MCP-Client (Model Context Protocol) bereitstellt, der es Benutzern ermöglicht, sich zum Chatten mit einem beliebigen MCP-Server zu verbinden, ohne diesen installieren zu müssen. Es unterstützt auch die Einbettung von Chat-Funktionen in Ihre eigenen Anwendungen. Entwickelt vom CopilotKit-Team, kombiniert es LangChain's LangGraph Technologie, das Projekt wird auf der Vercel-Plattform bereitgestellt, der Code wird auf GitHub gehostet und wurde zuletzt am 10. März 2025 aktualisiert. Ob es sich um einen schnellen Testserver oder die Entwicklung benutzerdefinierter KI-Interaktionen handelt, dieses Tool ist einfach und nützlich, vor allem für Benutzer und Entwickler, die eine bequeme Erfahrung mögen.

Funktionsliste

• Bietet einen webbasierten MCP-Client zur direkten Verbindung mit einem MCP-Server und zum Chatten in Echtzeit.
• Es ist keine Installation erforderlich, und die Webversion der Funktion kann über den Browser genutzt werden.
• Unterstützung für die Integration der Chatfunktion in die eigene Anwendung des Nutzers.
• Nutzen Sie die LangGraph-Technologie, um intelligente Agenten zu erstellen, die sich mit Server-Tools verbinden.
• Der offene Quellcode wird auf GitHub gehostet und kann eingesehen und verändert werden.
• Das Front-End basiert auf CopilotKit, wodurch sichergestellt wird, dass die Schnittstelle und der Zustand synchronisiert sind.

Hilfe verwenden

Erste Schritte mit Open MCP Client

Der Open MCP Client kann auf zwei Arten verwendet werden: entweder als schnelle Erfahrung über den webbasierten MCP Client oder lokal eingesetzt und in eine Anwendung integriert. Im Folgenden finden Sie detaillierte Schritte, die Ihnen den Einstieg erleichtern.

1. die Verwendung des webbasierten MCP-Clients

Die Web-Version ist das Kernstück von Open MCP Client und eignet sich für eine schnelle Verbindung zu MCP-Servern ohne jegliche Installation.

• Schritt 1: Besuchen Sie die Webversion
  Öffnen Sie Ihren Browser und geben Sie die Adresse ein:open-mcp-client.vercel.app. Dies ist die offizielle Webversion des MCP-Clients, die vom CopilotKit-Team auf Vercel bereitgestellt wurde und sofort einsatzbereit ist.
• Schritt 2: Beziehen Sie die MCP-Server-URL
  Sie benötigen eine gültige MCP-Server-URL, auf die Sie über das Menü Kompositum und andere Plattformen zu erhalten. Loggen Sie sich auf der Composio-Website ein, erstellen oder wählen Sie einen MCP-Server und kopieren Sie dessen URL (normalerweise im Format von https://example.com/mcp).
• Schritt 3: Verbindung mit dem Server
  Suchen Sie in der Webversion der Schnittstelle das URL-Eingabefeld (in der Regel an prominenter Stelle auf der Seite) und fügen Sie die URL des MCP-Servers ein, die Sie kopiert haben; klicken Sie auf die Schaltfläche "Verbinden" und das System versucht, eine Verbindung herzustellen. Nach erfolgreichem Verbindungsaufbau wird der Chat-Bildschirm innerhalb weniger Sekunden geladen.
• Schritt 4: Chatten beginnen
  Sobald Sie verbunden sind, geben Sie eine Nachricht in das Eingabefeld ein, z. B. "Wie ist das Wetter heute?" oder "Hilf mir beim Schreiben von Code", und senden Sie sie ab. oder "Schreiben Sie einen Code für mich", und senden Sie sie ab. Der Server antwortet in Echtzeit, und die Schnittstelle zeigt den Inhalt des Dialogs an, die Bedienung ist einfach und intuitiv.

2. lokaler Einsatz und Integration

Wenn Sie es lokal ausführen oder die Funktionalität in Ihr Projekt integrieren möchten, können Sie die folgenden Entwicklungsschritte befolgen.

• Schritt 1: Klonen des GitHub-Repositorys
  Führen Sie den folgenden Befehl im Terminal aus, um das Projekt lokal herunterzuladen:

git clone https://github.com/CopilotKit/open-mcp-client.git

Wechseln Sie dann in das Projektverzeichnis:

cd open-mcp-client

• Schritt 2: Konfigurieren Sie die Umgebungsvariablen für das Stammverzeichnis
  Erstellen Sie im Stammverzeichnis des Projekts die Datei .env Dokumentation:

touch .env

Öffnen Sie die Datei und fügen Sie Folgendes hinzu (ersetzen Sie es durch Ihren tatsächlichen API-Schlüssel):

LANGSMITH_API_KEY=lsv2_...

Dieser Schlüssel wird für die Verbindung mit dem LangSmith-Dienst verwendet und kann durch Registrierung auf der LangSmith-Website erhalten werden.

• Schritt 3: Konfigurieren Sie die Umgebungsvariablen des Agenten
  gehen in agent Mappe:

cd agent
touch .env

existieren agent/.env Datei hinzugefügt wird:

OPENAI_API_KEY=sk-...
LANGSMITH_API_KEY=lsv2_...

OPENAI_API_KEY wird von der OpenAI-Website bezogen und dient der Unterstützung der LangGraph-Agentenfunktion.

• Schritt 4: Abhängigkeiten installieren
  Kehren Sie in das Stammverzeichnis zurück und führen Sie das Programm aus:

npm install

oder pnpm verwenden (empfohlen):

pnpm install

Installieren Sie Abhängigkeiten wie CopilotKit und LangGraph. Stellen Sie sicher, dass Node.js lokal installiert ist (empfohlene Version 18 oder höher).

• Schritt 5: Aktivieren des Entwicklungsmodus
  Das Projekt ist unterteilt in Front-End (/app) und Agenten (/agent) zwei Teile, empfiehlt es sich, diese an zwei getrennten Terminals zu betreiben:
• Klemme 1 (Vorderseite):

  pnpm run dev-frontend
  

• Terminal 2 (Agent):

  pnpm run dev-agent
  

oder beide mit einem einzigen Befehl starten:

pnpm run dev

Rufen Sie nach dem Start die http://localhost:3000Sie können die lokale Schnittstelle sehen.

• Schritt 6: Verbindung und Chat testen
  Geben Sie die URL des MCP-Servers in die lokale Schnittstelle ein (wie bei der Webversion) und klicken Sie auf Verbinden. Nach erfolgreicher Verbindung können Sie Nachrichten eingeben, um die Chatfunktion zu testen.
• Schritt 7: Integration in Ihre Anwendung
  Der Front-End-Code befindet sich in der /app unter Verwendung der CopilotKit-Verwaltungsschnittstelle und der Statussynchronisierung. Der Agentencode befindet sich im Ordner /agent Ordner, um eine Verbindung zum Server auf der Basis von LangGraph herzustellen. Sie können diesen Code wiederverwenden oder in der README.md von GitHub nachschlagen, um die Integration zu ändern.

Detaillierte Bedienung der Hauptfunktionen

• Webbasierter MCP-Client
  Die Webversion ist die beste Funktion: Geben Sie einfach die URL ein, um eine Verbindung herzustellen. Wenn die Verbindung fehlschlägt, prüfen Sie, ob die URL korrekt ist oder ob der Server online ist. Die Schnittstelle wird von CopilotKit für einen reibungslosen Betrieb gesteuert.
• Live-Chat
  Die Chat-Schnittstelle unterstützt Echtzeit-Eingaben und die Anzeige von Antworten, sowohl in der Web- als auch in der lokalen Version. Nach dem Absenden einer Nachricht verarbeitet der LangGraph-Agent die Anfrage und ruft das Server-Tool auf, die Ergebnisse werden automatisch angezeigt.
• Fehlersuche und Anpassung
  Lokale Laufzeit , verfügbare Browser-Entwickler-Tools (F12) zur Anzeige von Protokollen und Netzwerkanfragen . Code quelloffen, kann modifiziert werden /app im Front-End-Stil, oder passen Sie die /agent Die Proxy-Logik in der

caveat

• Die Webversion hängt vom Internet ab, und die Reaktionszeit des Servers kann durch das Internet beeinträchtigt werden.
• Bei lokalen Einsätzen muss der API-Schlüssel korrekt konfiguriert sein, sonst funktioniert der Agent nicht.
• Die Projekte werden häufig aktualisiert und es wird empfohlen, regelmäßig die git pull Holen Sie sich die neueste Version.

Wenn Sie diese Schritte befolgen, können Sie die Vorteile des webbasierten MCP in vollem Umfang nutzen oder tiefere Integrationen entwickeln.