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