langchain-ai/agent-chat-ui

어떤 프로젝트인가요?

핵심 기능

• 01Python 또는 TypeScript로 작성되고 messages 키를 사용하는 모든 LangGraph 서버와 채팅합니다.
• 02화면에 표시되는 설정 양식이나 환경 변수로 설정할 수 있습니다.
• 03스트리밍 중 또는 영구적으로 메시지가 표시되지 않도록 숨깁니다.
• 04채팅 옆의 패널에 아티팩트를 표시합니다.
• 05LangSmith API 키를 서버에 보관하는 API 패스스루 경로가 포함되어 있습니다.

활용 사례

• 개발 중 바로 사용할 수 있는 채팅 인터페이스로 LangGraph 에이전트를 테스트합니다.
• 팀에 내부 LangGraph 에이전트용 브라우저 프런트엔드를 제공합니다.
• 작동하는 Next.js 예제를 포크해 맞춤 채팅 UI를 시작합니다.

빠른 시작

1. 1

   npx 명령으로 프로젝트를 생성합니다

   npx create-agent-chat-app
2. 2

   pnpm으로 의존성을 설치합니다

   pnpm install
3. 3

   앱을 실행하고 http://localhost:3000 을 엽니다

   pnpm dev

사용 전 알아둘 점

• !배포된 LangGraph 서버에 연결하려면 LangSmith API 키가 필요합니다.
• !README에는 API 패스스루 설정이 호출자를 인증하지 않으므로 배포 전에 보안을 적용해야 한다고 안내되어 있습니다.

토픽

자주 묻는 질문

agent-chat-ui은(는) 무엇인가요?

Python 또는 TypeScript로 작성되고 messages 키를 제공하는 모든 LangGraph 서버와 대화할 수 있는 Next.js 채팅 인터페이스입니다. Agent Chat UI는 LangGraph 서버에 연결해 서버에서 실행되는 에이전트와 채팅할 수 있는 Next.js 웹 앱입니다. 배포 URL과 assistant 또는 graph ID를 지정하면 메시지를 전송하고, 스트리밍 응답을 채팅 화면에 표시합니다. 그래프가 messages 키를 사용하는 한 Python이나 TypeScript로 작성된 LangGraph 서버에서 모두 사용할 수 있습니다.

agent-chat-ui은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

agent-chat-ui은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

agent-chat-ui은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. agent-chat-ui의 마지막 커밋은 2026년 10월 19일입니다.

agent-chat-ui은(는) 어디에 사용할 수 있나요?

개발 중 바로 사용할 수 있는 채팅 인터페이스로 LangGraph 에이전트를 테스트합니다. 팀에 내부 LangGraph 에이전트용 브라우저 프런트엔드를 제공합니다. 작동하는 Next.js 예제를 포크해 맞춤 채팅 UI를 시작합니다.

agent-chat-ui는 어떻게 설치하나요?

npx 명령으로 프로젝트를 생성합니다: npx create-agent-chat-app pnpm으로 의존성을 설치합니다: pnpm install 앱을 실행하고 http://localhost:3000 을 엽니다: pnpm dev

agent-chat-ui은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/langchain-ai/agent-chat-ui