Tech Mentor (Nodi)

Educational mini-agent of technology for a training course. It fulfills the single-tool lab: Claude decides when to call consultar_conocimiento_tech; Node executes it over a local Markdown corpus (RAG). The chat is by text or voice, an avatar reads a short summary, and a panel shows how each request is answered.

It only covers technology topics. Everything else is rejected and redirected to the topic.

Online demo: https://tecno-chatbot-portal.vercel.app
Locally: npm run dev → http://localhost:3000

Architecture

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

There is no MCP or separate backend. The lab required one function; the corpus lives in knowledge/.

Related MCP server: ProductBrain

What the course demonstrates

Interface

• Illustrated female avatar (fixed at top): blinks, gestures, and moves its mouth when speaking.

• How Nodi responds: 10 nodes that light up (input, API route, prompt, model, tool, RAG, drafting, streaming, render, voice). On mobile the panel collapses.

• Responses in Markdown (lists, code, bold).

• Step, comparison, or concept infographics when the topic warrants it.

• 3–5 clickable related topics at the end of each response.

• Microphone (Chrome) and system TTS, at no extra cost.

Requirements

• Node.js 20+

• Anthropic / Claude key

How to run it

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

Open http://localhost:3000.

npm test
npm run build

Suggested tests

1. "What is RAG?" → uses the tool and cites the corpus.

2. "I have 15 minutes, what do I practice in Git?" → exercise from the material.

3. "What is ITIL?" → calls the tool; RAG may mark no results and Claude still responds (without faking the internet).

4. "Give me a lasagna recipe" → rejection, no tool.

5. Related topics chip → sent as your question.

6. Microphone in Chrome → transcribes and sends.

7. The avatar speaks the summary (sometimes the browser asks for a prior click).

Limits (on purpose)

• Small, curated corpus.

• Dictation in Chrome. Edge, Brave, Firefox, and Arc often fail (network) because recognition is a vendor service, not this app's. Text always works.

• No web search. The internet node was removed so as not to simulate a source that doesn't exist.

• Infographics drawn with structured data from the model, not images from a paid service.

• Illustrated avatar, not photoreal lip-sync.

• No login or server-side history.

Deploy to Vercel (optional)

Vercel is the hosting of the people who make Next.js. You upload the repo, they build the app and give you a https://….vercel.app URL that anyone can open. It's the same code; your laptop doesn't need to be on.

Steps (already done in this repo): the project is on Vercel with ANTHROPIC_API_KEY. URL: https://tecno-chatbot-portal.vercel.app.

To redeploy manually: npx vercel --prod. To have each git push deploy automatically, connect GitHub in the Vercel dashboard (Login Connection with GitHub).

What's free and what isn't