Web App

Agent Playground

Interaktive Chat-UI für KI-Research-Agents. Verbindet sich mit einem managed-agent-poc Backend und führt Basic- oder Plan-and-Reflect-Workflows über ein Streaming-Echtzeit-Interface aus. Conversation-History, Markdown-Rendering, Run-Metadaten und Dual-Agent-Modi in einem responsiven Dark-Theme-Interface.

2 Agent-Modi
SSE Streaming
14 Komponenten
0 Dependencies (MD Parser)

Architektur

Pipeline

Agent wählen

Basic (Single-Pass, 60-90s) oder Plan+Reflect (iterativ, 120-180s).

Frage stellen

Chat-Input sendet POST an Next.js API Route, die als SSE-Proxy fungiert.

Live-Streaming

SSE-Events (status, chunk, done, error) werden in Echtzeit als Markdown gerendert.

History verwalten

Conversations werden in localStorage persistiert, mit Create/Select/Delete.

Tech Stack

Technologien

Frontend
Next.js 14 (App Router)TypeScript (strict)Tailwind CSS v4
State & Storage
useReducerlocalStorageReadableStream API
Design
Dark Theme (#0a0a0f)Instrument Sans + Syne

Engineering Decisions

Architektur-Entscheidungen

Entscheidung

SSE-Proxy statt direkter Backend-Verbindung

Next.js API Route wrapped die synchrone Backend-Antwort in einen SSE-Stream mit typisierten Events. Das entkoppelt Frontend und Backend und ermöglicht Progress-Feedback während langer Research-Runs.

Entscheidung

Zero-Dependency Markdown Parser

Eigener leichtgewichtiger Markdown-zu-HTML-Konverter statt heavy Libraries wie react-markdown. Headings, Listen, Code-Blöcke, Links und Blockquotes ohne zusätzliche Bundle-Size.

Entscheidung

localStorage statt Backend-Persistenz

Conversation-History wird clientseitig gespeichert. Für einen Research-Playground reicht das aus — kein Auth, keine Datenbank, sofort nutzbar.