![見出し画像](https://assets.st-note.com/production/uploads/images/169826591/rectangle_large_type_2_394cbfac952c992df063167a99b61b8a.jpeg?width=1200)
Langchain: 新しいエージェントUI - メモリー、知識、ツール、推論を備えたエージェントを構築! (オープンソース)
3,913 文字
メモリー、知識、ツール、推論を備えたエージェントを構築できる、史上初のエージェントUIを発見しました。これは、LangchainエージェントとCo-agentsを統合したオープンソースのフレームワークです。Co-agentsを知らない方のために説明すると、これはエージェントを統合した次世代AIアプリケーションを構築することができます。これらは、Langchainエージェントによって駆動される、アプリ内で作成できる本番用グレードのエージェントで、リアルタイムでユーザーと考え、適応し、協力することができます。
Copilotkitは、Co-agentsをホストするオープンソースのフレームワークで、開発者がAI Co-pilotsをアプリケーションにシームレスに統合することを可能にします。カスタマイズ可能なUIコンポーネント、リアルタイムのユーザー対応、アプリケーション固有のコンテキストを提供し、チャット、提案、生成的インターフェースなどのインテリジェントでインタラクティブな機能を作成するためのアクション可能なAPIも提供します。
LangchainとLang graphの組み込みサポートにより、Copilotkitはユーザー体験を向上させ、ワークフローを効率化できる、適応性のある本番用グレードのAIエージェントの作成を可能にします。冒頭で述べたように、Copilotkitの中のCo-agentsは、次世代AIアプリのためのリアルタイムで適応的なコンテキスト認識エージェントを可能にします。これはLang graphによって駆動され、シームレスな状態同期、生成的UI、そしてヒューマンインザループのチェックポイントを提供し、魅力的でインテリジェントなユーザー体験をもたらします。
では、このUIでCo-agentsの実際の動作を見て、何ができるのかをよりよく理解しましょう。
こんにちは、Copilotkitのグラです。今日は、Lang graphエージェントの上にフロントエンドを立ち上げる方法が、いかに簡単かをお見せします。Lang graphでエージェントを構築し、Lang graph Studioで試してみたものの、本番環境でどのように見えるのかを確認したい場合、Copilotkitを使えばいかに簡単にできるかをお見せします。
まず、Lang graph studioにアクセスし、Lang graphエージェントを実行するこのフォルダを開きます。ローカルホストURLが表示されているので、これをコピーしてVisual Studioに移動し、このデモに新しいURLを貼り付けます。このデモの設定は、新しい環境変数の追加とこの新しいURLの追加以外はほとんど行っていません。
保存して、念のためにCopilotバックエンドを再起動します。実行されているようなので、ローカルホストで更新し、「上司へのメールを書いてください」と入力してみましょう。Lang graph Studioを見ると、上司へのメールが書かれていることが分かります。
これだけです。次回エージェントを構築する際は、Copilotkitのデモを取得し、Lang graph studioのURLをそのデモに入れるだけで、90%機能するプロトタイプを提供できます。これにより、完成に近づいた感覚が得られ、ステークホルダーの早期の支持を得ることができます。
このエージェントUIをローカルにインストールするには、いくつかの前提条件が必要です。まず、Lang graphをインストールする必要があります。これは、Lang graphエージェントでエージェントを事前に作成する必要があるためです。環境変数を設定するためのコードエディタとしてVS Codeをインストールし、プログラミング言語としてPythonもインストールする必要があります。リポジトリをコンピュータにクローンするためのGit、さらにnpmもインストールする必要があります。最後に、Co-agentフレームワークをインストールする必要があります。
インストールは非常に簡単で、npm、yarn、Bunのいずれかを使用してインストールできます。コマンドをコピーしてコマンドプロンプトを開き、貼り付けてEnterを押します。これによりCo-agentsのためのCopilotkitのReact UIがインストールされます。インストールが完了したら、GitHubリポジトリに戻って開始できます。
開始するには、CopilotkitのGitHubリポジトリに移動します。緑色のボタンをクリックし、クリップボードにコピーします。URLをコピーしたら、コマンドプロンプトを開き、「git clone」と入力してリンクを貼り付け、Enterを押します。これでリポジトリのクローンが開始されます。かなり大きなファイルなので、時間がかかる場合がありますが、クローンが完了したら次に進めます。
まず、Copilotkitディレクトリに移動します。コマンドプロンプトで「cd copilokit」と入力します。次に、Copilot agent QAディレクトリに移動します。なぜか正しいパスをコピーする必要があるので、「cd example」とします。このパスをコピーすると簡単です。
エージェントディレクトリに移動したら、poetryをインストールできます。このコマンドをコピーしてインストールします。poetryがインストールされたら、エージェントディレクトリ内に.envファイルを作成できます。VS Codeを開き、新しいウィンドウを作成して、Copilotkitフォルダを開きます。クローンした場所を見つけるだけです。
私は目が見えにくいので少し時間がかかりましたが、見つかりました。Copilotkitディレクトリまたはフォルダ内で、exampleタブに移動し、Co-agents QAデモを見つけます。これをクリックし、agentに移動します。新しいファイルを作成する必要があります。agentタブを右クリックし、新しいファイルを作成します。クリックして.envという名前を付けます。
リポジトリに戻り、「OPENAI_API_KEY=」をコピーし、作成した新しいファイルに貼り付けます。APIキーを貼り付けたら、ファイルをクリックして保存し、VS Codeを閉じることができます。poetryでデモを実行することもできますが、UIを実行します。
元のパスに戻り、Co-agent QAではなく、UIに移動します。UIに移動したら、agentタブで設定した.envファイルを新しいUIタブにコピーして貼り付けます。完了したら、コマンドプロンプトで「pnpm run dev」コマンドを実行し、Enterを押します。その後、ローカルホストをクリックすると、数秒で実行されるはずです。読み込みに時間がかかる場合がありますが、すぐにローカルホストで利用可能になるはずです。
これでエージェントが完全に動作するようになりました。必要なパスにCopilotkitがインストールされていないためコンソールエラーが出ているので、正しいパスに追加してから、このメールの例でエージェントUIにアクセスできます。また、Lang graph Studioを横に開いておけば、そちらでも何が起こっているかを視覚化できます。
この動画が気に入って、チャンネルをサポートしたい場合は、下のスーパーサンクスオプションを通じて寄付を検討するか、プライベートDiscordへの参加を検討してください。Discordでは、毎月無料で様々なAIツールのサブスクリプションにアクセスでき、毎日のAIニュースや独占コンテンツなど、さらに多くのものを利用できます。
もちろん、これはQ&AデモでUIを使用する例のリポジトリに過ぎませんが、他にも多くの例があり、簡単に始めることができます。これらの異なる例を使ってエージェントUIを起動し、好みのコンポーネントをコピー&ペーストして、独自のエージェントUIで使用することができます。
私たちが作業していたデモはQ&Aの例でした。質問をしたりメールを書いたりするようなコマンドを実行するためのQ&A用に同じエージェントUIを使用したい場合、これは理想的な方法です。同様に、他にも多くの例があり、他の例からコンポーネントを使用して、本番環境で使用できる独自のエージェントUIのフローを構築することもできます。
今日の動画はこれで以上です。LangchainとCo-agentsの統合にはまだまだ多くのことがあるので、ドキュメントを読むことを強くお勧めします。多くのチュートリアルがあり、さらに多くのアップデートが近日中に予定されています。スターを付けることをお勧めします。彼らは継続的に素晴らしいものを提供しており、このチャンネルの視聴者の多くに役立つものを提供しているため、私は彼らに関する動画を多く作っています。
以上です。視聴ありがとうございました。これらのリンクは全て説明欄に載せておきます。Patreonでフォローし、Twitterでフォローし、最後にYouTubeでフォローしてください。サブスクリプションを行い、通知ベルをオンにして、この動画にいいねを付け、以前の動画もチェックしてください。きっと役立つコンテンツがたくさんあります。
ご視聴ありがとうございました。また近いうちにお会いしましょう。それではさようなら。