AI Agent 연동

1. 지금 상태

앞 강의(기능 개발)에서 "글을 넣으면 3줄로 요약해 주는 페이지"의 겉모습을 만들었습니다. 하지만 요약처럼 '생각'이 필요한 일은 AI(LLM) 가 해야 하는데, 아직 그 AI 를 안 붙였습니다. 그래서 지금 페이지에 글을 넣어도 진짜 요약은 안 나옵니다.

이번 강의에서 그 페이지에 진짜 AI 요약을 붙입니다.

2. AI Agent 연동 요청

프로젝트 안(src)에서 Claude Code 를 켜고, 앞 강의에서 만든 요약 페이지가 진짜 요약을 하도록 요청합니다. 앞 강의에서 OpenAI(ChatGPT 를 만든 곳) 키를 넣었으니, OpenAI 로 하라고 말합니다.

# 🖥️ 서버 터미널
gildong@ip-172-31-39-132:~$ cd ~/my_project/src
gildong@ip-172-31-39-132:~/my_project/src$ claude

요약 페이지의 요약을 OpenAI 로 처리해줘

• 어려운 함수 이름 같은 건 외울 필요 없습니다. 프로젝트에는 "AI 는 항상 회사 공용 코드로 부른다"는 규칙이 이미 들어 있어서, 이렇게 말만 하면 Claude Code 가 알아서 처리합니다.
• 그러면 페이지에 넣은 글을 AI 에게 보내 요약을 받아 화면에 보여주게 코드가 바뀝니다. 이때 앞 강의에서 .env 에 넣은 OpenAI 키로 AI 를 부릅니다.

3. 확인

진짜로 되는지 눈으로 봅니다.

1. 개발 서버 주소(https://my-project-dev.popupstudio.ai)를 브라우저에서 엽니다. (안 떠 있으면 개발 서버 실행 강의대로 다시 켭니다.)
2. 요약 페이지에 아무 긴 글이나 붙여넣습니다.
3. 3줄 요약이 나오면 성공입니다.

마무리

• 핵심 정리: "요약 페이지의 요약을 OpenAI 로 처리해줘"라고 요청해, 껍데기였던 요약 페이지에 진짜 AI 요약을 붙이고 브라우저에서 확인했습니다.
• 주의 사항: 요약이 안 나오면 앞 강의(AI API 키 발급)에서 OpenAI 키를 src/.env 에 제대로 넣었는지 확인합니다. 키가 없거나 오타가 있으면 AI 가 동작하지 않습니다.
• 다음 시간: GitHub 업로드.