Skip to content

VS Code Integration

Integrate your Knowledge AI project with Visual Studio Code through the MCP extension for seamless access to your knowledge base while coding.

🚀 Overview

The VS Code integration provides:

  • Direct Editor Access: Search and access notes without leaving VS Code
  • AI-Powered Suggestions: Code suggestions enhanced with your knowledge context
  • Inline Documentation: Quick access to your documentation and examples
  • Development Workflow: Integrated knowledge management in your coding environment

💻 Development Features

  • ✅ Access notes directly in your editor
  • ✅ AI-powered code suggestions with your context
  • ✅ Search knowledge base while coding
  • ✅ Inline documentation and examples
  • ✅ Context-aware development assistance

📋 Prerequisites

  • Visual Studio Code installed
  • MCP extension for VS Code
  • Active Knowledge AI project
  • Project Bearer token

⚙️ Setup Guide

Step 1: Install MCP Extension

  1. Open VS Code
  2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
  3. Search for "MCP" or "Model Context Protocol"
  4. Install the official MCP extension
  5. Restart VS Code

Step 2: Get Your Bearer Token

  1. Navigate to your project's API Keys section in Knowledge AI
  2. Generate a new Bearer token for VS Code integration
  3. Copy the token - you'll need it in step 4

Step 3: Locate VS Code Settings

macOS:

~/Library/Application Support/Code/User/settings.json

Windows:

%APPDATA%\Code\User\settings.json

Linux:

~/.config/Code/User/settings.json

Step 4: Add MCP Configuration

Add the following configuration to your settings.json file:

json
{
  "modelContextProtocol.servers": {
    "knowledge-ai-YOUR_PROJECT_ID": {
      "command": "npx",
      "args": [
        "supergateway@latest",
        "-y",
        "--streamableHttp",
        "YOUR_PROJECT_MCP_URL",
        "--header",
        "Authorization: Bearer YOUR_BEARER_TOKEN_HERE"
      ]
    }
  }
}

Step 5: Replace Placeholders

  • Replace YOUR_PROJECT_ID with your actual project ID
  • Replace YOUR_PROJECT_MCP_URL with your project's MCP URL
  • Replace YOUR_BEARER_TOKEN_HERE with the Bearer token from Step 2

Step 6: Restart VS Code

Close and restart VS Code for the configuration to take effect.

✅ Verification

Once configured, you should see:

  1. MCP Status: Check the status bar for MCP connection indicator
  2. Command Palette: Access MCP commands via Ctrl+Shift+P / Cmd+Shift+P
  3. Knowledge Integration: Your knowledge base should be accessible through MCP commands

🛠️ Usage Examples

Accessing Knowledge Base

Use the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and search for MCP commands:

> MCP: Search Knowledge Base
> MCP: Create Note
> MCP: Browse Notes
> MCP: Find Related Content

In-Editor Commands

  • Quick Search: Search your knowledge while coding
  • Context Suggestions: Get AI suggestions based on your notes
  • Documentation Lookup: Find relevant documentation instantly
  • Code Examples: Access your stored code snippets and examples

Workflow Integration

typescript
// While coding, quickly access related notes
// Use MCP commands to:
// 1. Search for "authentication patterns"
// 2. Get code examples from your knowledge base
// 3. Create notes about new patterns you discover

🔧 Advanced Configuration

Custom Keybindings

Add custom keyboard shortcuts to your keybindings.json:

json
[
  {
    "key": "ctrl+k ctrl+s",
    "command": "mcp.searchKnowledge",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+k ctrl+n",
    "command": "mcp.createNote",
    "when": "editorTextFocus"
  }
]

Workspace-Specific Configuration

For project-specific settings, add to your .vscode/settings.json:

json
{
  "modelContextProtocol.servers": {
    "project-knowledge": {
      "command": "npx",
      "args": [
        "supergateway@latest",
        "-y",
        "--streamableHttp",
        "PROJECT_SPECIFIC_URL",
        "--header",
        "Authorization: Bearer PROJECT_TOKEN"
      ]
    }
  }
}

Multiple Projects

Connect multiple Knowledge AI projects:

json
{
  "modelContextProtocol.servers": {
    "work-knowledge": {
      "command": "npx",
      "args": ["supergateway@latest", "-y", "--streamableHttp", "WORK_PROJECT_URL", "--header", "Authorization: Bearer WORK_TOKEN"]
    },
    "personal-knowledge": {
      "command": "npx",
      "args": ["supergateway@latest", "-y", "--streamableHttp", "PERSONAL_PROJECT_URL", "--header", "Authorization: Bearer PERSONAL_TOKEN"]
    }
  }
}

🔧 Troubleshooting

MCP Extension Not Working

  1. Extension Installation: Verify MCP extension is properly installed
  2. VS Code Version: Ensure you're using a compatible VS Code version
  3. Settings Location: Check settings.json is in the correct location
  4. JSON Syntax: Validate your JSON configuration syntax

Connection Issues

  1. Token Validation: Regenerate your Bearer token
  2. Network Access: Check firewall and proxy settings
  3. URL Correctness: Verify your project MCP URL
  4. Extension Logs: Check VS Code Developer Tools for errors

Performance Issues

  1. Large Projects: Use specific search queries
  2. Extension Conflicts: Disable other extensions temporarily
  3. Memory Usage: Monitor VS Code memory consumption
  4. Rate Limiting: Avoid rapid successive API calls

Command Not Found

  1. Extension Activation: Ensure MCP extension is activated
  2. Command Palette: Refresh command palette cache
  3. Settings Reload: Restart VS Code after configuration changes
  4. Extension Dependencies: Check if all dependencies are installed

💡 Best Practices

Efficient Knowledge Management

  • Organize by Project: Use folder structures in your knowledge base
  • Tag Code Examples: Tag code snippets with relevant programming languages
  • Document Patterns: Create notes for recurring code patterns
  • Version Control: Keep your knowledge base version controlled

Integration Workflow

  1. Start Coding: Begin your development work
  2. Search First: Check existing knowledge before implementing
  3. Document Discoveries: Add new learnings to your knowledge base
  4. Share Patterns: Document reusable patterns and solutions

Security Practices

  • Token Management: Regularly rotate Bearer tokens
  • Project Separation: Use different tokens for different projects
  • Access Monitoring: Monitor API usage in Knowledge AI dashboard
  • Sensitive Data: Avoid storing sensitive information in notes

🚀 Power User Tips

Custom Snippets Integration

Combine VS Code snippets with your knowledge base:

json
{
  "Search Knowledge": {
    "scope": "javascript,typescript",
    "prefix": "kb-search",
    "body": [
      "// TODO: Search knowledge base for: $1",
      "// Use MCP: Search Knowledge Base command"
    ]
  }
}

Task Integration

Link VS Code tasks with knowledge management:

json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Update Knowledge Base",
      "type": "shell",
      "command": "echo",
      "args": ["Remember to update knowledge base with new learnings!"]
    }
  ]
}

Workspace Recommendations

Add MCP extension to workspace recommendations (.vscode/extensions.json):

json
{
  "recommendations": [
    "mcp-extension-id"
  ]
}

📞 Support

Need help with VS Code integration?

Common Issues

"MCP commands not showing"

  • Restart VS Code completely
  • Check MCP extension is enabled
  • Verify settings.json syntax

"Connection timeout"

  • Check network connectivity
  • Verify Bearer token is valid
  • Test API access in browser

"Configuration not loading"

  • Check settings.json file location
  • Validate JSON syntax
  • Restart VS Code after changes

Last updated: 2025-01-14

Built with VitePress