- scaffold Vite + React + TypeScript frontend with Chakra UI and React Flow - implement AgentGraph, MetricHeader, and Dashboard components - connect FastAPI to live LangGraph events via astream_events - implement real-time event mapping for 'scan' and 'pipeline' - refactor run storage for shared access between REST and WebSockets |
||
|---|---|---|
| .. | ||
| src | ||
| README.md | ||
| index.html | ||
| package.json | ||
| postcss.config.js | ||
| tailwind.config.js | ||
README.md
AgentOS Frontend
This is a React-based observability dashboard for TradingAgents.
Tech Stack
- Framework: React (Vite)
- UI Library: Chakra UI
- State Management: React Context / Hooks
- Communication: Axios (REST) & WebSockets
Getting Started
-
Initialize the project:
npm create vite@latest . -- --template react-ts npm install @chakra-ui/react @emotion/react @emotion/styled flutter-framer-motion axios lucide-react -
Run the development server:
npm run dev
Core Components Structure
src/components/CommandCenter/: The main terminal and agent map.src/components/Portfolio/: Portfolio holdings and metrics.src/hooks/useAgentStream.ts: Custom hook for WebSocket streaming.src/context/AuthContext.tsx: Mock auth and multi-tenant support.