Vibe Coding Platform Template
The Vibe Coding Platform Template deeply integrates platform SKills capabilities and is suitable for rapidly generating full-stack Web applications and AI Agents based on Makers capabilities. Developers can use this template to quickly build a Vibe Coding platform that supports multi-tenant isolation, multi-framework adaptation, and one-click edge deployment.
Overall Architecture
Quick Start
1. Create and obtain an API Token.
2. Use the sample template below to quickly try it out and deploy with one click.
3. On the deployment configuration page, enter the
API_TOKEN environment variable.4. Click Deploy and wait for Makers to complete the build and generate an access URL.
Core Template Capabilities
Makers Skills Integration
The template has Makers Skills built in at
.claude/skills/, providing the Agent with framework conventions, platform APIs, directory specifications, and deployment requirements.The Agent uses the corresponding Skill based on the task. The generated project must first pass the Makers compatibility check, which verifies whether the framework adapter is in place, whether the platform declaration files are complete, and whether the directory structure is compliant. If the check fails, the Agent automatically attempts one round of repair.
You can update the platform's latest Skills by running
npm run sync:skills, which will replace the .claude/skills/ directory.Starting Preview
At runtime, the Agent constructs the command string for starting the preview, passes the tenant Token as a parameter, and then invokes the EdgeOne CLI through the sandbox's commands tool to start the project preview.
export function buildMakersDevLaunchCommand(port: number, projectName: string) {return `edgeone makers dev -t ${token} --port ${port} --skip-env-sync --name ${shellQuote(projectName)}`;}
Executing Deployment
At runtime, the Agent constructs the command string for deployment, passes the tenant Token as a parameter, and then invokes the EdgeOne CLI through the sandbox's commands tool to perform the deployment.
function makersDeployLaunch(projectName: string, requestedCommand: string, area = 'global') {const previewEnvironment = /(?:^|\s)(?:-e|--environment)(?:\s+|=)preview(?:\s|$)/i.test(requestedCommand);return ['edgeone makers deploy',`-t ${token}`, // Tenant token`-n ${shellQuote(projectName)}`,'--json',`--area ${area}`,previewEnvironment ? '-e preview' : '',].filter(Boolean).join(' ');}
Code Persistence
Save workspace code
Call
persist() after each round of code modifications:try {const persist = await context.sandbox.persist({path: projectPath}); // path is the project directory.} catch (error) {// A save failure does not prevent the current sandbox from continuing to work. You can log the error and retry later.console.warn('Failed to save workspace:', error);}
Restore workspace code
After a new sandbox is created, the Agent calls
restore() before it starts reading from or writing to project files:const result = await context.sandbox.restore({path: projectPath});
Note: If
restore() returns failed, do not call persist() again in this round. Otherwise, you may overwrite the last available snapshot with an incomplete workspace.Local Debugging and Deployment
Starting Local Development and Debugging
1. Go to the project root directory and install EdgeOne CLI:
npm install -g edgeone
2. Log in and associate the Makers project that was previously deployed using the template:
edgeone loginedgeone makers link
After the project is associated, the
API_TOKEN configured in the console and the API Key required to call Models are automatically synchronized to the local environment.3. Start the Makers local development environment:
edgeone makers dev
After a successful startup, visit http://localhost:8088/ to open the application. Visit http://localhost:8088/agent-metrics to view detailed trace information for Agent calls.
Deploying the Project
If the project is associated with a Git repository, pushing code triggers the CI build and deployment of Makers. You can also deploy directly through the CLI:
# Deploy to Productionedgeone makers deploy -n <project name>
After a successful deployment, click the link in the Console to access the build details and the deployed URL.
