Getting Started

A2A Editor provides React components for editing and testing A2A (Agent-to-Agent) Protocol Agent Cards.

Installation

npm install @open-resource-discovery/a2a-editor

Quick Start

Full Playground

Loading demo...

The complete playground with Monaco editor and chat. Try the mock agents to test the interface:

import { AgentPlayground } from "@open-resource-discovery/a2a-editor";
import "@open-resource-discovery/a2a-editor/styles";

function App() {
  return (
    <div style={{ height: "100vh" }}>
      <AgentPlayground
        showSettings={true}
        showChat={true}
        onAgentCardChange={(json, parsed) => console.log(parsed?.name)}
      />
    </div>
  );
}

Editor

Loading demo...

Monaco editor with overview panel:

import { AgentEditor } from "@open-resource-discovery/a2a-editor/editor";
import "@open-resource-discovery/a2a-editor/styles";

function App() {
  return (
    <div style={{ height: "100vh" }}>
      <AgentEditor onAgentCardChange={(json, parsed) => console.log(parsed)} />
    </div>
  );
}

Read-Only Card

Loading demo...

Read-only agent card overview — displays capabilities, skills, and authentication info without any interactive controls:

import { AgentCardView } from "@open-resource-discovery/a2a-editor/card-view";
import "@open-resource-discovery/a2a-editor/styles";

const agentCard = {
  name: "My Agent",
  description: "An example agent",
  url: "https://example.com/agent",
  version: "1.0.0",
  capabilities: {},
  skills: [],
  // ... rest of agent card
};

function App() {
  return <AgentCardView initialAgentCard={JSON.stringify(agentCard, null, 2)} readOnly />;
}

Available Components

Import Path	Component	Description
@open-resource-discovery/a2a-editor	AgentPlayground	Full editor with Monaco + Chat
@open-resource-discovery/a2a-editor/lite	AgentPlaygroundLite	Editor without Chat (smaller bundle)
@open-resource-discovery/a2a-editor/editor	AgentEditor	Monaco editor only
@open-resource-discovery/a2a-editor/card-view	AgentCardView	Card overview only (no editor)
@open-resource-discovery/a2a-editor/viewer	AgentViewer	Lightweight viewer (no Monaco, ~80KB)

Peer Dependencies

• react ^18.0.0 || ^19.0.0
• react-dom ^18.0.0 || ^19.0.0

Features

• Monaco Editor - Full-featured JSON editor with syntax highlighting
• Agent Card Overview - Visual display of capabilities, skills, and security info
• Chat Integration - Test your agents with built-in streaming chat
• Raw HTTP Inspector - Inspect request and response payloads for chat interactions
• Tree-Shakeable - Import only what you need for optimal bundle size
• TypeScript Support - Complete type definitions included

Docker

You can also run the editor as a standalone web application using Docker:

docker run -p 8080:80 ghcr.io/open-resource-discovery/a2a-editor:latest

Or build from source:

docker build -t a2a-editor .
docker run -p 8080:80 a2a-editor

The editor is then available at http://localhost:8080.