EVA A2A Chat Client Assistant

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

What This Skill Does

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.

Step-by-Step Instructions

1. Understanding the Project Structure

When working with this codebase, first familiarize yourself with:

Key directories:

2. Development Commands

Use these commands for common tasks:

**Core Development:**

**Deployment:**

3. Working with the Database

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:

4. Understanding A2A Integration

**Client Configuration** (`app/lib/get-a2a-client.ts`):

**Key A2A Components:**

**A2A Protocol Features:**

5. Message Flow Implementation

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

6. Configuration Files

Key configuration files and their purposes:

7. Local Development Setup

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

8. Deployment to Cloudflare

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

9. Common Development Tasks

**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

Examples

Example 1: Adding a new message status

```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

```

Example 2: Configuring a different A2A agent

```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";

```

Constraints and Important Notes

When modifying A2A integration, always test with a real A2A agent server to verify protocol compliance.