소개
지난 모각AI에서 MCP를 노트북에 설치하려다가 윈도우7은 사용 못한다는 불편한 진실을 마주하게됨. 윈도우야 사실 2시간도 안걸림련 죄다 세팅할 수 있는데, 그런거 못참음... 그리고 집컴에 설치한 MCP를 노트북에도 2중으로 설치한다던지, 외부에서 작업할 때 PC방 등을 많이 찾는 물결이에게는 온라인 작업환경이 중요하기에 웹기반 MCP를 만들어 보기로 결정!
테스트 용으로 지난번에 노션mcp를 연결해보았기 때문에 이번에는 웹 채팅 봇을 만들고, 대화한 내용을 노션 DB에 요약해서 올리는 봇을 만들기로 결정!
진행 방법
1.설계 : 제미나이, 챗지피티
2.초기개발 : 러버블 - https://lovable.dev/
3.코드수정 : 커서 ai - https://www.cursor.com/
4.호스팅 : 버셀 https://vercel.com/
5.코드정리 : 깃허브 - https://github.com/
6.mcp설치 : GCP 설치 실패후 -> 클라우드플레어 https://dash.cloudflare.com/
7.인공지능 선택 : 저렴하고 2주전에 나온 제미나이 2.5플래쉬 : gemini-2.5-flash-preview-04-17
7.최종 결과물 : https://notion-summary-scribe.vercel.app/
-> 온라인 웹에서 채팅봇과 대화 가 끝나면 대화 내용을 요약해서 노션에 올려줌!
버튼 하나 안 누른것으로 20시간을 소비함@!@
그럼 삽질 어떻게 했는지 소개!!
생각의 발달은 mcp숙제를 해야하는데 필요한걸 딱히 못느껴서 어느것도 못 고르던중... mcp가 로컬에서밖에 안되니까 도구에 상관없이 언제든지 사용할 수 있는 웹 mcp가 있으면 좋겠다고 생각해서 시작함!
-> 처음에는 n8n 노드를 통해서 mcp 연결을 하려고 시도하였지만, n8n은 웹훅 하나 만들지 못하고 폐기됨... 사람이 욕심을 부리면 안된다!
-> 준비물로 노션 데이터베이스도 연결을 했다. 과정은 사례게시글과 같은 방법으로!
https://www.gpters.org/member/5c0UENQiQZ
-> 러버블이 초기 디자인 및 설계를 모두 해주니까 빠르게 제작 진행!
-> 개발 시작한지 18시간 정도 흐른다음에... 휴먼의 에러에 고통받다가 퍼플렉시티에게 물어보고 GCP 서버리스 함수 배포(mcp서버)를 폐기하고 바로 CloudFlare로 전환!
-> 클라우드플레어에는 웹mcp를 사용할 수 있는 공식 문서까지 존재!
-> https://dash.cloudflare.com/ 접속후에 workers 및 pages 클릭!
-> 함수?라고 해야하나 서버리스 컴퓨터에 생성버튼을 눌러서 워커를 생성!
-> 오른쪽 위쪽에 눈에도 잘 안보이는 위치에 코드 편집기가 붙어있음 '<>' 이거 눌러서 코드편집기 열기!
-> 노션 공식 mcp 서버 문서 확인(전문 개발자가 아니라 이 문서를 보는게 맞는지는 확실치는 않음)
https://github.com/makenotion/notion-mcp-server
-> 어쨌든 저 문서를 토대로 챗GPT o3를 채찍질해서 클라우드플레어에 노드js 기반 함수 생성!
-> 누구나 이용할 수 있게 제미나이 api / 노션 api / 노션 DB ID 는 사용자가 입력하도록 하기!
-> 제미나이 api 키 발급 : https://aistudio.google.com/app/apikey?hl=ko&_gl=1*179j3vu*_ga*MTI0Njg3NjIwNi4xNzQ1NzgzMTc0*_ga_P1DBVKWT6V*MTc0NjEyNzU0Ni43LjEuMTc0NjEyNzU0OS41Ny4wLjE1MDAzMTUyMzI.
-> 노션API는 지난 사례 참조(https://www.gpters.org/llm-service/post/try-install-noion-mcp-SqeeUqRLaywe1MD)
-> 노션 DB ID는 내가 원하는 데이터베이스 표 오른쪽 위쪽에 작게 화살표 대각선으로 확장하는 것처럼 보이는 아이콘이 있다. 이것을 누르면 전체페이지로 열리는데, 눌러서 열어봅니다.
-> 확대 아이콘 눌러서 나온 페이지의 브라우져 주소를 보면 notion.so/문자+숫자?v=이상한문자들
이렇게 적혀있는데, 여기서 ? 앞에 있는 '문자+숫자' 부분이 노션DB ID 입니다. 이 부분을 긁어서 메모장 등에 저장해서 사용하면 됩니다.
-> 이 3가지를 어디에 쓰냐 하면, 이렇게 챗봇을 통해서 자신의 노션DB에 사람들이 올릴 수 있도록 api키를 직접 올려서 사용합니다. 지금 이 웹사이트는 테스트 버전으로 만들었기 때문에 로컬스토리지에 저장됩니다.
-> 다양한 아이디어 나 기타 대화 하고싶은거 아무말이나 해둡니다!
-> 트리거단어 : 요약해서 노션에 올려줘
::=> 자연어로 인식하는 것은 구현이 안되어 있어서 지금은 트리거를 명확히 말해야합니다.
-> '노션에서보기'를 누르면 내 노션에 들어와서 글이 잘 들어와 있는지를 확인할 수 있습니다. 특별히 날짜에 대한 기준을 안썼더니 지금 대한민국 시간으로 5/2 04:42 인데, 5/1로 표기되고 있는걸보니 표준시로 등록된거 같습니다. 이런 사소한건 일단 무시무시..
-> 일기를 열어보면 요약이 아주 잘 된 것을 확인할 수 있습니다. 미리 사전에 세팅한 프롬프트로 요약 + 태그를 적어달라고 했는데, 잘 적용된 것을 볼 수 있네요!
결과와 배운 점
https://preview--notion-summary-scribe.lovable.app/
사용방법@
1.노션api / 제미나이api / 노션 데이터베이스 ID 획득
2.노션 DB의 구조는 날짜(날짜속성), 일기제목(제목속성) 2개가 있어야 합니다.
3.인공지능의 답변이 조금 느려서 30초 정도 걸립니다.
4.트리거 단어 : 요약해서 노션에 올려줘
5.트리거를 말하면 제미나이가 조금 이상한 말을 할 수 도 있으니 30초~1분 정도 기다려주면 됩니다.
-> 휴먼리스크는 언제 없어질까?
-> 클로드에서 직접 제공하는 것 만큼은 아직 구현도가 굉장히 낮지만, 충분히 기획해서 만들면 만능 도구를 웹상에 띄워서 사람들에게 이용하게 할 수 있을거 같다는 생각이 듦!
이제 이번 개발 과정에서의 삽질에 대해서 설명!
1.노션 통합연결을 안하고 작업... 이 단추 하나 안누른것으로 개발소요시간이 예상 3시간에서 30시간으로 .... 휴먼에러는 못찾는다...
2.갓구글 믿고 GCP로 작업했는데 mcp는 노드js로 만들어져있는데, 파이썬으로 GCP 했더니 그냥... 안됨(이건 다른 언어로 사용할 만큼 내 실력이 안된것일수도 있지만...ㅠ)
3.퍼플렉시티에게 이 세상에 가이드가 있는지 먼저 물어보라!!! 이걸 하루가 꼬박 지난다음에 했기 때문에 클라우드플레어에서 웹 mcp 공식문서가 있다는 것도 몰랐다!!!!!!!!
4.인공지능이 휴먼에러까지 잡아주는 그날을 기대하며...
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
(내용 입력)