Skip to main content
Mesa is built for teams shipping agentic, generative UI experiences. In this quickstart, you will create a repo for AI-generated dashboards, branch for proposals, and promote accepted changes to main. The goal is to show how Mesa gives you Git history and review workflows without relying on local clones.
1

Sign up and create an API key

  1. Create an account at app.mesa.dev.
  2. Create an organization for your product (example: acme).
  3. Generate an API key with repo:create, repo:read, and git:write scopes.
Store the key as an environment variable:
export MESA_API_KEY="mesa_..."
API keys are only shown once. Save them in your secrets manager before leaving the dashboard.
See Authentication & Permissions for key management and scope details.
2

Install the Mesa SDK

npm install @mesadev/sdk
# or
pnpm add @mesadev/sdk
# or
bun add @mesadev/sdk
3

Create a repo for agent-generated dashboards

In a generative UI product, each customer often gets a dedicated workspace. Mesa lets you model that as one repo per customer or per product space.
import { Mesa } from "@mesadev/sdk";

const mesa = new Mesa({ apiKey: process.env.MESA_API_KEY });

await mesa.repos.create({
  org: "acme",
  body: { name: "generated-dashboards" },
});

const seedLayout = {
  title: "Revenue Overview",
  widgets: ["kpis", "trend", "pipeline"],
};

await mesa.commits.create({
  org: "acme",
  repo: "vibecode-dashboards",
  body: {
    branch: "main",
    message: "Seed dashboard layout",
    author: { name: "UI Agent", email: "agent@acme.dev" },
    edits: [
      {
        path: "dashboards/overview.json",
        action: "create",
        content: JSON.stringify(seedLayout, null, 2),
      },
    ],
  },
});
From here, every new agent-generated layout can be a commit. You can diff, roll back, or branch per customer.
4

Branch for a proposal

Treat each agent suggestion as a branch so you can review, compare, and accept changes without mutating the main experience.
const { result: commitResult } = await mesa.commits.list({
  org: "acme",
  repo: "vibecode-dashboards",
  ref: "main",
  limit: 1,
});

const headSha = commitResult.commits[0].sha;

await mesa.branches.create({
  org: "acme",
  repo: "vibecode-dashboards",
  body: {
    name: "proposal/forecast-widget",
    headSha,
  },
});
Branch-per-proposal keeps each agent run isolated, which makes it easy to approve or discard changes.
5

Write the agent's update

Your agent can now write the suggested layout update directly to the proposal branch.
const updatedLayout = {
  title: "Revenue Overview",
  widgets: ["kpis", "trend", "pipeline", "forecast"],
};

await mesa.commits.create({
  org: "acme",
  repo: "vibecode-dashboards",
  body: {
    branch: "proposal/forecast-widget",
    message: "Add forecast widget",
    author: { name: "UI Agent", email: "agent@acme.dev" },
    edits: [
      {
        path: "dashboards/overview.json",
        action: "update",
        content: JSON.stringify(updatedLayout, null, 2),
      },
    ],
  },
});
Use Mesa as the source of truth for generated UI. Your app can render the branch head while reviewers compare it to main.
6

Promote accepted changes

When the change is accepted, write the approved layout to main. This keeps your production dashboard in sync with approved agent output.
await mesa.commits.create({
  org: "acme",
  repo: "vibecode-dashboards",
  body: {
    branch: "main",
    message: "Approve forecast widget",
    author: { name: "UI Agent", email: "agent@acme.dev" },
    edits: [
      {
        path: "dashboards/overview.json",
        action: "update",
        content: JSON.stringify(updatedLayout, null, 2),
      },
    ],
  },
});
For human workflows, you can always review with the Git CLI via Git Protocol.

​
Next steps