- Add useDocsChat hook with message state, streaming, error handling - Add ChatMessages component with auto-scroll and streaming cursor - Add ChatInput component with Enter/Shift+Enter support - Add DocsChatWidget floating container with amber styling - Add AI integration specs (PRD, FO, bouwplan) Implements Epic 3 of AI Documentatie Assistent feature. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
14 KiB
Product Requirements Document (PRD) — AI Documentatie Assistent
Projectnaam: Mini-ECD – AI Documentatie Assistent Versie: v1.0 Datum: 01-12-2025 Auteur: Colin Lit Status: Draft – Ready for Review
1. Doelstelling
Doel van deze sectie: Beschrijf waarom dit product wordt gebouwd en wat het beoogde resultaat is.
Toelichting: Een intelligente chat-assistent die eindgebruikers van het EPD helpt door vragen te beantwoorden op basis van de systeemdocumentatie. De focus ligt op het direct beschikbaar maken van informatie zonder dat gebruikers zelf door documentatie hoeven te zoeken.
Kernbelofte: Direct antwoord op vragen over het EPD systeem, 24/7 beschikbaar via een handige chat widget.
Type: MVP Feature binnen Mini-ECD Prototype — Eerste AI-integratie als opstap naar complexere features (zoals AI Pre-fill Behandelplan)
Relatie tot andere features: Dit is de eerste AI-integratie die:
- De Claude API infrastructuur opzet
- Streaming responses implementeert
- AI UI patterns (amber thema) in productie brengt
- Als fundament dient voor toekomstige AI features
2. Doelgroep
Doel: Schets wie de eindgebruikers en stakeholders zijn.
Primaire gebruikers
| Rol | Behoefte | Pijnpunt nu |
|---|---|---|
| GGZ Behandelaar | Snel antwoord op "hoe werkt X?" | Documentatie doorzoeken kost tijd |
| Verpleegkundige | Hulp bij onbekende functies | Moet collega's vragen of zelf uitzoeken |
| Nieuwe medewerker | Systeem leren kennen | Geen interactieve onboarding |
Secundaire stakeholders
- Demo-bezoekers: Product owners/managers die AI-mogelijkheden willen zien
- Developers: Technische professionals geïnteresseerd in AI-integratie patterns
- Support team: (toekomst) Minder support tickets door self-service
3. Kernfunctionaliteiten (MVP-scope)
Doel: Afbakenen van de minimale werkende functies.
3.1 Floating Chat Widget
| Aspect | Specificatie |
|---|---|
| Positie | Rechtsonder in EPD interface |
| Trigger | Amber knop met Sparkles icon |
| Paneel | 384px breed, max 80vh hoog |
| Animatie | Slide-in van onder + fade |
3.2 Documentatie-gebaseerde Antwoorden
| Aspect | Specificatie |
|---|---|
| Knowledge Base | 14 MDX bestanden in /content/nl/documentatie/ |
| Taal | Nederlands (input en output) |
| Scope | Alleen informatie uit documentatie |
| Eerlijkheid | "Weet ik niet" bij ontbrekende info |
Beschikbare documentatie:
authentication.mdx- Inloggen en authenticatieclient-management.mdx- Cliëntbeheerintake-system.mdx- Intake processcreening-system.mdx- Screening functionaliteittreatment-planning.mdx- Behandelplanneninterface-design.mdx- UI uitlegspraakgestuurde-verslaglegging.mdx- Spraakfunctiesvoice-controlled-reporting.mdx- Voice features (EN)verpleegkundige-overdracht.mdx- Overdracht workflowfhir-datamodel.mdx- Data model uitlegfhir-api.mdx- API documentatierelease-notes-system.mdx- Release notesbuild-errors-fix.mdx- Troubleshootingwebpack-module-resolution.mdx- Technische docs
3.3 Streaming Responses
| Aspect | Specificatie |
|---|---|
| Model | Claude claude-sonnet-4-20250514 |
| Streaming | Server-Sent Events (SSE) |
| UX | Tekst verschijnt woord-voor-woord |
| Timeout | 30 seconden max |
3.4 Sessie-based Conversatie
| Aspect | Specificatie |
|---|---|
| Persistentie | Alleen tijdens browser sessie |
| Context | Volledige conversatie wordt meegestuurd |
| Welkomstbericht | Automatisch bij openen widget |
| Opslag | React state (geen database) |
4. Gebruikersflows (Demo- en MVP-flows)
Doel: Laten zien hoe de gebruiker stap-voor-stap door het systeem gaat.
Flow 1: Happy Path — Vraag Stellen
┌─────────────────────────────────────────────────────────────┐
│ 1. Gebruiker werkt in EPD en heeft vraag │
│ ↓ │
│ 2. Klikt op amber chat-knop rechtsonder │
│ ↓ │
│ 3. Widget opent met welkomstbericht │
│ ↓ │
│ 4. Typt vraag: "Hoe maak ik een intake aan?" │
│ ↓ │
│ 5. Ziet streaming antwoord verschijnen │
│ ↓ │
│ 6. Stelt eventueel vervolgvraag │
│ ↓ │
│ 7. Sluit widget en gaat verder met werk │
└─────────────────────────────────────────────────────────────┘
Doorlooptijd: < 30 seconden voor antwoord
Flow 2: Vraag Buiten Scope
┌─────────────────────────────────────────────────────────────┐
│ 1. Gebruiker vraagt: "Wat is de beste behandeling voor X?" │
│ ↓ │
│ 2. Assistent antwoordt: │
│ "Die informatie heb ik niet. Ik kan alleen helpen met │
│ vragen over hoe het EPD systeem werkt. Probeer: │
│ - Hoe maak ik een behandelplan? │
│ - Hoe werkt de screening?" │
└─────────────────────────────────────────────────────────────┘
Flow 3: Technische Vraag
┌─────────────────────────────────────────────────────────────┐
│ 1. Developer vraagt: "Hoe werkt de FHIR API?" │
│ ↓ │
│ 2. Assistent geeft technische uitleg uit fhir-api.mdx │
│ ↓ │
│ 3. Verwijst naar relevante endpoints en voorbeelden │
└─────────────────────────────────────────────────────────────┘
5. Niet in Scope
Doel: Duidelijk maken wat (nog) niet wordt gebouwd.
| Feature | Reden |
|---|---|
| Conversatie opslaan in database | Complexiteit, privacy overwegingen |
| Meerdere AI providers | Alleen Claude voor nu |
| RAG / Vector search | Documentatie past in context window |
| Proactieve suggesties | Focus op vraag-antwoord eerst |
| Voice input | Aparte feature (spraakherkenning bestaat al) |
| Multi-language | Alleen Nederlands voor MVP |
| Admin dashboard voor prompts | Hardcoded prompts voor nu |
| Feedback/rating systeem | Post-MVP |
6. Succescriteria
Doel: Objectieve meetlat voor een geslaagde oplevering.
| Criterium | Target | Meetmethode |
|---|---|---|
| Response Time | First token < 2 sec | Console timing |
| Antwoord Kwaliteit | Relevant en correct | User feedback |
| Widget Laadtijd | < 100ms | Performance metrics |
| Error Rate | < 5% API failures | Error logging |
| Demo Doorlooptijd | Vraag → Antwoord < 30 sec | Live demo |
| Beschikbaarheid | Widget altijd zichtbaar in EPD | Visual check |
7. Risico's & Mitigatie
Doel: Risico's vroeg signaleren en plannen hoe ermee om te gaan.
| Risico | Impact | Mitigatie |
|---|---|---|
| AI hallucineert informatie | Hoog | Strikte system prompt; "alleen uit docs"; duidelijk AI label |
| Documentatie te groot voor context | Middel | ~119KB past; monitoring van token usage |
| API rate limits / kosten | Middel | Geen caching nodig (sessie-based); prompt optimalisatie |
| Trage response (>5s) | Middel | Streaming UX; skeleton loader; timeout handling |
| Privacy vragen in chat | Laag | Geen logging; sessie-only; duidelijke scope communicatie |
8. Roadmap / Vervolg (Post-MVP)
Doel: Richting geven aan toekomstige uitbreidingen.
Fase 2: Enhanced Assistant (Q1 2026)
- Conversatie Persistentie — Gesprekken opslaan per gebruiker
- Feedback Systeem — Thumbs up/down op antwoorden
- Suggestie Chips — Voorgestelde vragen tonen
- Context Awareness — Weet op welke pagina gebruiker zit
Fase 3: Proactive Help (Q2 2026)
- Onboarding Flow — Guided tour via chat
- Error Recovery — Automatisch hulp bij errors
- Tooltip Integration — AI uitleg bij complexe UI elementen
Fase 4: Advanced AI (Q2-Q3 2026)
- AI Pre-fill Behandelplan — Zie
prd-ai-prefill-behandelplan-v1.md - Multi-provider Support — OpenAI/Gemini fallback
- RAG Implementation — Voor grotere knowledge bases
9. Bijlagen & Referenties
Doel: Bronnen koppelen voor context en consistentie.
Project Documentatie
- PRD AI Pre-fill Behandelplan (
prd-ai-prefill-behandelplan-v1.md) - PRD Mini-ECD v1.2 (
prd-mini-ecd-v1_2.md) - Functioneel Ontwerp v2 (
fo-mini-ecd-v2.md) - UX Stylesheet (
ux-stylesheet.md)
Externe Referenties
Appendix A: Technische Specificatie
A.1 Architectuur
┌─────────────────┐ ┌──────────────────┐ ┌─────────────┐
│ DocsChatWidget │────▶│ /api/docs/chat │────▶│ Claude API │
│ (React State) │◀────│ (Streaming SSE) │◀────│ (streaming) │
└─────────────────┘ └──────────────────┘ └─────────────┘
│
▼
┌──────────────────┐
│ knowledge-base.ts│
│ (laadt 14 MDX) │
└──────────────────┘
A.2 Bestandsstructuur
Nieuwe bestanden:
lib/
docs/
knowledge-base.ts # Documentatie loader
app/
api/
docs/
chat/
route.ts # Streaming API endpoint
components/
docs-chat/
docs-chat-widget.tsx # Floating widget container
chat-messages.tsx # Message list component
chat-input.tsx # Input met send button
use-docs-chat.ts # Custom hook voor state
Te wijzigen:
app/epd/components/epd-layout-client.tsx # Widget toevoegen
A.3 API Endpoint
POST /api/docs/chat
Request:
{
"messages": [
{ "role": "user", "content": "Hoe maak ik een intake?" },
{ "role": "assistant", "content": "Om een intake aan te maken..." }
],
"userMessage": "En hoe voeg ik notities toe?"
}
Response: Server-Sent Events stream
event: content_block_delta
data: {"type":"content_block_delta","delta":{"type":"text_delta","text":"Om "}}
event: content_block_delta
data: {"type":"content_block_delta","delta":{"type":"text_delta","text":"notities "}}
...
A.4 System Prompt
Je bent een vriendelijke documentatie assistent voor het Mini-ECD,
een GGZ EPD (Elektronisch Patiënt Dossier) systeem.
## Jouw rol
- Beantwoord vragen over hoe het EPD systeem werkt
- Help gebruikers functies te vinden en te gebruiken
- Verwijs naar relevante documentatie secties
## Belangrijke regels
- Je ENIGE kennisbron is de onderstaande documentatie
- Beantwoord vragen ALLEEN op basis van deze informatie
- Als informatie ontbreekt: zeg eerlijk dat je het niet weet
- Verzin NOOIT informatie die niet in de documentatie staat
- Geef GEEN medisch advies of behandelsuggesties
## Jouw publiek
Zorgprofessionals (behandelaars, verpleegkundigen) die het EPD gebruiken.
## Stijl
- Schrijf in het Nederlands
- Wees beknopt maar vriendelijk
- Gebruik bullet points voor stappen
- Verwijs naar specifieke menu's en knoppen waar relevant
---
DOCUMENTATIE:
{content van alle 14 MDX bestanden}
---
A.5 Component Specificaties
DocsChatWidget:
- Positie:
fixed bottom-6 right-6 - Z-index:
z-50 - Trigger: 56x56px amber gradient button
- Panel: 384px breed, max 80vh hoog
- Animatie:
animate-in slide-in-from-bottom-4 fade-in
ChatMessages:
- Scroll:
overflow-y-auto - User bubbles: rechts,
bg-amber-100 - Assistant bubbles: links,
bg-slate-100 - Streaming indicator: pulserende cursor
ChatInput:
- Textarea: auto-resize, max 4 regels
- Send button: amber, disabled tijdens loading
- Enter: verstuur (Shift+Enter: nieuwe regel)
Appendix B: UI States
Widget States
| State | Weergave | Actie |
|---|---|---|
| Gesloten | Amber floating button | Klik → Open |
| Open - Idle | Chat panel met welkomst | Type vraag |
| Open - Loading | Streaming indicator | Wacht |
| Open - Streaming | Tekst verschijnt | Lees |
| Open - Error | Foutmelding | Retry knop |
Welkomstbericht
"Hallo! Ik ben de documentatie assistent voor het Mini-ECD. Stel gerust vragen over hoe het systeem werkt, bijvoorbeeld:
- Hoe maak ik een nieuwe intake aan?
- Hoe werkt de spraakherkenning?
- Waar vind ik de screening resultaten?"
Document gegenereerd als onderdeel van AI Speedrun — Week 3