AI 요약
이 기사는 Cursor라는 AI 코딩 도구를 활용해 초보자도 AI 챗봇을 직접 만들 수 있는 방법을 단계별로 설명한다. ‘菜包(차이바오) AI 어시스턴트’라는 프로젝트를 통해 HTML/CSS/JavaScript로 프론트엔드 UI를 구성하고, Node.js + Express로 백엔드를 구축한 뒤 대형 언어 모델 API를 연동하는 전 과정을 다룬다. 특히 한 번에 모든 기능을 구현하려 하지 말고, ‘UI → 인터랙션 → 백엔드 → API 연동 → 배포’ 순서로 점진적으로 개발하는 방법론을 강조한다. Cursor의 이미지 기반 프롬프트를 활용해 기존 AI 챗봇(예: Doubao)의 UI를 참고하여 빠르게 프로토타입을 만들 수 있음을 보여준다.
핵심 포인트
- Cursor의 Agents 패널에 참고 이미지와 함께 프롬프트를 입력하면 AI가 자동으로 HTML/CSS/JS 코드를 생성
- 프로젝트는 좌측 대화 목록, 우측 채팅 영역, 하단 입력창으로 구성된 전형적인 AI 챗봇 UI를 목표
- 백엔드는 Node.js + Express로 구축하고, Volcano Engine의 Doubao 대형 모델 API를 호출
- 배포는 클라우드 서버 + Baota 패널을 통해 진행하며, Docker를 선택적으로 사용 가능
향후 전망
- AI 코딩 도구의 발전으로 비개발자도 자신만의 AI 애플리케이션을 쉽게 만들 수 있는 시대가 도래할 것
- 점진적 개발 방식(한 번에 하나의 기능만 구현)이 AI 코딩에서 중요한 원칙으로 자리잡을 전망
출처:juejin