A modern React 19 + TypeScript + Vite frontend for Agent-to-Agent (A2A) protocol interactions.
- React 19 with TypeScript support
- Vite 7 for fast development and builds
- A2A SDK Integration - Full A2A protocol support via
@a2a-js/sdk - MCP SDK Integration - Model Context Protocol support
- Tailwind CSS 4 with custom theming
- Zustand for state management
- React Router 7 for routing
- Node.js 20+
- npm
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewThe development server runs at http://localhost:5173
| Command | Description |
|---|---|
npm run dev |
Start Vite dev server with hot reload |
npm run build |
Build for production |
npm run build:prod |
Build for production (explicit mode) |
npm run theme:generate |
Generate theme CSS from config |
npm run lint |
Run ESLint |
npm run preview |
Preview production build |
src/
├── components/ # React components
│ ├── agents/ # Agent-related components
│ ├── artifacts/ # Artifact rendering
│ ├── auth/ # Authentication
│ ├── chat/ # Chat interface
│ ├── layout/ # Layout components
│ ├── markdown/ # Markdown rendering
│ └── ui/ # Base UI components
├── hooks/ # Custom React hooks
├── lib/ # Library utilities
├── services/ # API services
├── stores/ # Zustand stores
├── types/ # TypeScript types
└── utils/ # Utility functions
plugins/ # Vite plugins
scripts/ # Build scripts
public/ # Static assets
Create a .env file:
VITE_API_URL=http://localhost:8080| Category | Technology |
|---|---|
| Framework | React 19 |
| Build Tool | Vite 7 |
| Language | TypeScript 5.9 |
| Routing | React Router 7 |
| Styling | Tailwind CSS 4 |
| State | Zustand 5 |
| A2A Protocol | @a2a-js/sdk |
| MCP Protocol | @modelcontextprotocol/sdk |
FSL-1.1-ALv2 - See LICENSE for details.