Tech Mentor (Nodi)

기술 교육 과정을 위한 미니 교육 에이전트. 단 하나의 tool로 랩을 수행합니다: Claude가 언제 consultar_conocimiento_tech를 호출할지 결정하고, Node가 로컬 Markdown 코퍼스(RAG)에서 실행합니다. 채팅은 텍스트 또는 음성으로 이루어지며, 아바타가 짧은 요약을 읽고, 패널은 각 요청이 어떻게 응답하는지 보여줍니다.

기술 주제만 다룹니다. 그 외의 주제는 거부되고 주제로 리디렉션됩니다.

온라인 데모: https://tecno-chatbot-portal.vercel.app
로컬: npm run dev → http://localhost:3000

아키텍처

Navegador (Next.js)
  │  texto o Web Speech (STT, Chrome)
  │  POST /api/chat  { messages }  →  stream NDJSON
  ▼
API route (servidor, Node)
  │  ANTHROPIC_API_KEY (nunca llega al cliente)
  │  Claude Haiku: system prompt + tools
  │  loop de tool_use
  ▼
consultar_conocimiento_tech  (única tool)
  │  búsqueda léxica en knowledge/*.md
  ▼
stream de la respuesta  →  Markdown + infografía + temas
  │
  ▼
Web Speech TTS  →  avatar lee el resumen

MCP나 별도의 백엔드는 없습니다. 랩은 하나의 함수를 요구했습니다. 코퍼스는 knowledge/에 있습니다.

Related MCP server: docrag

과정에서 보여주는 것

인터페이스

• 여성 일러스트 아바타(상단 고정): 말할 때 눈을 깜빡이고, 몸짓을 하며 입을 움직입니다.

• Nodi가 어떻게 응답하는지: 10개의 노드가 켜집니다(입력, API route, prompt, 모델, tool, RAG, 작성, 스트리밍, 렌더링, 음성). 모바일에서는 패널이 접힙니다.

• Markdown 응답(목록, 코드, 굵은 글씨).

• 주제에 따라 단계, 비교 또는 개념 인포그래픽.

• 각 응답 끝에 클릭 가능한 관련 주제 3–5개.

• 마이크(Chrome) 및 시스템 TTS, 추가 비용 없음.

요구 사항

• Node.js 20+

• Anthropic / Claude 키

실행 방법

npm install
cp .env.example .env.local
# Edita .env.local y pega ANTHROPIC_API_KEY
npm run dev

http://localhost:3000을 엽니다.

npm test
npm run build

제안된 테스트

1. «RAG가 뭐야?» → tool을 사용하고 코퍼스를 인용합니다.

2. «시간이 15분 있는데, Git에서 뭘 연습할까?» → 자료의 연습 문제.

3. «ITIL이 뭐야?» → tool을 호출합니다. RAG는 결과 없음을 표시할 수 있고 Claude는 여전히 응답합니다(인터넷을 가장하지 않음).

4. «라자냐 레시피 알려줘» → 거부, tool 없음.

5. 관련 주제 칩 → 당신의 질문으로 전송됩니다.

6. Chrome에서 마이크 → 전사 및 전송.

7. 아바타가 요약을 말합니다(때때로 브라우저가 먼저 클릭을 요구합니다).

한계(의도적)

• 작고 선별된 코퍼스.

• Chrome에서만 받아쓰기. Edge, Brave, Firefox 및 Arc는 일반적으로 실패합니다(network) — 음성 인식은 이 앱이 아닌 제조업체의 서비스이기 때문입니다. 텍스트는 항상 작동합니다.

• 웹 검색 없음. 존재하지 않는 소스를 시뮬레이션하지 않도록 인터넷 노드는 제거되었습니다.

• 인포그래픽은 유료 서비스의 이미지가 아닌 모델의 구조화된 데이터로 그려집니다.

• 일러스트 아바타, 포토리얼 립싱크 아님.

• 로그인 또는 서버 기록 없음.

Vercel에 게시(선택 사항)

Vercel은 Next.js를 만드는 회사의 호스팅입니다. 저장소를 업로드하면 그들이 앱을 빌드하고 누구나 열 수 있는 https://….vercel.app URL을 제공합니다. 동일한 코드입니다. 노트북이 켜져 있을 필요가 없습니다.

단계(이 저장소에서 이미 완료): 프로젝트는 ANTHROPIC_API_KEY와 함께 Vercel에 있습니다. URL: https://tecno-chatbot-portal.vercel.app.

수동으로 다시 게시하려면: npx vercel --prod. 각 git push가 자동으로 배포되게 하려면 Vercel 대시보드에서 GitHub를 연결해야 합니다(Login Connection with GitHub).

무료인 것과 아닌 것