Switchboard

An agent-operations interface with an animated relay graph, run traces, model-usage charts and evaluation comparisons.

• Best forDevelopers building interfaces for agent orchestration, AI workflow tracing and evaluation tools.

• Agents

  Select agents on a projected 3D relay graph, inspect fictional outputs and queues, and change the replay speed or pause the simulation.

• Runs

  Search and filter sample runs, select a run and its trace spans, and replay the animated waterfall.

• Usage

  Compare fictional token usage and spend by model or agent, inspect chart tooltips and sort the workflow table.

• Evals

  Inspect evaluation scores by task and version, compare two versions and open the sample run behind a regression.

• Agent relay graph

  Glossy agent nodes, arcing handoff cables and glowing packets form an interactive Canvas 2D scene with its own perspective projection.

• Run inspection

  Filter and select sample runs, inspect prompt and response spans, and replay their trace timing.

• Usage and evaluation

  Switch chart grouping, compare workflow versions and inspect fictional costs, token counts and regression scores.

• Editable frontend

  Typed demo data, theme tokens and isolated view components provide a starting point for your own orchestration and billing services.

Responsive layouts, keyboard-accessible navigation and reduced-motion support.

Agent runs, model outputs, token counts, spend and evaluation scores are fictional scripted demonstrations. No model provider, agent runtime, tracing backend, eval runner or authentication service is connected.

• IncludedFictional demonstration data and local interactions, ready to edit. The included README identifies the data files and model.
• Not includedBackend, database, authentication, payments or AI services. Features that look connected are simulated; connect your own services when you adapt the code.

• Complete Next.js project
• 4 animated views
• Source files and project assets
• README with setup and customization
• LICENSE.md

Stack and requirements

• StackNext.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Lucide React
• FontsManrope, JetBrains Mono
• RequiresNode.js 20.9 or later, npm, and working knowledge of React and Next.js

Run it locally

Extract the ZIP, open a terminal in the project folder, then run:

npm install
npm run dev

Open localhost:3000. The README covers the data, colors, fonts and animations.

• Price$9 USD, one-time payment. No subscription or renewal.
• TaxesApplicable VAT and sales tax are included in the price. The total is shown before you pay.
• LicenseUnlimited personal and client projects. No resale or redistribution of the source. Read the license
• DeliveryAfter payment, Polar emails your receipt and a download link for the ZIP.
• RefundsIf the files don’t install or run as described and can’t be fixed within 7 days, you get a full refund. Refund policy
• Supporthello@buildindex.dev for the template as delivered.

Secure checkout by Polar. More answers in the questions.