docs: plan Klicker MCP server and chat integration#5080
Conversation
Adds a planning document covering the MCP server scope, tool surface, auth model, and how to render quiz/element tool results inline in the chat app via either an iframe-embed of the PWA practice quiz or a shared QuestionCard component. https://claude.ai/code/session_01AVNNW9YUwSTsU44L6RqBN9
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdded a planning document for the Klicker MCP server specifying architecture decisions, v1 tool surface with JSON output rules, two-layer authentication, quiz rendering approaches, and a phased implementation roadmap (phases 0–4). ChangesMCP Server Planning
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Suggested labels
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Review rate limit: 0/1 reviews remaining, refill in 60 minutes.Comment |
There was a problem hiding this comment.
Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.
There was a problem hiding this comment.
Pull request overview
Adds a work-in-progress planning document that proposes how to introduce a Klicker-owned MCP server (read-only v1 tool surface) and integrate its tool results into the existing chat app, including an iframe-based quiz rendering path and a longer-term headless QuestionCard extraction.
Changes:
- Added a detailed design/roadmap for an
apps/mcp-server/service, including proposed auth/authorization and a v1 tool catalog. - Documented two chat rendering approaches for quiz/question tool results (iframe embed first, shared component extraction later).
- Outlined phased delivery steps (scaffold → tools → seeding → chat UI glue → deployment).
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| tool-mediated answers and on how to render evaluations back into chat. | ||
| 6. **Tool naming**: `klicker_<entity>_<verb>`. We do **not** prefix with the server name, | ||
| because the chat client will namespace using the `name` field of `ChatbotMCPServer` | ||
| (e.g. `Klicker.klicker_practice_quiz_get`). |
|
|
||
| 1. The `klicker_practice_quiz_get` tool returns `{ id, courseId, displayName, numOfStacks, ... }`. | ||
| 2. A new `apps/chat/src/components/tools-ui/practice-quiz-tool-ui.tsx` registers a | ||
| `makeAssistantToolUI({ toolName: 'Klicker.klicker_practice_quiz_get', render })` that: |
Summary
project/plans_wip/PLAN-mcp-server.mdcapturing the design for a Klicker-owned MCP server (we currently only have client-side MCP integration inapps/chat).klicker_course_*,klicker_practice_quiz_*,klicker_element_get,klicker_progress_get,klicker_search_content,klicker_recommended_next).X-Klicker-ParticipantJWT for per-call participant scope (uses thepassChatbotIdpattern already supported inChatbotMCPServer, plus a newpassParticipantTokenflag).?embed=1PWA practice quiz page (reuses theklicker:embed-init/klicker:quiz-statepostMessage protocol that already shipped) and (B) extracting a headlessQuestionCardintopackages/shared-componentsfor inline single-question rendering viamakeAssistantToolUI.apps/mcp-server/→ land 3 read tools + chat-side iframe tool UI → expand toolset → extractQuestionCard.Context
v3— no MCP-server code yet.apps/chat/src/services/mcpClients.ts(client),apps/chat/src/components/tools-ui/rag-tool-ui.tsx(rendering primitive via@assistant-ui/react),apps/frontend-pwa/src/pages/course/[courseId]/practiceQuizzes/[id].tsx(already embed-friendly), and the per-element components inpackages/shared-components/src/.project/KB_PLAN.md(native KB / RAG ingestion) andproject/plans_wip/PLAN-chat-pwa-integration.md(deep-link / side-panel chat) — plan calls those out and avoids duplication.Test plan
APP_SECRETusage.frame-ancestorsdirective (HAProxy in prod, Traefik in dev) before relying on Path A iframe rendering.agent-browseragainst the seededTestkurschatbot.https://claude.ai/code/session_01AVNNW9YUwSTsU44L6RqBN9
Generated by Claude Code
Summary by CodeRabbit