Mandarin Quest

Mandarin Quest is a generative UI Mandarin learning game built around CopilotKit and A2UI. CopilotKit acts as the Director and Coach: it reads live quest state, receives events from the voice loop, and calls typed frontend tools to update the interface. A2UI renders the coaching surfaces declaratively, so the app can generate the right interactive UI at runtime: a correction card, phrase ladder, adaptive drill, policy approval, or session review.

The experience is set in a Shenzhen night market. Instead of filling out exercises or chatting with a tutor, the learner speaks naturally to complete small missions: order bubble tea, ask the price, bargain, and ask for directions. A realtime voice model owns the speech and roleplay loop, while CopilotKit turns what happens in the conversation into UI changes. If the learner says the wrong measure word, the app renders a correction moment. If they use a successful phrase, the mission advances, inventory updates, and the NPC mood changes. At the end, the transcript becomes a review surface.

This is not a chatbot wrapped in game art. The agent is actively shaping the interface through structured tools and declarative UI. The stack is Next.js, React, TypeScript, Tailwind CSS, Zustand, and Zod, with CopilotKit / AG-UI for shared state and frontend tool orchestration, A2UI for the no-chat coach renderer, and WebRTC for realtime voice interaction.

Prior to the hackathon I pre-generated the artwork assets used as well as a mock UI image.