
Fullstack Architecture
- 1 installs
- 4 repo stars
- Updated April 1, 2026
- ag2ai/resource-hub
fullstack-architecture is a Claude Code skill that defines the architecture and WebSocket protocol for a full-stack FastAPI + AG2 multi-agent app with a React frontend.
About
This skill defines the architecture, directory layout, and communication protocol for a full-stack multi-agent application. The backend uses FastAPI and AG2 with Pydantic; the frontend uses React 19, TypeScript, and Vite; and they communicate over a single WebSocket at /ws/chat with a defined JSON message format. A developer uses it to structure an app where a 3-agent AG2 team (planner, coder, reviewer) streams messages to a React chat UI.
- Architecture and conventions for a full-stack multi-agent application
- FastAPI + AG2 backend with a React 19 + TypeScript + Vite frontend over a WebSocket protocol
- Defines the /ws/chat JSON message format and a 3-agent RoundRobinPattern team (planner, coder, reviewer)
Fullstack Architecture by the numbers
- 1 all-time installs (skills.sh)
- Ranked #14,098 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
- Data as of Jul 28, 2026 (Skillselion catalog sync)
fullstack-architecture capabilities & compatibility
Free skill; the AG2 agent team needs an LLM provider API key to run.
- Capabilities
- fullstack architecture · multi agent orchestration · websocket integration
- Use cases
- api development · frontend · orchestration
- Pricing
- Bring your own API key
What fullstack-architecture says it does
The frontend and backend communicate over a single WebSocket at `/ws/chat`.
The backend runs a 3-agent team using AG2's `RoundRobinPattern`:
npx skills add https://github.com/ag2ai/resource-hub --skill fullstack-architectureAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1 |
|---|---|
| repo stars | ★ 4 |
| Last updated | April 1, 2026 |
| Repository | ag2ai/resource-hub ↗ |
What it does
Structure a full-stack app with a FastAPI + AG2 multi-agent backend and a React WebSocket chat frontend.
Who is it for?
Developers building a full-stack app with an AG2 multi-agent backend streaming to a React WebSocket chat UI.
Skip if: Backend-only or non-agent web apps.
When should I use this skill?
The user wants to structure a full-stack FastAPI + AG2 multi-agent application with a React frontend.
What you get
A defined directory layout, WebSocket JSON protocol, and 3-agent RoundRobinPattern team streaming to a React UI.
- full-stack directory layout
- WebSocket JSON protocol
- 3-agent AG2 team definition
By the numbers
- 3-agent team: planner, coder, reviewer
- 1 WebSocket endpoint (/ws/chat)
Files
Full-Stack Multi-Agent Architecture
Directory layout
backend/
├── app/
│ ├── main.py # FastAPI app — REST endpoints + WebSocket handler
│ ├── agents.py # AG2 agent team definition and run_team() entry point
│ └── schemas.py # Pydantic models shared between endpoints and agents
└── tests/
└── test_api.py
frontend/
├── src/
│ ├── main.tsx # React entry point
│ ├── App.tsx # Root component
│ └── components/
│ └── Chat.tsx # WebSocket chat UI
├── index.html
├── vite.config.ts # Vite config with API/WS proxy to backend
└── package.jsonTech stack
- Backend: FastAPI, AG2 (multi-agent orchestration), Pydantic, uvicorn
- Frontend: React 19, TypeScript, Vite
- Communication: WebSocket for real-time agent messages, REST for health/metadata
Communication protocol
The frontend and backend communicate over a single WebSocket at /ws/chat.
Message format (JSON over WebSocket)
Client → Server:
{"message": "user text here"}Server → Client (one per agent response):
{"agent": "planner", "content": "...", "type": "agent_message"}Server → Client (when all agents finish):
{"agent": "", "content": "", "type": "done"}Message types: agent_message, status, error, done.
REST endpoints
GET /api/health— returns{"status": "ok", "agents": ["planner", "coder", "reviewer"]}
Agent team
The backend runs a 3-agent team using AG2's RoundRobinPattern:
1. planner — breaks user requests into numbered steps 2. coder — implements the plan in code 3. reviewer — reviews for correctness and security
The run_team(message) function in agents.py is the single entry point. It returns a list of {"agent": name, "content": text} dicts.
Key conventions
- All API models live in
schemas.py— import from there, never define inline - Agent definitions stay in
agents.py— main.py only importsrun_teamandAGENT_NAMES - The frontend Vite config proxies
/apiand/wsto the backend in dev — no hardcoded URLs in components - Pydantic models use
model_dump_json()for serialization (v2 API)
Related skills
FAQ
How do the frontend and backend communicate?
Over a single WebSocket at /ws/chat using a JSON message format, with message types agent_message, status, error, and done.
What is the agent team?
A 3-agent AG2 team using RoundRobinPattern: planner (breaks requests into steps), coder (implements), and reviewer (checks correctness and security).