Skip to main content
Supported Regions:上海

Dev Mode Code Editor

Dev Mode is an advanced code editing environment provided by AI Builder, allowing developers to directly edit generated code, perform deep customization, and develop advanced features.

Overview​

Dev Mode provides complete code editing capabilities for users with programming experience. You can:

  • 📝 Directly edit code: Modify frontend, backend, and database code
  • 🔧 Add custom feature: Implement complex logic that AI cannot generate
  • 🐛 Debugging and Optimization: Debug code and optimize performance

Go to Dev Mode​

Startup Method​

In the session, click the "Dev Mode" slider button in the upper right corner to go to the Dev Mode code editor.

Environment Preparation​

Before entering Dev Mode, the system will automatically:

  • Generate the complete project code structure
  • Configure the development environment and dependencies
  • Start the local development server
  • Synchronize cloud resource configurations

Code Editor Interface​

Main Area​

  1. File Explorer: Project file directory tree
  2. Code Editing Area: The main interface for code editing
  3. Terminal Console: Command-line operations and log output
  4. Preview Window: Real-time preview of the application effect
  5. Debugging Panel: Breakpoint debugging and variable monitoring

Editor Capabilities​

  • Syntax Highlighting: Supports multiple programming languages
  • Intelligent Code Completion: Code auto-completion and suggestions
  • Error Checking: Real-time syntax and logical error checking
  • Code Formatting: Automatic code formatting and beautification
  • Shortcut Key Support: Rich set of editing shortcuts

Project Structure​

⚠️ Important Note for Online Editing: Editable Scope

Supported Files for Saving:

  • Components in the src/components/ directory (excluding the ui subdirectory)
  • Page files in the src/page/ directory Other files can also be modified and debugged, but they will not be synchronized to the AI. You can download the code to obtain the modifications made in the editor.

File Saving

After editing, you must click the top-right corner to switch back to Agent mode; otherwise, all modifications will be discarded upon exit!

Editable Front-end Project Structure​

├── src/
│   ├── components/     # Components directory
│   ├── pages/         # Pages directory

Back-end Project Structure​

├── /
├── .datasources/     # Data models directory
├── .functions/     # cloud functions directory

Debugging and Testing​

Environment Requirements​

  • Node.js (recommended 16.x or higher)
  • Yarn package manager

Install dependencies​

# Install yarn (if not installed yet)
npm install -g yarn

# Install project dependencies
yarn install

Starting the Development Server​

yarn run dev

After starting, the project will run on the local development server and can usually be accessed at http://localhost:8080 or other ports.

Next Steps​

After completing code development and debugging, you can proceed with resource release:

🚀 Start Resource Release →

Alternatively, if you need version management, you can set up Git first:

📝 Configure Git Management →