VS Code Extension

The Agent Apps VS Code extension adds skill browsing, running, debugging, hub integration, and AI chat directly in your editor.

Install

Install from a .vsix file (no marketplace yet):

cd AgentAppsExtension
npm install
npm run package              # produces agent-apps-*.vsix
code --install-extension agent-apps-*.vsix

Requires Node.js >= 22.0.0 and agent-apps installed (globally or in your project).

The extension finds the CLI using the standard resolution order: VS Code agent-apps.cliPath setting → AGENT_APPS_ROOT env var → local node_modules install → ~/.agent-apps/cli → agent-apps on PATH.

Getting Started

  1. Open a folder containing .skill.md or .skill.js files.
  2. The extension activates automatically.
  3. Browse skills in the Explorer sidebar — grouped by My Skills, Hub, and Library.
  4. Click a skill to open it. Run it from the CodeLens action above the frontmatter.

Features

Skill Browser

The sidebar tree view shows all skills in your project, organized by source:

  • My Skills — skills in your project's search path
  • Hub — installed hub packages
  • Library — built-in framework skills

Click any skill to open it. Right-click for actions (run, describe, compile, test).

Language Support

For .skill.md files:

  • Syntax highlighting for YAML frontmatter and markdown body
  • Completions for metadata keys, directive names, and skill references
  • Hover information for directives and metadata fields
  • Diagnostics for common frontmatter errors
  • Document symbols and folding ranges
  • Bracket matching in YAML

Run Skills

Run any skill as a VS Code task:

  • CodeLens — click Run above the frontmatter in any skill file
  • Command palette — Agent Apps: Run Skill (⌘⇧P)
  • Context menu — right-click a skill in the tree

The extension prompts for arguments based on the skill's JSON Schema. Output streams to the VS Code terminal.

Debug Skills

Pipeline debugging with full VS Code integration:

  • Set breakpoints on middleware entries
  • Step through the pipeline chain
  • Inspect the call stack (nested invocations)
  • View variables (context properties, args, result, locals)

Start debugging from the CodeLens Debug action or Agent Apps: Debug Skill in the command palette.

Chat

Type @agent-apps in VS Code's chat panel for conversational assistance. The chat participant can:

  • Answer questions about Agent Apps concepts
  • Help write and modify skills
  • Search the hub for packages
  • Explain errors and suggest fixes

Hub

Search and manage community packages without leaving the editor:

  • Agent Apps: Hub Search — find packages by keyword
  • Agent Apps: Hub Add — install a package
  • Agent Apps: Hub Remove — uninstall a package

Installed packages appear in the skill browser under the Hub group.

Documentation

Agent Apps: Open Documentation opens the framework docs in VS Code's markdown preview. Browse the specification, guides, and reference material without switching to a browser.

Commands

Command Description
Agent Apps: Refresh Skills Reload the skill tree
Agent Apps: Run Skill Run a skill as a task
Agent Apps: Debug Skill Debug a skill with pipeline tracing
Agent Apps: Describe Skill Show skill details
Agent Apps: Compile Skill Compile a markdown skill to code
Agent Apps: Decompile Skill Generate markdown from a code skill
Agent Apps: Test Skill Run skill tests
Agent Apps: Clear Cache Clear the runtime cache
Agent Apps: Hub Search Search community packages
Agent Apps: Hub Add Install a hub package
Agent Apps: Hub Remove Remove a hub package
Agent Apps: Open Documentation Browse framework docs

Settings

Setting Default Description
agent-apps.cliPath (auto-detected) Path to the agent-apps CLI binary
agent-apps.defaultEngine cli Execution engine: cli (child process) or mcp (in-process)
agent-apps.logLevel info Runtime log level for skill execution
agent-apps.autoRefresh true Auto-refresh the skill tree when files change

See Also

Ask AI