Back to projects
Full-StackIn Progress

Compose Web - VS Code Full-Stack Website Scaffold

VS Code plugin-based full-stack website scaffold system, rapidly assembling complete frontend/backend projects through Agent dialogue.

TypeScriptVS Code ExtensionOpenAITemplate Engine

Overview

Compose Web is a VS Code plugin-based full-stack website scaffold system. Users describe requirements in natural language, and after Agent-guided clarification, complete frontend/backend project code is generated.

Core Features

Natural Language Driven

User describes requirements, Agent guides clarification then generates code:

  • Intelligent understanding of user intent
  • Proactive clarification of ambiguous requirements
  • Generates code meeting expectations

Block-Based Assembly

Three-Layer Block Structure:

LayerDescriptionExample
AtomSmallest functional unitButton, input, API route
ComponentFunctional combinationLogin form, user card, data table
CompositePage/SystemLogin page, user management, complete admin panel

Multi-Stack Support

FrontendBackendDatabase
VueNode.jsPostgreSQL
ReactPythonMySQL
SvelteGoMongoDB
CustomCustomCustom

Self-Validation Self-Repair

Strategy Degradation Mechanism:

normal → conservative → minimal
  ↓           ↓            ↓
Full generation  Safe mode    Minimal
  • normal: Complete functionality, full template coverage
  • conservative: Safe mode, avoid risky operations
  • minimal: Minimal generation, manual completion

Technical Architecture

VS Code Plugin Architecture

┌─────────────────────────────────────────┐
│              VS Code Extension            │
├─────────────────────────────────────────┤
│  Webview Panel (Vue 3)                   │
│  • Chat interface                         │
│  • Preview panel                          │
│  • Configuration settings                 │
├─────────────────────────────────────────┤
│  Core Services                           │
│  • Block Manager                         │
│  • Agent Core                            │
│  • Project Initializer                   │
│  • File Editor                           │
├─────────────────────────────────────────┤
│  LLM Client                              │
│  • OpenAI / Claude / DeepSeek            │
│  • Kimi / GLM / Wenxin / Tongyi          │
└─────────────────────────────────────────┘

Incremental Context Reading

ModeSpeedPurpose
quickScanSecondsQuick location of insertion points
deepAnalyzeMinutesDeep understanding of project structure

Supported LLM Providers

  • OpenAI (GPT)
  • Anthropic (Claude)
  • DeepSeek
  • Moonshot (Kimi)
  • Zhipu (GLM)
  • Baidu (Wenxin)
  • Alibaba (Tongyi)
  • Tencent Cloud (Hunyuan)
  • Custom OpenAI-compatible endpoints

Current Status

Design phase, architecture documentation complete, awaiting implementation.