LangGraph와 LangChain으로 나만의 에이전트 AI 만들기

 

 

LangChain? LangGraph? 그게 뭐임?

 

LLM이나 NLP 분야 쪽에는 크게 관심이 없다. 라이트하게 컨셉만 알아보았다.

 

 

 

LangChain

LLM을 프로그래밍에서 쉽게 쓸 수 있게 해주는 도구 모음.

GPT에게 질문을 보내면 답변을 받고 검색도 시키고.

이런 작업을 코드 몇 줄로 할 수 있게 해준다.

 

Lang(Language) + Chain(사슬, 연결)

AI 언어 모델에게 여러 작업을 체인처럼 연결해서 시키는 개념.

질문을 받고 , 검색을 하고, 검색 결과를 요약하고, 답변을 생성하는 이러한 단계들을 사슬처럼 엮어서 실행하는 것.

 

 

LangGraph

LangChain 위에 만들어진 에이전트 프레임워크.

단순히 질문-답변이 아니라, AI가 스스로 판단해서 도구(함수)를 호출할 수 있게 해준다.

 

서울 날씨를 알려달라고 하면 AI는 날씨 함수를 직접 호출하고 결과를 사람 말로 정리한다.

 

Lang(Language) + Graph(그래프, 노드와 간선

Chain은 일직선의 흐름이었지만, Graph는 분기와 반복이 가능한 흐름이다. 자료구조 시간에 배운 그 그래프가 맞다. AI가 상황에 따라 다른 경로를 타거나 루프를 들 수 있다.

Chain:  A → B → C → 끝 (일직선)
Graph:  A → B → 도구 호출 필요? → Yes → 도구 실행 → B로 돌아감
                                → No  → C → 끝

 

그래프 구조로 흐름을 제어한다는 것.

 

LangGraph가 LangChain의 발전형이라고 볼 수 있다. 단순 체인보다 더 복잡한 AI 에이전트를 만들 수 있다.

 

 

Agent Chat UI

프론트엔드 영역이다. LangChain팀이 만든 채팅 화면인데, ChatGPT처럼 생긴 웹 UI이다. 뒤에서 LangGraph 서버와 통신한다.

 

 

 

 

LangGraph와 MCP랑 뭐가 다른가?

MCP	USB-C 같은 규격 / 표준
LangGraph	로봇의 두뇌 회로

 

비슷해 보인 듯 싶지만 하는 일 자체가 다르다.

 

MCP(Model Context Protocol)

AI가 외부 도구를 쓸 때 통신하는 규격.

AI가 Gmail을 읽어달라고 하려면 Gmail에 접근해야 하는데, MCP는 그 연결 방식을 표준화 하는 것.

 

AI ←── MCP ──→ Gmail
AI ←── MCP ──→ GitHub
AI ←── MCP ──→ 데이터베이스

 

USB-C처럼 하나의 규격으로 여러 도구에 꽂을 수 있게 해주는 프로토콜, 약속이라고 보면 된다. MCP 자체는 AI가 어떻게 생각할 지에는 관여하지 않는다.

 

LangGraph

AI가 어떤 순서로 생각하고 행동할지 흐름을 짜는 프레임워크.

사용자 질문 → 검색이 필요한가?
    → Yes → 검색 실행 → 결과 충분한가?
      → No → 다시 검색 (루프)
      → Yes → 답변 생성
    → No → 바로 답변

 

이러한 판단 - 행동 - 반복 로직을 코드로 짜는 도구.

 

 

---

어떻게 만들어볼까?

 

 npx create-agent-chat-app

 

이거면 한 방에 해결된다지만 나는 공부가 목적이기에 참는다.

이거 하나면 프론트엔드 + 백엔드를 자동으로 만들어준다는데, 오푸스의 은혜를 받고 있으니 버릇 잘못 들지 말자. 

 

 

 

그래서 직접 구성해보도록 했다.

 

 

사용자 (브라우저)
     ↕ 채팅 메시지
  프론트엔드 (agent-chat-ui, 포트 3000)
     ↕ API 통신
  백엔드 (LangGraph 서버, 포트 2024)
     ↕ API 호출
  OpenAI GPT (실제 AI 두뇌)

 

 

• 백엔드 (my-agent/): Python으로 AI 에이전트를 만들고 langgraph dev로 API 서버 실행   
• 프론트엔드 (agent-chat-ui/): Next.js 채팅 UI를 띄워서 백엔드에 연결

 

내가 조금 생각해봐야 할 것들

• AI 내부 처리 과정을 사용자에게 숨기는 방법 - 추상화
• 실제 서비스로 배포하는 방법
• 채팅 답변을 카드 / 버튼 같은 UI 컴포넌트로 랜더링하는 방법

 

나는 GPT 같은 AI 챗봇 웹사이트를 직접 만들어서 로컬에서 돌리는 방법을 만들어 보려는 것임을 잊지말자.

목표를 위해 핀트를 벗어나면 안된다.

 

---

 

 내 폴더 경로/
  ├── my-agent/           ← 백엔드 (LangGraph 에이전트)
  │   ├── agent.py        ← 에이전트 코드 (날씨 도구 포함)
  │   ├── langgraph.json  ← LangGraph 서버 설정
  │   ├── .env            ← OpenAI API 키 (수정 필요!)
  │   ├── requirements.txt
  │   └── 실행방법.md
  └── agent-chat-ui/      ← 프론트엔드 (Next.js 채팅 UI)

 

 

실행 순서

1. .env 파일에 OpenAI API 키 입력 — my-agent/.env에서 sk-여기에_본인_API키_입력을 실제 키로 교체

2. 백엔드 실행 (터미널 1):
cd C:\Users\.......\Desktop\my-agent
python -m venv .venv
.venv\Scripts\activate
pip install -r requirements.txt
langgraph dev

3. 프론트엔드 실행 (터미널 2):
cd C:\Users\......\Desktop\agent-chat-ui
pnpm install
pnpm dev

4. 브라우저에서 http://localhost:3000 접속 → Deployment URL에 http://localhost:2024, Graph ID에 agent 입력하면 채팅 시작

pnpm이 없으면 먼저 npm install -g pnpm으로 설치!!!

 

 

Claude API 키 발급 받기

1. https://console.anthropic.com 접속
2. 로그인 후 API Keys 메뉴
3. "Create Key" 클릭
4. sk-ant-...로 시작하는 키 복사


그 키를 C:\Users\........\Desktop\my-agent\.env 파일에 붙여넣기

나는 클로드 유저이기 때문에 또 한 번 오박사에게 부탁을....