Start the web UI locally

The web UI is called Studio. It is the hosted control-plane UI for browsing experiments, viewing audit history, and taking governed actions like kill.

Current state

Studio is usable for hosted-control-plane testing, but it is not yet the full no-code business-user experience.

Implemented today:

• sign up and sign in,
• session-based access to the hosted API,
• experiment list for the active organization,
• experiment detail,
• audit log,
• kill action,
• SAML settings UI for org owners.

Still missing:

• first-run onboarding,
• no-code organization creation screen,
• no-code experiment creation/editing,
• visual audience/targeting builder,
• results dashboard charts,
• one-click import from local fx workspaces.

Important: local fx dev uses a .fx/ file workspace. Studio uses the hosted API and Postgres. Those are currently separate paths. Running fx apply experiments/ locally does not automatically populate Studio.

When should I use Studio?

Use Studio when you are testing the hosted API path:

Use fx when you are testing local experiments:

1. Start Postgres

Use any local Postgres. For a quick Docker database:

docker run --rm --name fx-postgres \
  -e POSTGRES_PASSWORD=postgres \
  -e POSTGRES_DB=fabric_experiments \
  -p 5432:5432 postgres:16

In another terminal, apply migrations:

export DATABASE_URL=postgres://postgres:postgres@localhost:5432/fabric_experiments
for f in infra/neon/migrations/*.sql; do
  psql "$DATABASE_URL" -f "$f"
done

If port 5432 is already in use, map another host port, for example -p 55432:5432, and set:

export DATABASE_URL=postgres://postgres:postgres@localhost:55432/fabric_experiments

2. Start the API

From the repository root:

export DATABASE_URL=postgres://postgres:postgres@localhost:5432/fabric_experiments
export BETTER_AUTH_SECRET=$(node -e "console.log(crypto.randomBytes(32).toString('hex'))")
export MANIFEST_KEY_ENC_KEY_HEX=$(node -e "console.log(crypto.randomBytes(32).toString('hex'))")
export WORKER_API_TOKEN=$(node -e "console.log(crypto.randomBytes(32).toString('hex'))")
export FX_BASE_URL=http://localhost:4000
export FX_TRUSTED_ORIGINS=http://localhost:3000
pnpm --filter @fabricorg/experiments-api dev

The API runs at http://localhost:4000.

3. Start Studio

From another terminal at the repository root:

export FX_API_BASE_URL=http://localhost:4000
export NEXT_PUBLIC_FX_API_BASE_URL=http://localhost:4000
pnpm --filter @fabricorg/experiments-studio dev

Open:

http://localhost:3000

4. Sign up and verify email

1. Open http://localhost:3000/auth/signup.
2. Create an account.
3. The local API logs the verification email link to stdout when RESEND_API_KEY is not set.
4. Open that verification link in your browser.
5. Sign in at http://localhost:3000/auth/login.

5. Active organization caveat

Studio currently expects the Better Auth session to have an active organization. The organization plugin is wired, but the business-user onboarding screen to create/select an organization is still a follow-up.

If Studio says no organization is active, that is a known M5.1 limitation, not a setup mistake.

For now, the most reliable end-to-end path for the included marketing site examples is the fx CLI walkthrough: Run the marketing site examples.

What comes next for Studio

The next product hardening step should make Studio the primary business-user path:

1. create organization on first sign-in,
2. create/import experiments from YAML,
3. edit variants and metrics in forms,
4. start/pause/kill/conclude from UI,
5. display aggregate results and guardrails.