Playground React: A Full-Stack Visual Workspace for Multi-Agent AI Workflows

Playground React is a Next.js application for creating and executing multi-agent AI workflows on a visual canvas. Users connect multiple AI agents — each with a defined persona, scenario context, and LLM configuration — and chain their outputs into compound workflows. The canvas is built on React Flow, so agents are draggable nodes and connections are drawn edges.

Phase 1 is complete: authentication, user management, database, protected routes, and the dashboard shell are all working. Phase 2 adds the core playground and agent functionality. The visual canvas arrives in Phase 3.

---

Why a Next.js full-stack approach?

The single-HTML tools in the Worksona portfolio — Tasks and Prompt IDE — run entirely in the browser. That model works when data is personal and device-local. A collaborative multi-agent workflow platform needs a different foundation.

Playground React uses Next.js 16 with the App Router, TypeScript, and Neon Postgres via Vercel. The database is serverless and scales automatically. Authentication is Google OAuth via NextAuth.js — users have persistent identities, not just local browser state. API keys are stored server-side with encryption. Playground definitions, agent configurations, personas, and scenarios all live in Postgres and are shareable across devices and team members.

The stack also changes the LLM execution model. Instead of direct browser-to-provider API calls, Phase 2 routes LLM requests through Next.js API routes using the Vercel AI SDK — enabling request logging, server-side rate limiting, and streaming responses.

---

How the architecture differs from browser-native tools

The shift from zero-build static files to a full Next.js application is a deliberate trade-off: more capability at the cost of more infrastructure. The setup is documented and Vercel handles hosting and the Neon integration automatically, but it is not a static file drop.

// Database schema core tables (Neon Postgres)
// profiles         — user accounts, linked to OAuth identity
// user_settings    — preferences and encrypted API keys (server-side)
// playgrounds      — workspace containers
// agents           — AI agent configurations
// personas         — role definitions for agents
// scenarios        — business context definitions per playground
// agent_templates  — public template library
// persona_templates — public persona library

The design system is intentionally minimal: square corners (border-radius: 0), flat colors, white default background, and a pink primary accent (#e91e63). Component library is shadcn/ui on Radix primitives.

---

What does the roadmap look like?

Phase 1 delivered the foundation: auth, database, user management, and protected routes. Phase 2 adds playground CRUD, agent creation and management, LLM integration, and prompt execution with result display. Phase 3 adds the React Flow visual canvas — draggable agent nodes, drawn connections, and snap-to-grid layout. Phase 4 adds the persona and scenario systems, file uploads, and a public template library.

The progression is deliberate: infrastructure first, then execution, then visualization, then extensibility. Each phase delivers something runnable before the next begins.

Within the Worksona portfolio, the Playground is the visual front-end to the agent ecosystem — the layer that will eventually expose multi-agent orchestration through a no-code drag-and-drop interface accessible to non-engineers. It is where the Delegator patterns become observable and interactive.