browser copilot

Browser Copilot は、既存またはカスタム構築された AI アシスタントを使用して日常の Web アプリケーション タスクを支援できるブラウザ拡張機能です。

モチベーション

目標は、増え続ける副操縦士 (AI アシスタント) のセットを実装して使用するための、多用途の UI とシンプルなフレームワークを提供することです。これらの副操縦士は、ブラウザ拡張機能を利用することで、幅広いタスクに役立ちます。

これらの副操縦士ができることの例をいくつか示します。

• ?特定の Web アプリケーションに関連するコパイロットを自動的にアクティブ化します。たとえば、Mail Web アプリがブラウザー タブに読み込まれると、Mail Copilot をアクティブ化できます。
• ?現在の Web アプリケーションから情報を抽出します。たとえば、副操縦士はメール Web アプリから現在のメールの内容を抽出してメールの概要を提供したり、ユーザーがメールの内容について質問したりすることができます。
• Web アプリケーションと対話します。コパイロットは、ユーザーのリクエストに基づいてメール本文を生成できます。 Web アプリのフォーム フィールドに適切なテスト データを入力することもできます。
• ?任意のサービス API を使用して、追加情報を抽出したり、Web アプリのプロセスを自動化したりできます。たとえば、コパイロットは Web アプリのバックエンドから有効な例を取得して、フロントエンド フォームに入力できます。
• ブラウザ拡張機能と AI および LLM 機能を組み合わせることで、他の多くのアイデアや機能を検討できます。

使用法

1. リリースから最新バージョンをダウンロードして、ブラウザに拡張機能をインストールします。 zip ファイルから拡張機能をインストールするには、ブラウザの「拡張機能の管理」画面に移動し、開発者モードを有効にして、拡張機能の zip ファイルをドラッグ アンド ドロップする必要があります。
2. アイコンをクリックして拡張機能を開き、そのベース URL を指定して新しいコパイロットを追加します。ベース URL は、 manifest.jsonおよびlogo.pngの場所に対応する必要があります。たとえば、エージェントがローカルで実行されている場合はhttp://localhost:8000なります。
3. 構成された副操縦士をクリックして新しいチャットを開始するか、副操縦士が自動アクティブ化されている場合は、ブラウザを使用するだけで、副操縦士がアクティブ化されると副操縦士チャットが自動的に表示されます。
4. 好みのプロンプトをチャットから直接保存します。後ですぐにアクセスするには、チャット入力に「/」を入力するだけです。

いつでもコパイロットを閉じて、拡張機能アイコンを使用するか、ページを右クリックしてToggle Browser Copilotを選択することで、後で会話を再開できます。

コパイロットの URL がわからない場合は、このプロジェクトにはエージェント フォルダーに簡単なコパイロットの実装が含まれています。これを開始するには、agent/sample.env をagent/.envにコピーし、その環境変数を変更して、 docker-compose up実行します (これには docker が必要です)。開始したら、URL http://localhost:8000でコパイロットを追加することで、拡張機能を使用するように構成できます。

コパイロットをアクティブ化すると (コパイロットのリストをクリックすると)、いくつかの資格情報が要求されます。 testユーザーとtestパスワードを使用してログインします。

将来的には、コミュニティから提供された副操縦士のカタログを追加する予定です。したがって、新しい副操縦士を作成する場合は、最初のカタログに含めることができるようにお知らせください。

発達

エージェント開発

新しいエージェントを開発するには、agent-mock、agent-simple、または agent-extended フォルダーを参照できます。後者は、エンドポイントとmanifest.jsonに関する適切なドキュメントを備えた最も完全なものです。

開発環境として、このプロジェクトでは devbox と direnv を使用します。

必要な依存関係をすべてインストールするには (devbox と direnv をインストールした後)、次のコマンドを実行します。

devbox run install

次に、 agent-extended/.envに適切な環境変数を設定します。

開発をスピードアップするために、Keycloak セクションをコメントアウトすると、拡張機能でコパイロットを試すたびに認証する必要がなくなります。 Keycloak セクションをコメントアウトしない場合は、 devbox run keycloak実行して認証のために Keycloak を起動し、ログインにtest test資格情報を使用する必要があります (ブラウザ拡張機能によって要求された場合)。

エージェントを開発モードで実行し、エージェントのソース ファイルで変更が検出されるたびに自動ホットリロードを有効にするには、次のコマンドを実行します。

devbox run agent

エージェントをデバッグする場合は、好みの IDE でエージェントを起動し、devbox によって作成された関連する仮想環境を指定し、IDE のデバッガー機能を使用してメイン スクリプトを実行できます。

エージェントの詳細については、その Readme を参照してください。

ブラウザ拡張機能の開発

ブラウザ拡張機能に変更を加える予定がある場合は、ブラウザ拡張フォルダを参照してください。

ホットリロード機能を備えた Chrome ブラウザを起動するには、次のコマンドを使用します。

devbox run browser

デフォルトのブラウザ設定を変更するには、browser-extension/vite.config.ts を参照してください。

拡張機能の最終配布をビルドするには、次のコマンドを実行します。

devbox run build

貢献する

あらゆる種類の貢献を歓迎します。

• このプロジェクトにスターを付けると、コミュニティ全体の目に留まりやすくなります。これにより、あなたがこのプロジェクトに興味を持っていることがわかり、より多くの努力を注ぐ動機になります。
• ?このプロジェクトについて広めてください。これに関する出版物 (ツイート、StackOverflow での言及、LinkedIn の投稿、Medium の記事など) を作成した場合は、お知らせください。将来的には、そのような出版物への参照を追加する予定です。
• ?問題を作成したり、リポジトリ内でディスカッションを開いたりして、質問したり改善をリクエストしたりできます。
• ?‍ コーディングが好きな場合は、新しいエージェントを構築して、ブラウザ拡張機能や一般的な改善の実装に役立てることができます。