Skip to content
2 min read · 480 words

Frontend Deployment

A standard Next.js 15 deployment with one twist: every page needs server-side reachability to the backend, so the three AGENTOPS_* variables are the whole configuration story.

Build and run

bash
cd frontend
npm ci                 # or npm install
npm run typecheck      # tsc --noEmit — the only quality gate that exists
npm run build          # next build
npm run start          # next start (serves the production build)

The build succeeds without the backend running: both data pages are force-dynamic, so nothing fetches at build time — backend availability matters at request time only.

Environment wiring

Set on the frontend host (all read server-side; none are exposed to the browser):

ini
AGENTOPS_API_BASE_URL=https://api.your-domain.tld
AGENTOPS_DASHBOARD_API_URL=https://api.your-domain.tld/agents/1/dashboard
AGENTOPS_AGENTS_API_URL=https://api.your-domain.tld/agents/

All three must point at the same backend; the dashboard URL pins which agent the dashboard shows (Configuration).

Where to host

HostNotes
Vercelnatural fit; set the three env vars in project settings, root directory = frontend/
Node server / containernpm run build && npm run start behind a reverse proxy
Static export❌ not possible — server components fetch per request and there's an API route

The repository's root vercel.json belongs to the docs site (Docs Site). Deploying the frontend on Vercel means a second Vercel project with its Root Directory set to frontend/ — don't reuse the root project.

Runtime topology

Rendering diagram…

The browser only ever talks to the frontend origin — CORS never enters the picture, and the backend can stay on a private network reachable only by the frontend host. That makes the frontend an accidental (and useful) security layer; it also means frontend-host → backend-host networking must exist server-side (private networking, VPC peering, or an internal URL).

Pre-launch checklist

  • npm run typecheck clean
  • Three AGENTOPS_* vars set and reachable from the frontend host (not your laptop)
  • Backend deployed first and /health green (Backend Deployment)
  • An agent with ID matching the dashboard URL exists (or the dashboard shows its error panel)
  • Error states verified: stop the backend, confirm /dashboard and /agents render their error panels rather than crashing

Known rough edges in production

The UI's placeholder affordances ship as-is: sidebar Workflows/Operations links go nowhere, AgentCard's Open targets an unimplemented route, Edit/Run buttons are inert, and dashboard charts show sample shapes (Known Issues). Cosmetically fine for an internal tool; know they're there before demoing.

PreviousBackendNextDocs Site