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를 통합하는 방법을 보여줍니다

전제 조건

• 파이썬 3.11
• node.js v20.18.0
• NPM V10.9.2
• 원사 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 도구를 사용하여 생성되며 Asistant-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 : Streaming Response를위한 Next.js + Vercel AI SDK
• UI 구성 요소 : 채팅 인터페이스 구성 요소에 대한 어시스턴트 -UI
• 에이전트 프레임 워크 : 에이전트 오케스트레이션을위한 Langgraph

기여

개선 제안이있는 경우 문제를 열거 나 풀 요청을 제출하십시오.