mcp-ui: eine saubere KI-Chat-Schnittstelle auf der Grundlage des MCP-Protokolls

Allgemeine Einführung

mcp-ui ist ein Open-Source-Projekt des Entwicklers machaojin1917939763, das auf dem Model Context Protocol (MCP) Protokoll aufbaut und eine intelligente Chat-Anwendung ist, die sowohl Web- als auch Desktop-Umgebungen unterstützt. mcp ist Anthropisch mcp-ui ist ein offenes Protokoll, das es KI-Modellen ermöglicht, externe Tools und Dienste aufzurufen. mcp-ui integriert APIs von OpenAI und Anthropic und bietet eine saubere und moderne Chat-Schnittstelle. Benutzer können damit mit der KI in Dialog treten und Funktionen wie Browser und Dateimanipulation aufrufen. Das mit Vue.js und Electron erstellte Projekt unterstützt den plattformübergreifenden Einsatz und ist für Entwickler und KI-Enthusiasten geeignet.

Funktionsliste

• Bietet eine saubere und moderne Chat-Schnittstelle mit Unterstützung für Markdown und Code-Hervorhebung.
• etw. unterstützen MCP Protokollen kann die KI externe Tools wie Browser-Automatisierung und Dateimanipulation aufrufen.
• Kompatibel mit OpenAI und den APIs von Anthropic, mit vom Benutzer auswählbaren Modellen.
• Ermöglicht benutzerdefinierte Konfigurationen, einschließlich API-Schlüssel, Basis-URLs und Modelloptionen.
• Unterstützung für das Hinzufügen benutzerdefinierter Werkzeuge zur Erweiterung der Funktionalität.
• Eine Desktop-Version der App ist verfügbar und ist mit Windows, Mac und Linux kompatibel.
• Integration von MCP-Backend-Diensten zur Unterstützung des lokalen Betriebs.

Hilfe verwenden

mcp-ui ist ein Open-Source-Chat-Tool, das die Benutzer über den Quellcode bereitstellen müssen. Nachfolgend finden Sie eine detaillierte Installations- und Nutzungsanleitung, die Ihnen einen schnellen Einstieg ermöglicht.

Einbauverfahren

1. Vorbereiten der Umgebung
   Vergewissern Sie sich, bevor Sie beginnen, dass Ihr Computer die folgenden Anforderungen erfüllt:
   • Node.js(Version 16.0.0 oder höher).
   • npm(Version 8.0.0 oder höher).
   • Git (zum Herunterladen von Code).
   • Moderne Browser (z.B. Chrome, Firefox, Safari, Edge neueste Versionen).
   • Unterstützte Systeme für den Desktop: Windows 10+, macOS 10.15+ oder Ubuntu 20.04+.
     Prüfen Sie, ob die Umgebung betriebsbereit ist:

   node -v
   npm -v
   git --version

2. Quellcode herunterladen
   Klonen Sie den Code lokal, indem Sie den folgenden Befehl in das Terminal eingeben:

   git clone https://github.com/machaojin1917939763/mcp-ui.git
   

   Wechseln Sie dann in das Projektverzeichnis:

   cd mcp-ui
   

3. Installation von Abhängigkeiten
   Im Projektverzeichnis ausführen:

   npm install
   

   Dadurch werden die erforderlichen Komponenten wie Vue.js, Electron usw. installiert. Dieser Vorgang kann einige Minuten dauern.

4. Umgebungsvariablen konfigurieren
   Kopieren Sie die Beispielkonfigurationsdatei und bearbeiten Sie sie:

   cp .env.example .env
   

   Öffnen mit einem Texteditor .envfüllen Sie die folgenden Felder aus:

   VITE_API_KEY=your_api_key_here        # 你的 OpenAI 或 Anthropic API 密钥
   VITE_MODEL_PROVIDER=openai            # 或 anthropic
   MCP_SERVER_PORT=3001                  # MCP 服务端口，默认 3001
   

   Speichern und schließen Sie die Datei.

5. eine Anwendung starten
   • Web-Version::
     Führen Sie das Frontend in einem Terminal aus:

     npm run dev
     

     Führen Sie das MCP-Backend auf einem anderen Terminal aus:

     npm run mcp:server
     

     Öffnen Sie http://localhost:5173 in Ihrem Browser (Ports können variieren, siehe Terminal-Anweisungen).

   • Desktop-Version::
     Führen Sie den folgenden Befehl aus, um den Entwicklungsmodus von Electron zu starten:

     npm run electron:dev
     

     Das Fenster der Desktop-Anwendung öffnet sich automatisch.

6. Produktionsversion erstellen (optional)
   • Web-Version:

     npm run build
     

     Die erzeugten Dateien befinden sich im Verzeichnis dist Ordner, der auf einem statischen Server bereitgestellt werden kann.

   • Desktop-Version:

     npm run electron:build          # 构建所有平台
     npm run electron:buildwin       # Windows
     npm run electron:buildmac       # macOS
     npm run electron:buildlinux     # Linux
     

     Die Ergebnisse des Builds sind in der Datei dist_electron Mappe.

Hauptfunktionen

Konfigurationsmodell

• Öffnen Sie die App und klicken Sie auf das Symbol Einstellungen in der oberen rechten Ecke (⚙️).
• Wählen Sie im Bereich Einstellungen:
  • Modellanbieter (OpenAI oder Anthropic).
  • Geben Sie den API-Schlüssel ein (Sie erhalten ihn von der offiziellen Website von OpenAI oder Anthropic).
  • Legen Sie die API-Basis-URL fest (optional, Standard ist gut).
  • Wählen Sie das spezifische Modell (z. B. GPT-4 oder Claude).
• Klicken Sie auf Speichern, damit die Konfiguration wirksam wird.

Verwendung der Chat-Funktion

• Geben Sie eine Frage oder einen Befehl in das Eingabefeld am unteren Rand ein.
• Drücken Sie die Eingabetaste oder klicken Sie auf die Schaltfläche Senden, und die KI wird Ihnen antworten.
• Die Markdown-Formatierung wird unterstützt und der Code wird hervorgehoben.
• Beispiel: Eingabe "Helfen Sie mir, das Wetter in Peking heute zu überprüfen", KI ruft das Wetter-Tool auf und liefert das Ergebnis.

MCP-Werkzeug Aufruf

• Die folgenden Werkzeuge sind in mcp-ui integriert:
  • Browser-Automatisierung: Geben Sie "Google-Suche öffnen xAI" ein und die KI steuert die Browser-Ausführung.
  • Wetter: Geben Sie "Wie ist das Wetter in Shanghai" ein und Sie erhalten Echtzeitdaten.
  • Nachrichtensuche: Geben Sie "aktuelle Technologienachrichten" ein, um die neuesten Inhalte zu erhalten.
  • Dateioperationen (Desktop-Version): Geben Sie "read desktop/test.txt" ein, und die KI wird den Inhalt der Datei zurückgeben.
• Es sind keine weiteren Aktionen erforderlich, sondern die Anfrage erfolgt direkt im Chatfeld.

Featured Function Bedienung

Desktop-Erfahrung

• Die Desktop-Version ist über Electron implementiert und kann nach der Installation auch ohne Browser ausgeführt werden.
• In der Desktop-Version ist die Dateibearbeitung durch den direkten Zugriff auf das lokale Dateisystem einfacher.
• Die Arbeitsweise ist dieselbe wie bei der Web-Version, und die Schnittstelle wird nach dem Start automatisch geladen.

Werkzeuge zur Anpassung

• Compiler mcp_server.jsund fügen neue Werkzeuge hinzu.
• Beispiel: Hinzufügen eines Berechnungswerkzeugs:

  const tools = [
  {
  name: "calculator",
  description: "简单计算器",
  parameters: {
  type: "object",
  properties: {
  expression: { type: "string", description: "计算表达式，如 2+3" }
  },
  required: ["expression"]
  }
  }
  ];
  

• Starten Sie den MCP-Dienst neu (npm run mcp:server), kann im Chat verwendet werden.

caveat

• API-Schlüssel müssen ordnungsgemäß gespeichert werden, um ein Auslaufen zu verhindern.
• Wenn der Start fehlschlägt, überprüfen Sie, ob die Ports (standardmäßig 5173 und 3001) nicht belegt sind.
• Desktop-Builds benötigen möglicherweise mehr Speicherplatz, um ausreichende Systemressourcen zu gewährleisten.

Mit diesen Schritten können Sie mcp-ui problemlos einsetzen und verwenden, um mit AI zu interagieren und externe Tools aufzurufen.

Anwendungsszenario

1. Persönlicher Assistent
   Verwenden Sie mcp-ui, um das Wetter zu überprüfen, nach Nachrichten zu suchen oder Dateien zu verwalten, um Ihre tägliche Effizienz zu steigern.
2. Entwickler-Tests
   Entwickler können damit MCP-Protokolle und KI-Modelle testen und die Wirksamkeit von Tool-Aufrufen schnell überprüfen.
3. Pädagogisches Lernen
   Studenten oder Forscher lernen mit mcp-ui, wie KI mit externen Diensten interagiert, mit einer intuitiven und leicht verständlichen Schnittstelle.

QA

1. Welche Modelle werden von mcp-ui unterstützt?
   Alle API-kompatiblen Modelle von OpenAI und Anthropic werden unterstützt, und Benutzer können in den Einstellungen bestimmte Modelle auswählen.
2. Was ist der Unterschied zwischen der Desktop- und der Web-Version?
   Die Desktop-Version benötigt keinen Browser und unterstützt lokale Dateioperationen; die Web-Version ist leichter und für die Online-Nutzung geeignet.
3. Wie kann ich ein neues Werkzeug hinzufügen?
   Änderungen mcp_server.jslegen Sie den Namen und die Parameter des Tools fest und starten Sie den Dienst neu, damit er wirksam wird.