Vue3 + Electron + Cursor in Action: A Step-by-Step Guide to Building a Cross-Platform AI Chat App

Why Frontend Engineers Need to Rethink Their Career Path in the Age of AI

"Will AI replace programmers?" — that question hangs over many developers like a cloud. Bilibili creator Zhang Xuan opens this hands-on course with a clear-eyed take: AI isn't a threat, it's an opportunity to reshape how we work. What it truly frees us from is repetitive, mechanical coding, so we can focus on higher-value activities like understanding requirements, designing architecture, and making informed technical trade-offs.

In his words, after using Cursor intensively for over six months, his entire programming experience was redefined — "It's like I hired 10 junior developers under me. I just review, hit accept, and move on." That's a bit tongue-in-cheek, but it points to a real truth: the roles at risk of being replaced are those with no learning agility, only surface-level knowledge, and no big-picture thinking — not engineers who can reason about systems.

Building on that premise, the course breaks down "the future-ready frontend engineer" into several core competencies: solid JavaScript/TypeScript fundamentals and advanced features, modern frameworks (React or Vue), Electron desktop development, LLM API integration with multi-model orchestration, and high-efficiency use of AI-enhanced editors like Cursor and Windsurf. The ultimate goal is to operate at the level of system architecture and design.

Project Goal: A Desktop Chat App Integrating Four AI Models

The course's capstone project is a cross-platform AI desktop chat application — essentially a simplified ChatBox. The motivation is straightforward: ChatGPT, DeepSeek^Ad, Doubao, Kimi, ERNIE Bot, and Qwen all have separate chat interfaces. Why not integrate them into a single app where you can switch between models within one unified UI?

The demo shows a fairly complete interactive experience:

• A conversation list on the left, supporting new chats and session switching
• Model switching between ERNIE Bot, Qwen, OpenAI, and DeepSeek
• Multimodal models like Qwen-VL-Plus can recognize image content (the demo successfully identifies a Golden Retriever)
• Code Q&A with syntax highlighting
• A settings page for switching themes, accent colors, and language
• A model settings page to add, enable, or disable individual models

The emphasis on "extensible design" is key here — rather than hardcoding a few API integrations, the architecture is built to accommodate more models down the line, which aligns closely with real-world engineering needs.

Tech Stack Breakdown: A Modern Full-Chain Frontend Selection

This application connects nearly every hot technology at the intersection of frontend and AI right now. The tech choices are worth breaking down individually.

Frontend Layer

• Vue 3.5: Leveraging the latest features and best practices
• TypeScript: Used throughout for strong type safety
• Vite: As the build tool
• Pinia: For state management
• Tailwind CSS: For styling
• Radix Vue: Component library
• markdown-it: For content processing and rendering

AI Integration Layer

On the model side, the app integrates three major Chinese LLM providers — ERNIE Bot, Qwen, and DeepSeek — all managed through a unified AI Service Layer.

The key challenge in multi-model integration is that different providers don't share a unified API format. ERNIE Bot (Baidu), Qwen (Alibaba), and DeepSeek each have their own authentication methods, request structures, and streaming response formats. The AI Service Layer (AI Manager) in this course solves exactly that — using an abstraction layer to normalize provider differences and expose a consistent interface to higher-level components. This is a textbook application of the Adapter Pattern in real engineering. The key difference between multimodal models (like the Qwen-VL series) and text-only models lies in the input format: multimodal APIs support mixing image data (typically Base64-encoded or as image URLs) directly into messages, allowing the model to analyze visual content alongside text instructions. This capability is already widely deployed commercially in customer service, document parsing, and chart Q&A use cases.

Electron Desktop Layer

• Electron 30: Latest major version
• Electron Forge: Scaffolding and packaging tool
• IndexedDB + Dexie.js: Local storage solution

The overall architecture is divided into three sections: the main process communicates with the renderer process via IPC Main / IPC Renderer; the renderer layer uses Radix Vue for the UI and IndexedDB for data storage; the AI layer is managed by an AI Manager that coordinates multiple AI Providers (Qwen, ERNIE Bot, DeepSeek), with a Custom AI extension slot reserved and External Services connected outward. This is a classic Electron application architecture diagram, and it's highly instructive for understanding the separation of responsibilities between the main and renderer processes.

Electron's core design bundles the Chromium browser engine with the Node.js runtime, enabling web technologies to power native desktop applications. Its architecture is inherently split into two processes: the Main Process manages the application lifecycle, creates windows, and calls native OS APIs; the Renderer Process is essentially a Chromium tab responsible for rendering the UI. The two communicate via IPC (Inter-Process Communication) — the main process listens on ipcMain events, while the renderer sends requests through ipcRenderer. This is the most fundamental collaboration pattern in Electron development. The isolation design matters for security and stability: the renderer process cannot directly access the file system or low-level networking and must proxy through the main process, preventing malicious web code from directly manipulating system resources. Electron Forge is the officially recommended scaffolding tool, handling the full lifecycle from project initialization and development to packaging final installers for Windows, macOS, and Linux.

Progressive Learning: Write First, Then Use AI

The most distinctive aspect of this course is its pedagogical philosophy — rather than jumping straight into AI-generated code, it takes a "progressive" approach: the early phase is pure manual coding, and AI assistance via Cursor is only introduced later.

Zhang Xuan's reasoning is compelling. In the early stages, developers need to understand the entire project architecture, grasp the relationships between modules, and build intuitive familiarity with the codebase. Only when you deeply understand the project can you determine which parts to delegate to AI and how to describe requirements accurately. Later, once the architecture is fully internalized, you can use Cursor to tackle the harder parts that require extensive documentation lookup — and that's when AI truly adds value. That's the right way to work with AI.

He uses a fitting analogy: learning to drive means you first need to understand how driving works before you can make the most of driver-assistance features. This "understand first, use second" logic is precisely the step most AI coding tutorials skip — over-relying on AI too early strips away your sense of control over the code.

Cursor is an AI-enhanced code editor built on a heavily modified VS Code foundation, with its core strength being the deep integration of large language models directly into the coding workflow. Its Composer/Agent mode lets developers describe requirements in natural language, with AI generating, modifying, or even refactoring code across files — presenting all changes as a diff for developers to review and accept. Unlike GitHub Copilot's line-by-line completions, Cursor excels at context-aware tasks like "implement this feature on top of the existing project" — it automatically reads the current project structure and relevant files. This explains why the course emphasizes "write manually first to understand the architecture": Cursor's output quality heavily depends on the context and precision of your instructions. Someone unfamiliar with the project will struggle to write effective prompts and risk getting lost in AI-generated code.

Prerequisites and Key Takeaways

The barrier to entry is low, requiring just two things:

1. Familiarity with frontend fundamentals: HTML, CSS, and JavaScript
2. Experience with Node.js and npm

The course also includes bonus coverage of TypeScript core concepts, Vue 3.5 new features, and Electron cross-platform development basics. Those already familiar can skip ahead, but those with weaker foundations are advised to work through them — "your fundamentals set your ceiling."

The outcomes can be summarized across four tracks: mastering the latest Vue 3 and Electron stack end-to-end; completing hands-on integration of four major AI models with a deep dive into multi-model orchestration; achieving significant productivity gains through Cursor-assisted development; and ultimately leveling up to system architecture and design, taking the first steps toward becoming a software architect.

For frontend developers uncertain about their path in the AI era, this course offers a pragmatic model: it neither blindly hypes AI as a replacement for everything, nor ignores the efficiency transformation AI brings. Instead, it puts the focus squarely on how humans collaborate with AI — which may be the most important competitive skill to develop right now.