Configure VS Code for FrootAI

Set up VS Code with file associations, JSON schema validation, one-click tasks, and MCP server integration.

Step 1: File Associations

Add to .vscode/settings.json so VS Code recognizes FrootAI file types:

.vscode/settings.json


{
  "files.associations": {
    "*.agent.md": "markdown",
    "*.instructions.md": "markdown",
    "*.prompt.md": "markdown",
    "fai-manifest.json": "json",
    "fai-context.json": "json",
    "plugin.json": "json",
    "hooks.json": "json",
    "froot.json": "json"
  }
}

Step 2: JSON Schema Validation

Auto-validate FrootAI JSON files with inline error highlighting:

.vscode/settings.json


{
  "json.schemas": [
    {
      "fileMatch": ["agents/*/fai-context.json"],
      "url": "./schemas/fai-context.schema.json"
    },
    {
      "fileMatch": ["solution-plays/*/fai-manifest.json"],
      "url": "./schemas/fai-manifest.schema.json"
    },
    {
      "fileMatch": ["plugins/*/plugin.json"],
      "url": "./schemas/plugin.schema.json"
    },
    {
      "fileMatch": ["hooks/*/hooks.json"],
      "url": "./schemas/hook.schema.json"
    }
  ]
}

💡

Red Squiggles

With schema validation configured, VS Code shows red squiggles for missing required fields before you even run validation scripts.

Step 3: VS Code Tasks

Add to .vscode/tasks.json for one-click validation:

.vscode/tasks.json


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Validate All Primitives",
      "type": "shell",
      "command": "node scripts/validate-primitives.js",
      "group": { "kind": "test", "isDefault": true }
    },
    {
      "label": "Generate Marketplace",
      "type": "shell",
      "command": "node scripts/generate-marketplace.js",
      "group": "build"
    },
    {
      "label": "Scaffold Agent",
      "type": "shell",
      "command": "node scripts/scaffold-primitive.js agent"
    },
    {
      "label": "Scaffold Skill",
      "type": "shell",
      "command": "node scripts/scaffold-primitive.js skill"
    },
    {
      "label": "Run FAI Engine (Play 01)",
      "type": "shell",
      "command": "node engine/index.js solution-plays/01-enterprise-rag/fai-manifest.json --status"
    },
    {
      "label": "Validate Consistency",
      "type": "shell",
      "command": "node scripts/validate-consistency.js"
    }
  ]
}

Run tasks via: Ctrl+Shift+P → “Tasks: Run Task”

Step 4: MCP Server Configuration

Give Copilot Chat access to FrootAI MCP tools:

.vscode/mcp.json


{
  "servers": {
    "frootai": {
      "command": "node",
      "args": ["mcp-server/index.js"],
      "cwd": "${workspaceFolder}"
    }
  }
}

This enables 25 MCP tools in Copilot Chat:

search_knowledge — search FROOT modules
get_module — retrieve specific knowledge module
get_play_detail — detailed play information
compare_models — AI model comparison
estimate_cost — Azure cost estimation

Step 5: Recommended Extensions

Extension	Purpose
GitHub Copilot	AI pair programmer
GitHub Copilot Chat	Agent-based interactions
Bicep	Azure IaC syntax + validation
YAML	YAML schema validation
Markdown All in One	Markdown editing
Python	Python development

Step 6: Verify Setup


# Run the default test task
node scripts/validate-primitives.js

Expected output:


✅ Passed: 2510
ALL CHECKS PASSED ✅

File Type Recognition

After setup, VS Code automatically recognizes:

File Pattern	Benefit
`*.agent.md`	Copilot understands agent persona
`*.instructions.md`	Copilot applies coding standards
`fai-manifest.json`	Red squiggles on invalid fields
`plugin.json`	Auto-complete for plugin fields
`hooks.json`	Event type validation

Best Practices

Commit .vscode/ config — share the setup with your team
Use tasks, not raw commands — discoverable and consistent
Enable schema validation — catch errors before running scripts
Configure MCP — let Copilot access your knowledge base
Keep copilot-instructions.md updated — it’s the project DNA