feat(ui): add A2A skills configuration to agent creation/editing#1291
feat(ui): add A2A skills configuration to agent creation/editing#1291opspawn wants to merge 1 commit intokagent-dev:mainfrom
Conversation
Add UI support for configuring A2A (Agent-to-Agent) skills when creating or editing a Declarative agent. This enables users to define A2A skills directly from the UI, matching the existing Agent CRD's a2aConfig field. Changes: - New A2ASkillsSection component with collapsible skill forms - Support for all AgentSkill fields: id, name, description, tags, examples, inputModes, outputModes - Form validation (required id/name, duplicate detection) - Edit mode loads existing A2A config from agent spec - A2A badge shown on agent cards when configured - Wired through AgentFormData -> fromAgentFormDataToAgent -> API Closes kagent-dev#360
There was a problem hiding this comment.
Pull request overview
This PR adds UI support for configuring Agent-to-Agent (A2A) skills when creating or editing Declarative agents. The A2A protocol allows agents to expose capabilities that other agents can discover and invoke. While the backend Agent CRD already supported A2A configuration, the UI had no way to configure these skills.
Changes:
- Adds a new
A2ASkillsSectioncomponent with accordion-style skill forms supporting all AgentSkill fields - Integrates A2A configuration into the agent creation/editing page for Declarative agents
- Adds validation for required fields (ID, name) and duplicate ID detection
- Displays an "A2A" badge on agent cards when skills are configured
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
ui/src/components/create/A2ASkillsSection.tsx |
New component providing UI for adding/editing/removing A2A skills with collapsible forms |
ui/src/app/agents/new/page.tsx |
Adds A2A Configuration card for Declarative agents with validation and edit mode support |
ui/src/app/actions/agents.ts |
Maps A2A skills from form data to agent spec's declarative.a2aConfig |
ui/src/components/AgentsProvider.tsx |
Adds a2aSkills field to AgentFormData interface and ValidationErrors |
ui/src/components/AgentCard.tsx |
Displays green "A2A" badge when agent has A2A skills configured |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div | ||
| className="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-muted/50" | ||
| onClick={() => setExpandedIndex(isExpanded ? null : index)} | ||
| > |
There was a problem hiding this comment.
The collapsible skill header is clickable but lacks proper accessibility attributes. The div should have role="button", tabIndex={0}, and onKeyDown handler to support keyboard navigation (Enter/Space keys). Additionally, consider adding aria-expanded={isExpanded} to communicate the expand/collapse state to screen readers.
| variant="outline" | ||
| size="sm" | ||
| onClick={addSkill} | ||
| disabled={disabled || skills.length >= 20} |
There was a problem hiding this comment.
The component enforces a maximum of 20 skills, but there is no corresponding maxItems validation in the CRD schema (go/config/crd/bases/kagent.dev_agents.yaml). The CRD only specifies minItems: 1 for the skills array. Consider either adding the maxItems constraint to the CRD or removing this arbitrary limit from the UI, unless there's a specific technical or business reason for this limit that isn't reflected in the CRD.
1 participant
Summary
Adds UI support for configuring A2A (Agent-to-Agent) skills when creating or editing a Declarative agent, as requested in #360.
The Agent CRD already supports
a2aConfig.skillsin theDeclarativeAgentSpec, and the TypeScript types (A2AConfig,AgentSkill) are already defined — but the UI had no way to configure them. This PR bridges that gap.Changes
New
A2ASkillsSectioncomponent (ui/src/components/create/A2ASkillsSection.tsx)AgentSkillfields:id,name,description,tags,examples,inputModes,outputModesAgent creation/editing page (
ui/src/app/agents/new/page.tsx)idandname, duplicate ID detectionData flow (
ui/src/app/actions/agents.ts,ui/src/components/AgentsProvider.tsx)a2aSkillsfield toAgentFormDatafromAgentFormDataToAgentmaps A2A skills todeclarative.a2aConfigAgent card (
ui/src/components/AgentCard.tsx)Testing
npx tsc --noEmit— passesnpm run lint— passesnpm run build— passesCloses #360