Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
ag2ai avatar

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)
At a glance

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
From the docs

What fullstack-architecture says it does

The frontend and backend communicate over a single WebSocket at `/ws/chat`.
SKILL.md
The backend runs a 3-agent team using AG2's `RoundRobinPattern`:
SKILL.md
npx skills add https://github.com/ag2ai/resource-hub --skill fullstack-architecture

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs1
repo stars4
Last updatedApril 1, 2026
Repositoryag2ai/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

SKILL.mdMarkdownGitHub ↗

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.json

Tech 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 imports run_team and AGENT_NAMES
  • The frontend Vite config proxies /api and /ws to 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).

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.