Qoder CN + Qwen3.8-Flash: AI Agent That Codes, Tests, and Fixes Its Own Frontend

What Is Qoder CN

Qoder CN is a local agent workbench that resides on the user's machine. Given a goal, it plans steps, invokes tools, edits files, and runs commands while the user observes, adds requirements, and validates results. Files stay local; no upload or web authorization is needed. It can also attach to an already-open Chrome or Edge instance, preserving login state.

The tool offers two modes: Programming mode organizes code by workspace and suits code changes, command execution, and Git operations; General mode organizes by folder and suits research, content creation, and data organization. Only one mode is used per session.

Installation and Model Configuration

Download the installer from the Qoder CN official site; Windows, macOS, and Linux packages are available.

Built-in models include Qwen3.8-Max, Qwen3.8-Flash, DeepSeek-V4-Pro, GLM-5.3, and others; models can be switched at any time without vendor lock-in.

Personal edition also supports custom models: in Settings → Model, add your own API key. Pre-configured providers include Alibaba Cloud Bailian, DeepSeek, Zhipu (GLM), Kimi, MiniMax, Xiaomi MIMO, plus any OpenAI/Anthropic-compatible base URL. Using your own key does not consume Qoder Credits.

Programming Mode Hands-On: Building a Personal Accounting Dashboard

Test case: create a personal accounting dashboard front-end skeleton with Vite + Vue3 + Element Plus + ECharts.

Workspace Setup

Create a workspace by clicking the plus icon next to "Workspace", choose a folder, and name it. All generated code will be placed there.

Approval Mode

Qoder CN provides three approval modes. The author selected Auto-approval: the agent asks for confirmation before sensitive operations (file deletion, system config changes), making the process visible and controllable.

Initial Prompt

用 Vite + Vue3 + Element Plus + ECharts 搭一个个人记账看板的前端骨架：
- 三块：顶部月份筛选；中间一张月度收支趋势折线图和一张分类占比饼图；
  下面一个记账列表表格（日期、分类、金额、备注）带"新增一笔"表单。
- 搭完帮我装依赖并把 dev server 跑起来。

After sending the prompt, Qoder CN autonomously broke down the task, wrote code, installed dependencies, started the dev server, opened the built-in browser to inspect the rendered result, and fixed issues by itself. Previously, the author had to manually screenshot, copy console errors, and feed them back — now the agent handles the verification loop.

Iteration via Visual Annotation

The first version met most requirements but the accounting list lacked pagination. The author circled the list area and wrote "Add pagination to the accounting list". The agent modified the code and refreshed the page to show the effect.

The final result included: top month filter, middle trend line chart plus category donut chart, bottom accounting table with add-entry form and pagination — a working dashboard skeleton. The author emphasizes that the biggest time-saver is not code generation speed but the automated verification step; the annotation feature (circle an area, describe change) is far more precise than textual description.

Conclusion

After a full cycle, Qoder CN feels less like a traditional "AI code editor" and more like a resident local agent workbench that finishes tasks end-to-end: you state the goal, it decomposes and executes, opens a browser to self-verify, and you annotate the UI for corrections. Models and tiers are swappable on the fly, and custom keys are supported. Notably, the general mode runs on the same programming agent engine. Interested developers can download and try it.