인공지능과 최신 기술의 발전으로 인해, 개인의 연구 활동이 더욱 효율적이고 체계적으로 이루어질 수 있는 도구들이 필요해지고 있습니다. 이번 글에서는 LangGraph와 CopilotKit을 활용하여 풀스택 AI 앱을 구현하는 방법을 자세히 다루며, 이를 통해 연구 질문을 설정하고 자동으로 초안을 생성하는 웹 애플리케이션을 만드는 방법을 알아보겠습니다. 이 과정을 통해 여러분은 이러한 기술을 활용하여 자신의 AI 도구를 구축할 수 있는 통찰력을 얻게 될 것입니다.
LangGraph와 CopilotKit 소개
LangGraph는 파이썬 기반의 인공지능 모델을 구축할 수 있는 프레임워크입니다. CopilotKit은 다양한 AI 모델과의 통합을 지원하며, 특히 연구 도구와 같은 응용 프로그램 개발에 유용합니다. 이 두 가지 도구를 조합하면, 사용자는 자연어 처리 기능을 접목한 웹 애플리케이션을 손쉽게 구현할 수 있습니다.
웹 애플리케이션의 기능 개요
이번 프로젝트의 핵심 기능은 사용자가 입력한 연구 질문에 대해 관련된 리소스를 검색하고, 이를 바탕으로 초안을 자동 생성하는 것입니다. 사용자는 질문을 입력하고, 오른쪽 패널에서 추가적인 질문을 할 수 있으며, 애플리케이션은 OpenAI, Anthropic 또는 Google의 인공지능 모델을 활용하여 자동으로 리포트를 생성합니다.
애플리케이션 아키텍처 설계
애플리케이션은 두 가지 주요 컴포넌트로 구성됩니다: UI 레이어(Next.js로 개발)와 에이전트 아키텍처(파이썬 기반). UI 레이어는 사용자의 인터페이스를 제공하고, 에이전트 아키텍처는 인공지능 모델과의 실제 상호작용을 처리합니다.
- UI 레이어: Next.js를 사용하여 구성되며, 사용자가 입력하는 연구 질문과 리소스를 관리하는 다양한 컴포넌트가 포함됩니다. 주요 컴포넌트는 리서치 캔버스, 리소스 관리, 그리고 모델 선택기입니다.
- 에이전트 아키텍처: 파이썬으로 구축되며, 여러 인공지능 모델(예: OpenAI, Google)과의 상호작용을 관리합니다. 이 과정에서는 FastAPI를 사용하여 HTTP 서버를 구성합니다.
환경 설정 및 API 키 준비
애플리케이션을 구축하기 위해서는 먼저 환경 변수를 설정해야 합니다. OpenAI 및 Tav API 키를 .env 파일에 추가해야 하며, 이를 통해 외부 API와 통신할 수 있습니다. 이 과정에서 Python 3.12 이상의 버전을 사용하도록 해야 하며, Node.js의 최신 버전도 필요합니다.
UI 레이어 구축 과정
UI 레이어는 사용자가 직접 상호작용하는 부분으로, 여러 컴포넌트로 나누어져 있습니다.
- 모델 선택기: 사용자가 원하는 AI 모델을 선택할 수 있게 해줍니다.
- 리서치 캔버스: 사용자가 연구 질문을 입력하고, 리소스를 추가하거나 제거할 수 있는 기능을 제공합니다.
- 리소스 관리: 추가된 리소스를 나열하고, 이를 수정하거나 삭제할 수 있는 기능을 제공합니다.
UI를 구성하기 위해 다음과 같은 단계가 필요합니다:
- Next.js 프로젝트 생성
- 필요한 패키지 및 라이브러리 설치
- 주요 컴포넌트 구현
이 때, API와의 연결을 위해 `route.ts`에서 OpenAI와 CopilotKit의 의존성을 설정하고, UI에서 요청을 처리할 수 있도록 구축합니다.
에이전트 아키텍처 구현
에이전트 아키텍처는 ‘LangGraph’를 활용하여 구축됩니다. 이 과정에서는 FastAPI를 활용해 HTTP 서버를 설정하고, 독립적으로 실행되는 에이전트 아키텍처를 구현할 수 있습니다. 주요 단계는 다음과 같습니다:
- 작업 흐름 그래프 초기화: LangGraph에서 사용할 작업 흐름을 정의합니다. 각 노드가 어떻게 연결되는지를 설명하며, 이를 통해 다양한 사용 사례를 수용할 수 있습니다.=
- 핵심 기능 구현:
– 채팅 노드: 사용자와 AI 간의 상호작용을 처리합니다.
– 자원 다운로드: 웹 페이지의 내용을 텍스트로 변환하여 AI 모델이 이해할 수 있도록 합니다.
– 검색 노드: Tav API를 사용하여 관련된 리소스를 검색하고 필터링합니다. - 상태 관리: 각 작업 흐름의 상태를 관리하기 위해 상태 변수를 설정하고, 사용자 요청에 따라 적절한 상태 업데이트를 수행합니다.
최종 애플리케이션 실행 및 테스트
모든 구성 요소가 설정되면, 애플리케이션을 실행하여 기능을 테스트합니다. 이 때, 다음과 같은 명령으로 실행할 수 있습니다:
“`
pnpm dev // UI 레이어 실행
poetry run demo // 에이전트 아키텍처 실행
“`
이 명령어를 통해 로컬 서버에서 애플리케이션을 실행하고, 웹 브라우저를 통해 실시간으로 테스트할 수 있습니다.
결론
LangGraph와 CopilotKit을 활용한 AI 연구 도구 구축은 인공지능의 가능성을 실현하는 좋은 방법입니다. 사용자는 이러한 기술을 통해 자신만의 AI 기반 도구를 개발하고, 연구 프로세스를 혁신할 수 있습니다. 이번 글에서 소개한 내용을 바탕으로, 여러분도 이와 유사한 프로젝트를 시도해보시기 바랍니다. 인공지능을 활용한 연구 도구의 미래는 여러분의 손에 달려 있습니다.
출처 : Developers Digest – Build an AI Agent Web App with LangGraph & CopilotKit in 30 Minutes