Dev.to헤드라인2026. 06. 02. 17:52

임베드 가능한 AI 채팅 위젯과 MCP 기반 백엔드를 구축하여 오픈 소스로 공개했습니다

요약

다양한 LLM 제공자와 연결 가능한 임베드형 AI 채팅 위젯 및 MCP 기반 백엔드 오픈 소스 프로젝트를 소개합니다. React와 CDN을 지원하며 OpenAI, Gemini, Ollama 등 다양한 모델을 플러그 앤 플레이 방식으로 통합할 수 있습니다.

지난 주말, 저는 단순한 개발자 도구로서 존재하기를 바랐던 무언가를 만드는 데 시간을 보냈습니다:

어떤 웹사이트에도 바로 삽입할 수 있고, 어떤 LLM (Large Language Model) 제공자와도 연결되며, 도구 호출 (Tool calling) 및 MCP 스타일의 통합을 통해 확장 가능한 임베드 가능한 AI 채팅 위젯입니다.

이 프로젝트는 이제 오픈 소스로 공개되었습니다.

위젯 (Widget)

npm install ai-chat-toolkit-widget

서버 (Server)

npm install ai-chat-toolkit-server

프론트엔드 (Frontend)

<ai-chat
  backend-url="http://localhost:3000"
></ai-chat>

백엔드 (Backend)

const aiChat = new AiChatServer({
  provider: "openai",
  apiKey: process.env.OPENAI_API_KEY,
...

위젯 (Widget)

서버 (Server)

GitHub

이 프로젝트는 개발, 디버깅, 반복 작업 및 문서화를 가속화하는 데 도움이 되는 AI 도구의 도움을 받아 구축되었습니다.

하지만 아키텍처 결정, 구현 선택, 그리고 최종적인 개발자 경험 (Developer experience) 패키징은 여전히 제가 직접 수행했습니다.

다른 개발자분들의 진심 어린 피드백을 기다립니다.

직접 사용해 보신다면, 어떤 점을 개선하면 좋을지 알려주세요.

AI 자동 생성 콘텐츠