ARCP Console

Web console for observing and controlling ARCP agent runtimes. It connects to an ARCP server over WebSocket to submit jobs, stream their events, and inspect agents and sessions — built with the ARCP TypeScript SDK. Any ARCP client SDK can drive the same server, so the console is language-agnostic.

Status — early scaffold. The Motif theme, the ARCP client wiring, and the themed component gallery are in place. The runtime/job/agent screens are stubs being built out against the SDK. See Roadmap.

Features

• Overview of jobs, agents, and runtime health
• Submit agent jobs and stream their events and results
• Inspect agent, session, and lease state
• Connects to any ARCP server over WebSocket (ws(s)://)
• Language-agnostic: the server accepts clients from any ARCP SDK
• A themed, browsable gallery of every Nuxt UI component (see below)
• Light/dark, Material Symbols icons, the Motif (UniFi) palette throughout

Quick start

The console is a Nuxt app that talks to an ARCP server. Point it at your server and run it:

cp .env.example .env          # set ARCP_SERVER_URL=ws(s)://<your-arcp-server>
docker compose up --build

• Console: http://localhost:3000
• It connects to the ARCP server at ARCP_SERVER_URL (default http://localhost:8080)

docker-compose.yml:

services:
  console:
    build: .
    ports:
      - "3000:3000"   # console UI
    environment:
      NUXT_PUBLIC_ARCP_SERVER_URL: ${ARCP_SERVER_URL:-http://localhost:8080}

Run locally

Requires Node 22+ and pnpm.

pnpm install
pnpm dev        # http://localhost:3000 (hot reload)

Other scripts:

pnpm build          # production build
pnpm test           # vitest (ARCP client unit tests)
pnpm storybook      # Storybook at http://localhost:6006

Configuration

Set via environment variables. Nuxt maps NUXT_PUBLIC_* onto runtime config.

Variable	Default	Description
NUXT_PUBLIC_ARCP_SERVER_URL	http://localhost:8080	ARCP server the console connects to
PORT	3000	HTTP port for the console

docker-compose.yml maps the friendlier ARCP_SERVER_URL onto NUXT_PUBLIC_ARCP_SERVER_URL.

Connecting clients

The console is itself an ARCP client. It builds a session with the @agentruntimecontrolprotocol/sdk and connects over a WebSocket transport:

import { ARCPClient } from "@agentruntimecontrolprotocol/sdk";
import { WebSocketTransport } from "@agentruntimecontrolprotocol/sdk/transport";

const client = new ARCPClient({
  client: { name: "arcp-console", version: "0.1.0" },
  authScheme: "bearer",
  token,
});

const transport = await WebSocketTransport.connect("ws://localhost:8080");
await client.connect(transport);
const handle = await client.submit({ agent: "summariser", input: {} });

The same server is reachable from any SDK — TypeScript, Python, Go, Rust, Java, Kotlin, Swift, Ruby, PHP, C#, F#. Method names follow each SDK; see the SDK docs.

Component gallery

A themed, searchable gallery of every Nuxt UI component lives at /components (in the sidebar). Each component has a showcase of its colors, variants, sizes, and states in the Motif theme, with ARCP-flavored examples — handy for designing console screens.

• Registry: app/utils/gallery.ts
• Showcases: app/components/showcase/ — one SFC per component
• Pages: app/pages/components/ (index + [slug])

Storybook is installed (pnpm storybook) for reference, but its preview build does not apply Nuxt UI v4's Tailwind-v4 theme (components render unstyled there — a known upstream gap). The in-app gallery renders everything fully themed and is the source of truth for design.

Theme — Motif

Reconstructed from the UniFi Network design system. Tailwind color scales live in app/assets/css/main.css and map onto Nuxt UI's color aliases in app/theme/motif.ui.ts:

Alias	Scale	Hue
primary	motif-blue	214 (UniFi blue)
neutral	motif-gray	214 / 8% (cool gray)
success	motif-green	138
info / secondary	motif-aqua	198
warning	motif-amber	37
error	motif-red	358

Body type is Inter; corner radius is 4px (UniFi default).

Building the image

docker build -t arcp-console .
docker run -p 3000:3000 -e NUXT_PUBLIC_ARCP_SERVER_URL=ws://host.docker.internal:8080 arcp-console

Roadmap

• Build out the Overview / Jobs / Agents / Settings screens against the SDK
• Live multi-runtime view and per-runtime event/log/telemetry streams
• Console auth (CONSOLE_TOKEN) and optional persistence for event/command history
• Bundle the console + an ARCP server into a single image for one-command deploys

Stack

Nuxt 4 · Nuxt UI v4 · Tailwind CSS v4 · @nuxt/icon (Material Symbols) · @agentruntimecontrolprotocol/sdk

License

Apache-2.0