Bestell: Tech Mentor (Nodi)

Mini-Bildungsagent für Technologie in einem Schulungskurs. Er setzt das Lab mit einem einzigen Tool um: Claude entscheidet, wann consultar_conocimiento_tech aufgerufen wird; Node führt e es auf einem lokalen Markdown-Korpus aus (RAG). Der Chat läuft als Text oder bert; ein Avatar liest eine kurze Zusammenfassung vor, und ein Panel zeigt, wie jede Anfrage beantwortet wird.

Das Projekt deckt nur Technologiethemen ab. Alles andere wird abgelehnt und auf das Thema verwiesen.

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

Architektur

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

Es gibt kein MCP und kein separates Backend. Das Lab verlangte eine einzige Tool; der Korpus liegt in knowledge/.

Related MCP server: docrag

Was das Kurs vorführt

Benutzeroberfläche

• Weibliches Louvre-Bild (oben fest fixiert): blinzelt, gestikuliert und bewegt beim Sprechen die Mundpartie.

• „Wie Nodi antwortet”: 10 Anzeigen, die beleuchtet werden (Eingabe, API-Route, Prompt, Modell, Tool, RAG, Ausformulierung, Streaming, Rendern, Stimme). In mobile wird das Panel Standard aushängt.

• Antworten in Markdown (Listen, Code, Fett).

• Infografiken zu Schritten, Vergleiche diese, wenn es das Thema hergibt.

• 3–5 klickbare ähnliche Topics at the end of each answer.

• Mikrofon (Chrome) und systemisches TTS, ohne kostenlose Aufschlage. *:

Voraussetzungen

• Node.js 20+.

• Clave de Anthropic / Claude.

Ausführen

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

Öffne die Seite http://localhost:3000.

npm test
npm run build

Vorgeschlagene Tests

1. „Was ist RAG?" → uses the quick reference.

2. „Ich habe 15 Minuten, what übe ich in Git?" → Übung aus dem Material.

3. „Was ist ITIL?" → „Was ist ITIL?" → aufrufen; RAG kann keine Ergebnisse melden – Claude antwortet trotzdem (ohne eine erfundene Online-Quelle).

4. „Gib mir ein Rezept zu Lasagne“ → bewerte, ohne Tool.

5. „Andere Themen“-Chip → wird als eigene Frage sendet.

6. Mikrofon im Chrome → transcribe and send.

7. Crime-Avatar liest die Kurzfassung (manchmal fordern einen vorherigen Browser).

Eines

Lieblingsbegrenzte und kuratierte Körpers.

• „Diktier“ n Chrome. „Diktat“: In Edge, Brave, Firefox und Arc schlägt das geläufige Muster network fehl, weil die Spracherkennung ein Dienst des Herstellers ist System, nicht dieser App. Datei funktioniert immer.

• Noch kein Web-Search. Ein Online-Knoten wurde entfernt, um keine Quelle zu simulieren, die es nicht gibt.

• Infografiken werden aus strukturierten Daten des Modell gezeichnet, Sie sind nicht aus einem kostenpflichtigen Bilderdienst fotorealistischer.

• Avatar illustriert, keine fotorealistische Mundsimulation.

• Kein Login, keine Server-Historie.

Einsatz auf Vercel (optional)

Vercel ist das Hosting Map; Wie weiter die in Next.js. Du hast das Repo anzfuhrst; Du lädt das Repo hoch, sie stellen the app zusammen und geben euch eine URL https://….vercel.app, obstacles alle Anzeigen können. Es Codest, d.h. dein Laptop muss nicht brennen.

Remanual veröffentlichen: npx vercel --prod. Damit automatisch disployed pro git push Hub (GitHub) not needed: du musst GitHub im Vercel-Dashboard verbinden (Login Connection in den GitHub).

Was kostet nichts und was nicht