AI Trader View
June 4, 2026 · View on GitHub
An AI-powered trading dashboard combining real-time market data with a multi-agent AI system. A conversational interface lets you ask questions about any stock, get technical analysis from specialized agents, and watch the AI draw directly on the chart — all in real time.
Features
- Multi-Agent AI System — A LangGraph graph of specialized agents collaborates behind the scenes: a Financial Advisor routes requests, a Manager decomposes tasks, a Chart Expert applies drawings, and a Financial Analyst delivers trade verdicts.
- Live Workflow Checklist — A real-time checklist UI surfaces each agent's task as it transitions from
pending → in_progress → completed, so you can follow the AI's reasoning step-by-step. - AI-Driven Chart Drawings — The Chart Expert agent autonomously draws support lines, resistance lines, trendlines, and price/time range boxes directly on the live chart via the
draw_chart_elementstool. - Real-Time Market Data — OHLCV candlestick data, company profiles, fundamentals, analyst price targets, and grades are fetched live via the Financial Modeling Prep (FMP) API.
- Technical Indicators — Toggle RSI, MACD, and Bollinger Bands on the chart — either manually via the toolbar or by asking the AI.
- Fundamentals Panel — Key valuation ratios (P/E, P/S, P/FCF, EV/EBITDA), profitability metrics (gross margin, net margin, ROE, ROIC), and analyst consensus data.
- Multi-Timeframe Support — Switch between 1D, 1W, 1M, 3M, and 1Y views.
- Trade Summary Cards — The AI generates rich, structured trade summary cards rendered inside the chat with verdict, risk level, key metrics, and reasoning.
- Visible-Range Context — Only candles currently visible in the chart viewport are sent to the agent, conserving tokens and focusing analysis on what the user sees.
Tech Stack
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript / Python |
| Styling | Tailwind CSS v4 |
| Charting | Lightweight Charts v5 |
| State Management | Zustand |
| AI Framework | CopilotKit + AG-UI Protocol |
| Agent Orchestration | LangGraph (Python) |
| LLM Provider | OpenRouter |
| Agent Server | FastAPI + Uvicorn |
| Financial Data | Financial Modeling Prep (FMP) API |
| Technical Indicators | technicalindicators |
Architecture
┌─────────────────────────────────────────────────────────────┐
│ Browser │
│ │
│ ┌──────────────────┐ ┌────────────────────────────────┐ │
│ │ Left Panel │ │ Right Panel │ │
│ │ ───────────── │ │ ───────────────────────── │ │
│ │ TopBar │ │ CopilotKit Chat UI │ │
│ │ ChartContainer │ │ WorkflowChecklist │ │
│ │ DrawingToolbar │ │ Fundamentals Panel │ │
│ │ IndicatorBar │ │ │ │
│ └──────────────────┘ └────────────────────────────────┘ │
│ │
│ useCopilotSync() │
│ ├─ useCopilotReadable → injects symbol, price, candles, │
│ │ drawings, indicators into the LLM's context window │
│ ├─ useCopilotAction → registers frontend tools │
│ │ (draw_support_line, draw_resistance_line, │
│ │ draw_trendline, draw_box, clear_drawings, │
│ │ change_symbol, add_indicator, │
│ │ generate_trade_summary) │
│ └─ useCoAgent("chartAgent") → subscribes to live agent │
│ state (drawings, indicators, todoList) │
└─────────────────────────┬───────────────────────────────────┘
│ AG-UI SSE stream (POST /copilotkit)
▼
┌─────────────────────────────────────────────────────────────┐
│ Next.js API Route │
│ /app/api/copilotkit/route.ts │
│ CopilotRuntime → LangGraphHttpAgent → Python Agent Server │
└─────────────────────────┬───────────────────────────────────┘
│ SSE stream (POST :8005/copilotkit/)
▼
┌─────────────────────────────────────────────────────────────┐
│ Python FastAPI Agent Server (:8005) │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ LangGraph Agent Graph │ │
│ │ │ │
│ │ financial_advisor ──► manager ──► [parallel fork] │ │
│ │ (routes) (tasks) / \ │ │
│ │ chart_expert financial │ │
│ │ (loops until _analyst │ │
│ │ all tasks (risk eval │ │
│ │ complete) & verdict) │ │
│ └───────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
How it works
useCopilotSync(the core hook) serializes the live Zustand store (candles in viewport, drawings, indicators) into the LLM's context window viauseCopilotReadable, and registers frontend action handlers viauseCopilotAction.useCoAgent("chartAgent")subscribes to real-time streaming state emitted by the Python agent — drawings, indicators, and thetodoListchecklist all update live as agents execute.- The Financial Advisor classifies each user message as
simple(answers directly) orexpert(delegates to the multi-agent pipeline). - In
expertmode, the Manager decomposes the request into atomic tasks and assigns them to the Chart Expert or Financial Analyst. - The Chart Expert loops, consuming one pending task per iteration, calling
draw_chart_elementswith precise drawings/indicators derived from live candle data. - The Financial Analyst receives the Chart Expert's findings and produces a final risk-evaluated trade verdict (BULLISH / BEARISH / NEUTRAL) with stop-loss and take-profit levels.
Project Structure
ai-trader-view/
├── app/
│ ├── api/copilotkit/route.ts # CopilotRuntime + LangGraphHttpAgent (AG-UI)
│ ├── layout.tsx # Root layout with CopilotKit provider
│ ├── page.tsx # Main page, calls useCopilotSync
│ └── globals.css
├── agents/ # Python multi-agent backend
│ ├── main.py # FastAPI server, AG-UI endpoint mount
│ ├── graph.py # LangGraph topology (nodes, edges, compiler)
│ ├── nodes.py # Agent node handlers + routing functions
│ ├── state.py # AgentState TypedDicts + merge_todolists reducer
│ ├── tools.py # draw_chart_elements LangChain tool
│ ├── models.py # Pydantic schemas (DrawingItem, ChartState)
│ └── prompts.py # System prompts for each agent role
├── components/
│ ├── CopilotProvider.tsx # Wraps the app in <CopilotKit>
│ ├── TopBar.tsx # Symbol search, timeframe switcher, price ticker
│ ├── LeftPanel.tsx # Chart + toolbar layout
│ ├── RightPanel.tsx # Chat UI + Fundamentals tab
│ ├── WorkflowChecklist.tsx # Live agent task checklist UI
│ ├── TradeSummaryCard.tsx # Rich trade summary rendered in chat
│ ├── DrawingToolbar.tsx # Manual drawing tools
│ ├── TimeframeToolbar.tsx # 1D / 1W / 1M / 3M / 1Y switcher
│ ├── IndicatorToolbar.tsx # RSI / MACD / BB toggles
│ ├── MetricCard.tsx # Reusable metric display card
│ ├── chart/ # ChartContainer, drawing overlays
│ ├── copilot/ # CopilotKit state/tool renderer wrappers
│ └── fundamentals/ # FundamentalsPanel and metric sub-components
├── hooks/
│ ├── useCopilotSync.tsx # Context injection + AI tool + CoAgent registration
│ └── useFMPData.ts # Fetches and hydrates market data from FMP
├── stores/
│ ├── marketStore.ts # Symbol, price, candles, fundamentals state
│ ├── drawingStore.ts # Chart annotations (lines, boxes, trendlines)
│ └── indicatorStore.ts # Active technical indicators
└── lib/
├── fmp.ts # Financial Modeling Prep API client
├── indicators.ts # Technical indicator calculations
├── drawingRenderer.ts # Draws overlays onto the Lightweight Chart
├── tools/ # Frontend tool factory functions (frontend/, backend/)
├── agent/ # Agent graph instructions
└── utils.ts
Getting Started
Prerequisites
- Node.js 18+ or Bun (frontend)
- Python 3.11+ with uv (backend agents)
- A Financial Modeling Prep API key
- An OpenRouter API key
1. Install dependencies
# Frontend
bun install
# or
npm install
# Backend agents
cd agents
uv sync
2. Configure environment variables
Create a .env.local file in the project root:
NEXT_PUBLIC_FMP_API_KEY=your_fmp_api_key_here
OPENROUTER_API_KEY=your_openrouter_api_key_here
The Python agent server reads this same file automatically via python-dotenv.
3. Run the development servers
You need two terminals — one for the Next.js frontend and one for the Python agent backend:
Terminal 1 — Frontend:
bun dev
# or
npm run dev
Terminal 2 — Agent Backend:
cd agents
uv run uvicorn main:app --port 8005 --reload
# or via the npm script:
npm run dev:agents
The app will be available at http://localhost:3000.
The agent API will be available at http://localhost:8005.
Changing the LLM Model
The active model is set in agents/nodes.py:
model = ChatOpenAI(
model="openai/gpt-oss-120b:free",
base_url="https://openrouter.ai/api/v1",
...
)
Replace the model string with any model identifier supported by OpenRouter to switch providers without any other code changes.
Agent Graph Reference
Nodes
| Node | Role |
|---|---|
financial_advisor | Entry point. Classifies requests as simple or expert. Answers simple queries directly and streams a response. |
manager | Decomposes expert requests into atomic tasks and assigns them to chart_expert or financial_analyst via a dynamic todoList. |
chart_expert | Executes one pending chart task per invocation (loops). Calls draw_chart_elements with drawings and indicators derived from live candle data. |
financial_analyst | Receives chartist findings and produces a risk-evaluated trade verdict (BULLISH / BEARISH / NEUTRAL) with stop-loss and take-profit targets. |
Routing
| Router | Logic |
|---|---|
route_after_advisor | simple → END, expert → manager |
route_after_manager | Parallel fan-out to whichever agents have tasks assigned |
route_after_chart_expert | Loops back to chart_expert if pending tasks remain, else END |
Frontend Tool Reference
The following CopilotKit actions are registered on the frontend and can be called by the LLM:
| Tool | Description |
|---|---|
draw_support_line | Draw a horizontal support line at a given price |
draw_resistance_line | Draw a horizontal resistance line at a given price |
draw_trendline | Draw a diagonal trendline between two price/time points |
draw_box | Draw a price/time range rectangle on the chart |
clear_drawings | Remove all drawings from the chart |
change_symbol | Switch the active ticker symbol |
add_indicator | Toggle RSI, MACD, or Bollinger Bands |
generate_trade_summary | Render a structured trade analysis card in chat |
Code Quality
Run all checks from the agents/ directory (Python):
uv run ruff check . # Lint
uv run ruff check . --fix # Auto-fix
uv run ruff format . # Format
uv run mypy . # Type check
Run all checks from the root directory (TypeScript):
bun run build # Full Next.js build + type check