Mistral AI 챗봇을 Figma Make와 Replit에 API로 연동해봤더니...
소개
예전부터 어린 학생들에게 민감하지만 꼭 필요한 정보를 제공하는 챗봇을 만들고 싶다는 생각이 있었습니다. 특히 가정폭력, 성폭력 등 주변에 쉽게 묻기 힘든 주제를 다루는 챗봇을 만들고 싶었습니다.
GenAI를 활용하면 챗봇을 만들 수 있다는 것은 알고 있었지만, 문제는 그 챗봇을 직접 내가 만든 웹사이트나 UI에 연결하는 법을 몰랐다는 것이었습니다.
그러던 중 이번 스터디에서 Replit 과 Figma Make 둘 다 챗봇 등의 API 연동이 가능하다는 것을 알게되었습니다! "일단 내가 가지고 있던 아이디어의 초안이라도 만들어보자!"는 마음으로 시작했습니다.
진행 방법
✅ 선택한 AI 모델: Mistral AI
유럽 기반으로 프라이버시에 더 중점을 두어 민감한 주제를 다루는 챗봇과 잘 맞을 것 같았습니다. 먼저 Mistral AI 'La Platforme'에서 에이전트를 만들었습니다.
그리고 'API Keys' 탭에서 API Key를 얻은다음
'Agents' 탭에 들어가 API ID를 가져왔습니다.
✅ 테스트 대상 플랫폼: Figma Make vs Replit
둘 다 동일한 System Prompt와 API Key, API ID를 주고 테스트했어요.
🧪 프롬프트
Mistral AI API를 연동해서 챗봇 인터페이스를 만들고 싶어.📐 1. UI 비교
Figma Make
깔끔하게 정돈된 UI 구성
Replit
어디서 많이 본 챗봇 인터페이스 느낌 (어느 웹사이트 구석탱이에 있는 챗봇 아이콘을 클릭했을때 나올법한 모습). 그래도 익숙한 느낌으로 구현이 잘 됨!
🔗 2. API 연결
Replit
프롬프트 한 줄에 바로 API 연동
프롬프트 실행 중간에 API Key/ID 입력 요청이 자동으로 뜸 (흥미로웠던 포인트)
Figma Make
유저 관점으로 접근하는 듯 했음 → 처음엔 유저가 API Key/ID를 바꿀 수 있는 구조로 UI가 구현이 됨
API Key를 고정하도록 따로 프롬프팅 필요
물어보지도 않았는데 API ID의 컨텍스트에 따라 인삿말 텍스트가 다르게 생성됨
⚙️ 3. 작동 테스트
두 플랫폼 모두 API 연동은 되었으나, 아마도 API 요청 한도 초과로 응답이 자주 오락가락함
Replit이 약간 더 안정적인 느낌이었지만, 확실치는 않음
아마 Mistral AI에서의 프롬프팅 이슈로 대화가 예상대로 흘러가지 않았음
결과와 배운 점
챗봇 자체를 만드는 것만큼, 외부 플랫폼과의 연동과 프롬프트 튜닝또한 어렵고 중요하다는 걸 깨달았어요.
몇 주전만해도 API라는 것은 개발자들의 영역이라고 느꼈던 제가 연동이라는 것을 하게 되다니 감동이었습니다!!
API 연결이 원활하지 않았던 것을 보아, 현재로서는 Figma Make와 Replit 둘 다 프로토타이핑이나 IDE를 쓰게 될 경우 정말 좋은 참고용으로 적합하다고 느꼈어요.
앞으로 더 다듬고 싶다면:
프롬프트를 시나리오 기반으로 세분화하기
사용자의 입력 맥락을 파악하는 UX 설계 도입하기
요청 제한 대응에 대해 좀 더 공부하기
등이 있을 것 같습니다!
