Build a Streaming Vue 3 Chat UI with Codex
Use this Chinese-language source skill to adapt a ChatGPT-style Vue 3 prototype. It covers stream parsing, provider adapters, a typewriter buffer, and rendering Markdown, math, and diagrams.
中文Install in Codex
Use Codex with access to a local project. Keep the skill directory and its companion files from the same pinned revision.
- Run git clone https://github.com/pdsuwwz/chatgpt-vue3-light-mvp.git. From the checkout, run git checkout --detach e0f4678c5f6c7476f3ee8dda6308657a401f5b18.
- Copy the full .agents/skills/chatbot-mvp-distillation-zh folder to .agents/skills/chatbot-mvp-distillation-zh in your project, with its companion files.
- Open your project in Codex. Select the skill via /skills or $chatbot-mvp-distillation-zh and use the example on this page.
Example task
In an existing Vue 3 app, send “week” and “ly report” as two chunks from a local mock stream, then send a completion event. Try a normal run and a run stopped after the first chunk.What to check
The full run displays “weekly report” and reaches a completed state. The interrupted run keeps “week” and ignores later chunks. Identify the code responsible for adaptation, rendering, and cancellation.
Original SKILL.md on GitHub · Updated
Frequently asked question
Do I need a model API key to check the streaming UI?
A local mock stream can exercise chunk assembly, buffering, and cancellation. Check actual event formats and completion conditions when you connect a provider.