browser copilot

Browser Copilot ist eine Browsererweiterung, die es Ihnen ermöglicht, vorhandene oder benutzerdefinierte KI-Assistenten zu verwenden, um Sie bei alltäglichen Webanwendungsaufgaben zu unterstützen.

Motivation

Das Ziel besteht darin, eine vielseitige Benutzeroberfläche und ein einfaches Framework bereitzustellen, um eine immer größere Anzahl von Copiloten (KI-Assistenten) zu implementieren und zu nutzen. Diese Copiloten können bei einer Vielzahl von Aufgaben helfen, indem sie die Browsererweiterungsfunktionen nutzen.

Hier sind einige Beispiele dafür, was diese Copiloten tun können:

• ? Aktivieren Sie automatisch Copiloten, die für bestimmte Webanwendungen relevant sind. Beispielsweise kann ein Mail-Copilot aktiviert werden, wenn eine Mail-Web-App in einem Browser-Tab geladen wird.
• ? Extrahieren Sie Informationen aus der aktuellen Webanwendung. Beispielsweise könnte der Copilot aktuelle E-Mail-Inhalte aus einer Mail-Web-App extrahieren und eine Zusammenfassung der E-Mails bereitstellen, oder Benutzer könnten Fragen zum E-Mail-Inhalt stellen.
• Interagieren Sie mit Webanwendungen. Ein Copilot könnte E-Mail-Texte basierend auf Benutzeranfragen generieren. Es könnte auch Web-App-Formularfelder mit entsprechenden Testdaten füllen.
• ? Verwenden Sie eine beliebige Service-API, um zusätzliche Informationen zu extrahieren oder Web-App-Prozesse zu automatisieren. Beispielsweise könnte der Copilot gültige Beispiele aus dem Web-App-Backend abrufen, um Frontend-Formulare auszufüllen.
• Durch die Kombination der Browser-Erweiterung mit KI- und LLM-Funktionen können viele weitere Ideen und Funktionen erkundet werden.

Verwendung

1. Installieren Sie die Erweiterung in Ihrem Browser, indem Sie die neueste Version der Releases herunterladen. Um eine Erweiterung aus einer ZIP-Datei zu installieren, müssen Sie zum Bildschirm „Erweiterung verwalten“ Ihres Browsers gehen, den Entwicklermodus aktivieren und die ZIP-Datei der Erweiterung per Drag & Drop verschieben.
2. Öffnen Sie die Erweiterung, indem Sie auf das entsprechende Symbol klicken, und fügen Sie einen neuen Copiloten hinzu, indem Sie dessen Basis-URL angeben. Die Basis-URL sollte dem Speicherort von manifest.json und logo.png entsprechen, zum Beispiel: http://localhost:8000 wenn Ihr Agent lokal ausgeführt wird.
3. Starten Sie einen neuen Chat, indem Sie auf einen konfigurierten Copiloten klicken. Wenn der Copilot über eine automatische Aktivierung verfügt, verwenden Sie einfach Ihren Browser. Der Copilot-Chat wird automatisch angezeigt, wenn der Copilot aktiviert wird.
4. Speichern Sie Ihre bevorzugten Eingabeaufforderungen direkt aus dem Chat. Um später schnell darauf zuzugreifen, geben Sie einfach „/“ in die Chat-Eingabe ein.

Sie können den Copilot jederzeit schließen, um die Konversation später fortzusetzen, indem Sie auf das Erweiterungssymbol klicken oder mit der rechten Maustaste auf die Seite klicken und Toggle Browser Copilot auswählen.

Wenn Sie keine Copilot-URLs kennen, enthält dieses Projekt eine einfache Copilot-Implementierung im Agentenordner. Sie können es starten, indem Sie agent/sample.env nach agent/.env kopieren, die Umgebungsvariablen darauf ändern und docker-compose up ausführen (dafür ist Docker erforderlich). Nach dem Start können Sie Ihre Erweiterung für die Verwendung konfigurieren, indem Sie einen Copiloten mit der URL http://localhost:8000 hinzufügen.

Wenn Sie den Copiloten aktivieren (klicken Sie auf die Copilotenliste), werden einige Anmeldeinformationen angefordert. Verwenden Sie zum Anmelden den test und test .

In Zukunft planen wir, einen Katalog von Copiloten hinzuzufügen, die von der Community bereitgestellt werden. Wenn Sie daher neue Copiloten erstellen, teilen Sie uns dies bitte mit , damit wir diese in den Erstkatalog aufnehmen können.

Entwicklung

Agentenentwicklung

Um einen neuen Agenten zu entwickeln, können Sie auf die Ordner agent-mock, agent-simple oder agent-extended zurückgreifen. Letzteres ist das vollständigste mit ordnungsgemäßer Dokumentation zu Endpunkten und manifest.json .

Für die Entwicklungsumgebung verwendet dieses Projekt devbox und direnv.

Um alle erforderlichen Abhängigkeiten zu installieren (nach der Installation von devbox und direnv), führen Sie den folgenden Befehl aus:

devbox run install

Legen Sie als Nächstes die entsprechenden Umgebungsvariablen in agent-extended/.env fest.

Um die Entwicklung zu beschleunigen, können Sie den Abschnitt „Keycloak“ auskommentieren, sodass Sie sich nicht jedes Mal authentifizieren müssen, wenn Sie Ihren Copiloten in der Erweiterung ausprobieren möchten. Wenn Sie den Abschnitt „Keycloak“ nicht auskommentieren, müssen Sie devbox run keycloak test test die Anmeldung verwenden (wenn von der Browsererweiterung dazu aufgefordert).

Führen Sie den folgenden Befehl aus, um den Agenten im Entwicklungsmodus auszuführen und das automatische Hot-Neuladen zu aktivieren, sobald Änderungen in den Quelldateien des Agenten erkannt werden:

devbox run agent

Wenn Sie den Agenten debuggen möchten, können Sie den Agenten mit Ihrer bevorzugten IDE starten, auf die relevante virtuelle Umgebung verweisen, die von devbox erstellt wurde, und die Debugger-Funktionen der IDE verwenden, um das Hauptskript auszuführen.

Weitere Informationen zum Agenten finden Sie in der Readme-Datei.

Entwicklung von Browsererweiterungen

Wenn Sie Änderungen an der Browsererweiterung vornehmen möchten, sehen Sie im Ordner „browser-extension“ nach.

Um einen Chrome-Browser mit Hot-Reload-Funktionen zu starten, verwenden Sie den folgenden Befehl:

devbox run browser

Um die Standardbrowsereinstellungen zu ändern, konsultieren Sie browser-extension/vite.config.ts.

Um die endgültige Distribution der Erweiterung zu erstellen, führen Sie den folgenden Befehl aus:

devbox run build

Mitwirken

Wir freuen uns über Beiträge aller Art!

• Geben Sie diesem Projekt einen Stern, um es für die gesamte Community sichtbarer zu machen. Es zeigt uns, dass Sie an diesem Projekt interessiert sind, und motiviert uns, mehr Aufwand in dieses Projekt zu investieren.
• ? Verbreiten Sie die Nachricht über dieses Projekt. Wenn Sie darüber Veröffentlichungen (Tweets, StackOverflow-Erwähnungen, LinkedIn-Beiträge, Medium-Artikel usw.) veröffentlichen, teilen Sie uns dies bitte mit. Wir planen, in Zukunft Verweise auf solche Veröffentlichungen hinzuzufügen.
• ? Stellen Sie Fragen und fordern Sie Verbesserungen an, indem Sie im Repository Probleme erstellen oder Diskussionen eröffnen.
• ?‍ Wenn Sie Spaß am Programmieren haben, können Sie neue Agenten erstellen und uns dabei helfen, Browser-Erweiterungsfunktionen oder allgemeine Verbesserungen zu implementieren.