Expert assistant for the EVA A2A Chat Client - a React Router v7 app with Agent-to-Agent communication using @a2a-js/sdk. Helps with development, A2A integration, database management, and Cloudflare deployment.
Expert assistant for working with the EVA A2A Chat Client codebase - a React Router v7 application providing a chat interface for Agent-to-Agent (A2A) communication using the `@a2a-js/sdk`.
This skill provides specialized knowledge for developing, debugging, and extending the EVA A2A Chat Client. It understands the project's architecture, A2A protocol integration, database schema, and deployment workflows.
When working with this codebase, first familiarize yourself with:
Key directories:
Use these commands for common tasks:
**Core Development:**
**Deployment:**
The app uses Dexie (IndexedDB) with two main tables:
**ChatRecord:**
```typescript
{
id: string;
title: string;
createdAt: number;
updatedAt: number;
contextId: string; // A2A context ID
}
```
**MessageRecord:**
```typescript
{
id: string;
chatId: string;
role: "user" | "assistant" | "system";
content: string;
createdAt: number;
taskId?: string; // A2A task ID for assistant messages
taskStatus?: "submitted" | "working" | "completed" | "failed" | "canceled";
}
```
Database operations are in:
**Client Configuration** (`app/lib/get-a2a-client.ts`):
**Key A2A Components:**
**A2A Protocol Features:**
When debugging or extending message functionality, understand this flow:
1. User sends message via `clientAction` in `app/routes/home.tsx`
2. User message created via `createUserMessage()`
3. Assistant placeholder created via `createAssistantPlaceholder()`
4. A2A streaming initiated via `streamMessage()`
5. Real-time updates populate assistant message content and task status
Key configuration files and their purposes:
For full functionality:
1. Ensure an A2A agent server is running at `http://localhost:9999` (or configure different URL)
2. The agent server must implement the A2A protocol with task and artifact support
3. Configure auth token if required by your agent server
The app uses React Router's built-in Cloudflare Workers adapter:
1. Ensure `wrangler.jsonc` is properly configured
2. Run `npm run deploy` to build and deploy
3. Workers code is in `workers/` directory
**Adding a new chat feature:**
1. Check if database schema needs updates (`app/db/`)
2. Add business logic to `app/lib/`
3. Create/modify components in `app/components/`
4. Update routes in `app/routes/` if needed
**Debugging A2A communication:**
1. Check client configuration in `app/lib/get-a2a-client.ts`
2. Verify agent server is running and accessible
3. Inspect streaming handler in `app/lib/a2a-stream-handler.ts`
4. Check authentication token format (must be prefixed with `eva `)
**Modifying UI components:**
1. Components use TailwindCSS v4 and Radix UI
2. Main chat UI in `app/components/`
3. Follow existing patterns for consistency
```typescript
// 1. Update MessageRecord type in app/db/schema.ts
taskStatus?: "submitted" | "working" | "completed" | "failed" | "canceled" | "pending";
// 2. Update message handler in app/lib/message-handler.ts
// 3. Update UI components to display new status
```
```typescript
// In app/lib/get-a2a-client.ts
const agentCardUrl = "https://my-agent.example.com/.well-known/agent-card.json";
const authToken = "my-custom-token";
```
When modifying A2A integration, always test with a real A2A agent server to verify protocol compliance.
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/eva-a2a-chat-client-assistant/raw