Tutorial 1: Your First App

In this tutorial you will scaffold a complete full-stack application skeleton, connect your AI IDE to your Buildpad cloud backend, and have a running app ready for development — all in under 30 minutes.

By the end you’ll have:

A Next.js app bootstrapped with the correct project structure
A running DaaS backend connected via MCP
A working Phase 0 foundation (auth, layout, tests) that all future tutorials build on

Prerequisites

A Buildpad.ai account with a project created — see Quick Start if you haven’t done this yet.
VS Code with the GitHub Copilot extension or Kiro or Google Antigravity installed.
The starter project for your IDE downloaded from the platform — see AI IDE Setup.

All tutorials in this series build a Project Management App. Keep your starter project folder open throughout — you’ll keep adding to it in each tutorial.

Open Your Starter Project

After downloading and unzipping the starter from your project’s Details page, open it in your IDE.


code path/to/your-starter

The starter contains your project’s credentials in .vscode/mcp.json (VS Code) or the equivalent config file for Kiro/Antigravity. Your AI assistant will automatically connect to your cloud backend using these credentials.

- - copilot-instructions.md

Confirm MCP Connections Are Active

In VS Code, open the MCP panel (or check the status bar). You should see three green connections:

buildpad — Gives your AI access to the Buildpad UI component library and conventions.
daas — Connects to your live project backend, including your database schema and environment.
buildpad-platform — Connects to the Buildpad platform to provide your full project context: organization, project configuration, microservices, and environment URLs.

If the connections are not active, see AI IDE Setup for troubleshooting.

Scaffold the Application

Agent mode required — /create-project is a skill that takes real actions in your project. In VS Code, open Copilot Chat and switch to agent mode (the ⚡ icon or the mode selector). In Kiro, open the Kiro Chat panel — slash commands work natively. In Antigravity, type the equivalent natural language prompt instead: “Create a new DaaS project called Project Management App — a tool for managing projects and tasks with role-based access and workflow automation.”

In VS Code or Kiro, open the AI chat panel and type:


/create-project

The skill reads your workspace context and .env.local credentials automatically. It may ask for your app name and description if it can’t infer them — provide:

App name: Project Management App
Description: A tool for teams to manage projects and tasks with role-based access and workflow automation.

The agent will present a detailed plan covering the full Phase 0 foundation before making any changes:

What gets created	Details
Next.js app scaffold	TypeScript, Mantine v8, Buildpad components
DaaS CORS config	Allowlists your localhost and deployed URLs
Auth wiring	`DaaSProviderWrapper`, login/logout/callback proxy routes
Authenticated layout	`app/(authenticated)/layout.tsx` with scoped provider
Test infrastructure	Playwright (E2E) + Vitest (unit) configured
`PHASES.md`	Progress tracker for all 6 development phases

Review the full plan the agent presents before confirming. Type yes to proceed — the skill will then create real files in your local folder.

Verify Dependencies and Start the Dev Server

The bootstrap command run by /create-project already installs dependencies. Start the dev server:


pnpm dev

Your app runs at http://localhost:3000. You should see the sign-in page — your Supabase auth is already connected.

The dev server hot-reloads as you make changes. Keep it running in a separate terminal throughout the tutorial series.

To find your sign-in credentials, go to your BuildPad Project’s detail page and scroll down to the Services Configuration section — the DaaS Studio Admin email and password are listed there.

Open http://localhost:3000 and sign in with those credentials. You’ll land on the app shell — the header and sidebar are in place, and the main content area is ready for your pages.

What’s in the Generated Project

After Phase 0 completes, your project looks like this:

- - layout.tsx
  - page.tsx
PHASES.md

What’s Next

Your app is running and authenticated. In the next tutorial you’ll design the data schema — the collections and fields that power the project management features.

Continue to Tutorial 2: Collections & Data →