langserve assistant ui

langserve-assistant-ui

Langserve、Langgraph、およびFastapiを組み合わせて、最新のUIを持つAIエージェントを作成するデモンストレーションプロジェクト。このプロジェクトでは、アシスタント-UIとnext.js vercel AI SDKを使用して、シームレスなチャットインターフェイスを使用します。

概要

このプロジェクトは次のことを示しています。

• langserveを使用してFastapiサーバーで実行されているLanggraphエージェント
• フロントエンドへのリアルタイム応答ストリーミング
• Assistant-UIとnext.jsで構築された最新のチャットUI
• 外部ツールとAPIを統合する方法を示します

前提条件

• Python 3.11
• node.js v20.18.0
• NPM V10.9.2
• YARN V1.22.22

プロジェクト構造

 langserve-assistant-ui/
├── backend/         # FastAPI + LangServe server
└── frontend/        # Next.js + assistant-ui client

セットアップ手順

環境変数を設定します

./backendに移動し、 .envファイルを作成します。 .env.exampleで例に従ってください。

バックエンドのセットアップ

バックエンドは、Langchain CLIを使用して構築され、エージェント作成のためにLanggraphのcreate_react_agentを使用します。

 cd backend
poetry install
poetry run python -m app.server

フロントエンドのセットアップ

フロントエンドは、アシスタント-UI CLIツールを使用して生成され、Assistant-UIのスレッドコンポーネントを使用してVercel AI SDKのUsechatフックを実装します。

 cd frontend
yarn install
yarn dev

機能と例

直接ツールの相互作用

単純なプロンプトを使用して、ツールを直接クエリすることができます。

 Example: "What is the stock price of Apple?"

エージェントベースの相互作用

エージェントは、複数のステップを必要とするより複雑なクエリを処理できます。

 Example: "What is the weather in San Francisco?"

技術的な詳細

• バックエンド：APIエンドポイントとエージェントホスティング用のFastapi + Langserve
• FrontEnd ：next.js + vercelai sdkストリーミング応答
• UIコンポーネント：チャットインターフェイスコンポーネントのアシスタントUI
• エージェントフレームワーク：エージェントオーケストレーションのランググラフ

貢献

改善の提案がある場合は、お気軽に問題を開いたり、プルリクエストを送信したりしてください。