MCP Server Documentation

// Step 1: Get a starter template
const template = await call("get_template", { template: "vite-react" });

// Step 2: Modify files based on user requirements
const files = {
  ...template,
  "src/App.jsx": `export default function App() {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
  }`
};

// Step 3: Create the preview (boots WebContainer, npm install, starts dev server)
const preview = await call("create_preview", { files });
// Returns: { sessionId, previewUrl, liveViewUrl }

// Step 4: Iterate based on user feedback
await call("update_preview", {
  sessionId: preview.sessionId,
  files: { "src/App.jsx": "// Updated code..." }
});
// Changes appear instantly via hot reload!

// Step 5: Deploy when ready
await call("deploy_preview", {
  sessionId: preview.sessionId,
  name: "my-counter-app",
  target: "cloudflare"
});

// Step 6: Clean up
await call("close_preview", { sessionId: preview.sessionId });