Vibe Coding

A web-based coding platform inspired by Coze Web Coding (网页编程), powered by Claude AI.

Features

• Code Editor: Monaco-based code editor with syntax highlighting for multiple languages
• File Explorer: Visual file tree navigation
• Live Preview: Real-time preview of web applications in an iframe
• Terminal/Console: Output display for logs and errors
• AI Assistant: Claude-powered AI coding assistant for:
  • Code generation
  • Code explanation
  • Bug fixing and suggestions
  • General coding help

Tech Stack

Frontend

• Next.js 16 (App Router)
• React 19 with TypeScript
• TailwindCSS for styling
• Monaco Editor for code editing
• Zustand for state management
• Lucide React for icons

Backend

• FastAPI for REST API
• Claude AI via OpenRouter API
• Anthropic SDK for AI integration
• File system-based project storage

Project Structure

vibeCoding/
├── webapp/                 # Next.js frontend
│   ├── app/
│   │   ├── page.tsx       # Home page
│   │   └── editor/
│   │       └── page.tsx   # Main editor view
│   ├── components/
│   │   ├── navbar/        # Top navigation
│   │   ├── file-explorer/ # File tree sidebar
│   │   ├── code-editor/   # Monaco editor
│   │   ├── preview-panel/ # Preview iframe
│   │   ├── terminal/      # Console output
│   │   └── ai-assistant/  # AI chat interface
│   └── lib/
│       ├── api.ts         # API client
│       └── store.ts       # Zustand state management
│
├── server/                # FastAPI backend
│   ├── main.py           # FastAPI app entry
│   ├── routers/
│   │   ├── projects.py   # Project CRUD
│   │   ├── files.py      # File operations
│   │   ├── ai.py         # AI assistant
│   │   └── preview.py    # Preview generation
│   ├── services/
│   │   ├── project_manager.py # Project management
│   │   ├── file_manager.py    # File operations
│   │   └── claude_agent.py    # Claude AI integration
│   └── models/
│       └── schemas.py    # Pydantic models
│
└── ARCHITECTURE.md       # Detailed architecture documentation

Setup Instructions

Prerequisites

• Node.js 18+ and pnpm
• Python 3.10+
• OpenRouter API key (for Claude AI)

Backend Setup

1. Navigate to the server directory:

   cd server

2. Install Python dependencies:

   pip install -r requirements.txt

3. Configure environment variables in .env.local:

   OPEN_ROUTER_API_KEY=your_api_key_here
   

4. Start the backend server:

   python3 main.py

   The API will be available at http://localhost:8000

Frontend Setup

1. Navigate to the webapp directory:

   cd webapp

2. Install dependencies:

   pnpm install

3. Start the development server:

   pnpm dev

   The app will be available at http://localhost:3000

Usage

1. Access the App: Open http://localhost:3000 in your browser

2. Create a Project:

   • Click "新建项目" (New Project)
   • Enter a project name
   • Choose a template (Blank, React, HTML)

3. Edit Code:

   • Navigate files in the left sidebar
   • Click a file to open it in the editor
   • Edit code with syntax highlighting and auto-completion

4. Preview:

   • Your changes are automatically reflected in the preview panel
   • Click the refresh button to reload the preview

5. AI Assistant:

   • Click the AI assistant icon to open the chat
   • Ask questions about your code
   • Request code generation or explanations
   • Get debugging help

API Endpoints

Projects

• GET /api/projects/ - List all projects
• GET /api/projects/{id} - Get project details
• POST /api/projects/ - Create new project
• DELETE /api/projects/{id} - Delete project

Files

• GET /api/files/{path}?projectId={id} - Read file
• POST /api/files/ - Write file
• DELETE /api/files/{path}?projectId={id} - Delete file

AI Assistant

• POST /api/ai/chat - Chat with AI
• POST /api/ai/generate - Generate code
• POST /api/ai/explain - Explain code

Utility

• GET /health - Health check
• GET / - API info

Development

Running Tests

# Frontend
cd webapp
pnpm test

# Backend
cd server
pytest

Building for Production

# Frontend
cd webapp
pnpm build

# Backend - Use a production ASGI server
cd server
uvicorn main:app --host 0.0.0.0 --port 8000

Features Roadmap

• Project management (create, open, delete)
• File tree navigation
• Code editor with syntax highlighting
• Live preview
• AI assistant integration
• Multiple file tabs with proper management
• Project templates (React, Next.js, etc.)
• Git integration
• Collaborative editing
• Mobile responsiveness
• Dark/light theme toggle
• Keyboard shortcuts
• File search functionality
• Code formatting
• Linting integration

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT

Acknowledgments

• Inspired by Coze Web Coding
• Powered by Claude AI
• Built with Next.js and FastAPI