LangGraph 커스텀 챗봇 인터페이스: 에이전트 챗 UI 커스터마이즈 가이드

핵심 메시지

• 랭체인이 공개한 에이전트 챗 UI를 클로드 코드의 도움으로 커스터마이즈해, 더 다듬어진 프로덕션용 프런트엔드를 만들었다.
• public 폴더의 settings.yaml로 로고·챗 오프·도구 표시 방식 등 앱 외형과 동작을 코드 수정 없이 조절할 수 있다.
• 도구 호출 표시를 보기 좋게 바꾸고 답변 후 자동으로 접히게 했으며, 다크 테마·폰트·대화창 폭 등도 설정으로 바꾼다.
• 대화 이력(스레드)은 백엔드에서 보관해 과거 대화를 이어가고, 시스템 프롬프트·모델 등 설정을 API로 당겨와 동적으로 바꿀 수 있다.
• 프런트엔드는 YAML로, 백엔드는 랭그래프 코드로 분리해 둘을 합치면 하나의 전문적인 챗봇이 완성된다.

쉽게 이해하기

이 영상은 랭체인이 오픈소스로 공개한 '에이전트 챗 UI'를 커스터마이즈한 리포지토리를 소개한다. 기본 UI는 깔끔하지만 프로덕션으로 가기에는 표현이 다소 투박하다고 느껴, 발표자가 클로드 코드의 도움을 받아 개선해 반영했다. 결과물은 채팅 인터페이스와 다양한 커스터마이즈 기능을 제공하며, 설치와 구동 방법은 리드미에 정리돼 있다.

설정의 핵심은 public 폴더 아래의 settings.yaml 파일이다. 여기서 앱 내용 수정, 로고와 로고 크기 변경, 대화 시작 메뉴(챗 오프) 추가, 그리고 사용 가이드에 표시되는 풀 디스크립션(MD 파일)을 지정할 수 있다. 실행은 개발자 모드인 'make dev'와 프로덕션 모드인 'make run'으로 나뉘고, 백엔드에서는 랭그래프로 만든 서비스가 돌아간다. .env.example에 랭체인 API 키를 넣어 주는 것만으로 시작할 수 있다.

사용성 측면의 개선이 많다. 도구 호출 표시를 보기 좋게 바꾸고 답변이 끝나면 자동으로 접히게 했으며, 설정에서 자동 접힘을 켜고 끌 수 있다. 대화창 폭 조절, 다크 테마 전환, 폰트 크기와 스타일(세리프 포함) 변경도 지원한다. 채팅 화면에는 무슨 기능인지 알려 주는 설명을 넣을 수 있고, 이 설명과 '자세한 설명 보기' 모달의 내용은 풀 디스크립션 MD 파일을 고치면 즉시 반영된다. 도구 호출을 아예 숨기는 옵션, 대화 중간 메시지를 수정하면 곧바로 결과에 반영되는 편집 기능, 휴먼 인 더 루프도 포함된다.

대화 이력은 스레드로 관리되는데, 프런트엔드가 아니라 백엔드 쪽에서 보관한다. 과거 대화 이력을 보고 이어서 대화할 수 있으며, 스레드 이름 바꾸기·삭제, 전체 삭제, 엔드포인트를 바꾸는 '뉴 커넥션' 기능도 있다. 설정의 어시스턴트 컨피그레이션 메뉴에서는 시스템 프롬프트·모델·최대 검색 결과 수 같은 랭그래프 설정값을 API로 당겨와 동적으로 바꿀 수 있어, 시스템 프롬프트를 수정해 저장하면 새로고침만으로 응답 톤이 달라진다.

정식 배포 시에는 개발용 설정을 내리고 'make run'으로 프로덕션 빌드를 수행하면 디버그 메뉴가 사라진 형태로 서버가 뜬다. 발표자는 학생들이 프로젝트에 스트림릿을 많이 쓰지만, 리액트로 구성된 이 프런트엔드를 붙이면 더 전문적인 결과물을 만들 수 있다고 권한다. 백엔드 서버는 별도로 받아 Tavily 검색 키, 랭스미스 API 키, 오픈AI API 키만 넣고 'uv run langgraph dev'로 실행하며, 앞으로 새로 출시된 랭그래프 V1과 미들웨어 기능에 맞춰 업데이트할 예정이라고 밝혔다.

주요 인사이트

• 프런트엔드 외형·동작을 코드가 아니라 YAML 설정값으로 조절하게 분리하면, 비개발 사용자도 로고·테마·도구 표시를 쉽게 바꿀 수 있다.
• 대화 이력(스레드)을 프런트엔드가 아닌 백엔드에 보관하는 설계는 새로고침·재접속 후에도 과거 대화를 이어갈 수 있게 해 준다.
• 시스템 프롬프트·모델 같은 랭그래프 설정값을 API로 당겨와 동적으로 바꾸는 구조는, 코드 재배포 없이 실시간으로 에이전트 동작을 조정하게 해 준다.
• 도구 호출 표시를 펼치고 접거나 숨기는 옵션은, 디버깅용 정보와 최종 사용자용 화면을 같은 코드에서 손쉽게 전환하도록 돕는다.
• 프런트엔드(YAML)와 백엔드(랭그래프 코드)를 명확히 분리한 구성은, 학습·프로토타이핑에 흔한 스트림릿보다 전문적인 챗봇을 빠르게 만드는 실용적 대안이 된다.

자주 묻는 질문

관련 AI 소식