microsoft / microsoft/vscode

Support custom icons for custom agents in the chat agent picker (`icon` frontmatter in `.agent.md`)

Open
#329,308 1 comment 0 reactions 1 assignee Claimed by @aeschli View on GitHub
chat-agent-editing feature-request
Dominant language
TypeScript
Stars
193k
Forks
42.4k
PR merge metrics
PR metrics pending

Description

## Describe the feature you'd like

Custom agents (`.agent.md`) appear in the chat agent picker as plain-text entries without any icon, while built-in agents (Agent, Ask, Plan) each show a distinctive codicon. There is currently no way to assign an icon to a custom agent. I would like to declare one in the YAML frontmatter, e.g.:

```yaml
---
name: Design-temp
description: A specialized UI/UX design agent
icon: paintcan # any codicon id
tools: [...]
---
```

## Describe the problem / motivation

- Users maintaining several custom agents (user-level + workspace-level) get a long, text-only list in the picker that is hard to scan. Icons would make agents visually distinguishable and faster to find, consistent with the built-in entries.
- The frontmatter already supports rich metadata (`name`, `description`, `tools`, `model`, `argument-hint`, `handoffs`, `hooks`, ...), yet the visual presentation is the only aspect that cannot be customized.

## Current behavior (verified against `main` sources)

- `PromptHeaderAttributes` in `src/vs/workbench/contrib/chat/common/promptSyntax/promptFileParser.ts` has no `icon` attribute, so an `icon:` key in the frontmatter is silently ignored.
- `CustomChatMode.icon` in `src/vs/workbench/contrib/chat/common/chatModes.ts` is hard-coded to `constObservable(undefined)`.
- In `src/vs/workbench/contrib/chat/browser/widget/input/modePickerActionItem.ts`, an icon is only resolved for modes where `isModeConsideredBuiltIn()` returns true (`builtinDefaultIcon` maps `ask` → `Codicon.ask`, `plan` → `Codicon.tasklist`); user/workspace custom agents always render without an icon. The file even contains the comment `// TODO: there should be an icon contributed for built-in modes`, acknowledging this gap.

## Describe the solution you'd like

1. Add an optional `icon` attribute to the `.agent.md` frontmatter (and to `PromptHeaderAttributes`), accepting a codicon id (e.g. `robot`, `paintcan`, `symbol-color`), consistent with how `ThemeIcon`/codicons are used elsewhere in VS Code.
2. Wire it through `ICustomAgent` → `CustomChatMode.icon` (replace `constObservable(undefined)` with an observable of the parsed `ThemeIcon`).
3. Render it in the agent picker (`modePickerActionItem.ts`, as well as the sessions/mobile pickers that already read `mode.icon`), falling back to the current icon-less rendering when the attribute is absent or unknown.
4. Validate it in `promptValidator.ts` (warn on unknown codicon ids) and document the new field in the custom agents documentation.

Optionally, let extension-contributed agents provide icons too, resolving the existing TODO.

### Example

- Before: `Design-temp` (text only)
- After: `$(paintcan) Design-temp`

## Additional context

- VS Code 1.13x, Windows; user-level agents stored in the user prompts profile folder.
- Built-in modes hard-code their icons in `chatModes.ts` (`Codicon.agent` / `Codicon.question` / `Codicon.edit`).

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.