Agent Studio

Visual manager for Claude AI agents, skills, and MCP servers — right inside VS Code.

Agent Studio gives you a sidebar panel to create, browse, toggle, and organize your entire Claude AI setup without ever leaving your editor. No terminal commands, no manual JSON editing.

Features

Agents Management

• Create, edit, and delete agents stored in .claude/agents/ or .agents/
• Toggle agents active/inactive with a single click
• Choose where to save new agents (.claude/ or .agents/)
• Copy agents between locations via the right-click context menu
• Duplicate agents with one click
• Bulk enable/disable all agents at once
• Click any agent card to open its .md file in the editor

Skills Management

• Create, edit, and delete skills stored in .claude/skills/ or .agents/skills/
• Discover and install skills from the skills.sh registry
• Toggle skills on/off individually or in bulk
• Choose save location when creating new skills
• Copy skills between .claude/ and .agents/ folders

MCP Servers

• View and manage MCP server configurations from .vscode/mcp.json, .claude/mcp.json, or mcp.json
• Add new MCP servers with a built-in form (name, command, args, description)
• Discover and add servers from the getmcp.es registry with one click
• Enable/disable individual servers without removing their configuration
• Click any MCP card to open its config file

Import & Export (ClaudePacks)

• Export your entire setup (agents + skills + MCP config) as a .claudepack file
• Import packs from other projects with merge or replace modes
• Share configurations across teams and projects in seconds

UI Features

• Dark, light, and high-contrast theme support (uses VS Code CSS variables)
• Search and filter across all tabs
• Sort by name or status
• Right-click context menus with all actions
• Collapsible registry sections
• Status indicators (green dot = active, grey = inactive)
• Real-time sync when files change externally (file watchers)
• Delete confirmation dialogs for safety

Installation

From VS Code Marketplace

Search for Agent Studio in the VS Code Extensions panel (Ctrl+Shift+X / Cmd+Shift+X).

From VSIX (local build)

bun install
cd webview-ui && bun install && cd ..
bun run build
bun run package
code --install-extension agent-studio-0.3.0.vsix

Usage

1. Open any project in VS Code
2. Click the Agent Studio icon in the Activity Bar (left sidebar)
3. Use the three tabs to manage your setup:

Creating an Agent

1. Go to the Agents tab and click the + button
2. Fill in the name, role, and description
3. Choose the save location: .claude/ or .agents/
4. Click Create — the agent file opens in the editor for further editing

Creating a Skill

1. Go to the Skills tab and click +
2. Enter a name and description
3. Choose the save location
4. Click Create

Adding an MCP Server

1. Go to the MCPs tab and click +
2. Enter the server name, command (e.g. npx), arguments, and an optional description
3. Click Add MCP — the server is written to .vscode/mcp.json

Installing from Registries

• In the Skills tab, scroll down to the skills.sh registry section to browse and install community skills
• In the MCPs tab, scroll down to the getmcp.es registry section to browse and add MCP servers

Copying Between Locations

Right-click any agent or skill to see the Copy to .agents/ or Copy to .claude/ option. This creates a copy in the other location so both Claude Code and other tools can access it.

Import / Export Packs

Use the Export Pack and Import Pack buttons in the footer to share your entire AI configuration:

• Export: Bundles all agents, skills, and MCP config into a single .claudepack file
• Import (merge): Adds items from the pack without overwriting existing ones
• Import (replace): Replaces your current configuration with the pack contents

Commands

Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P) and search for:

Configuration

Available in VS Code Settings (Ctrl+,) under Agent Studio:

When set to auto, Agent Studio detects the folder structure in your workspace and writes to whichever location already exists. If neither exists, it defaults to .claude/.

File Formats

Agent file (.md)

---
name: Code Reviewer
role: Specialist
description: Reviews code for quality and best practices
skills: [code-review, testing]
status: active
version: 1.0.0
author: your-name
tags: [code, quality]
---

## Description
Reviews code for quality and best practices.

## Instructions
You are Code Reviewer. Your goal is to...

## Main Tasks
- Review pull requests for bugs and style issues
- Suggest improvements and optimizations

Skill file (.md)

---
name: Code Review
description: Systematic code review with best practices
version: 1.0.0
status: active
source: skills.sh
tags: [code, quality]
---

## Skill Instructions
Describe the skill behaviour here.

MCP config (mcp.json)

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "enabled": true,
      "description": "Interact with GitHub repos, issues, PRs"
    }
  }
}

ClaudePack (.claudepack)

{
  "version": "1.0",
  "exportedAt": "2025-01-01T00:00:00Z",
  "projectName": "my-project",
  "agents": [
    { "filename": "my-agent.md", "content": "---\nname: ...\n---\n..." }
  ],
  "skills": [
    { "filename": "my-skill.md", "content": "---\nname: ...\n---\n..." }
  ],
  "mcpConfig": {
    "mcpServers": { }
  }
}

Requirements

• VS Code 1.85 or later
• A workspace folder open (Agent Studio reads/writes files relative to your workspace root)

License

MIT