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
- Open VS Code
- Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
- Search for "MCP" or "Model Context Protocol"
- Install the official MCP extension
- Restart VS Code
Step 2: Get Your Bearer Token
- Navigate to your project's API Keys section in Knowledge AI
- Generate a new Bearer token for VS Code integration
- Copy the token - you'll need it in step 4
Step 3: Locate VS Code Settings
macOS:
~/Library/Application Support/Code/User/settings.jsonWindows:
%APPDATA%\Code\User\settings.jsonLinux:
~/.config/Code/User/settings.jsonStep 4: Add MCP Configuration
Add the following configuration to your settings.json file:
{
"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_IDwith your actual project ID - Replace
YOUR_PROJECT_MCP_URLwith your project's MCP URL - Replace
YOUR_BEARER_TOKEN_HEREwith 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:
- MCP Status: Check the status bar for MCP connection indicator
- Command Palette: Access MCP commands via Ctrl+Shift+P / Cmd+Shift+P
- 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 ContentIn-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
// 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:
[
{
"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:
{
"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:
{
"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
- Extension Installation: Verify MCP extension is properly installed
- VS Code Version: Ensure you're using a compatible VS Code version
- Settings Location: Check settings.json is in the correct location
- JSON Syntax: Validate your JSON configuration syntax
Connection Issues
- Token Validation: Regenerate your Bearer token
- Network Access: Check firewall and proxy settings
- URL Correctness: Verify your project MCP URL
- Extension Logs: Check VS Code Developer Tools for errors
Performance Issues
- Large Projects: Use specific search queries
- Extension Conflicts: Disable other extensions temporarily
- Memory Usage: Monitor VS Code memory consumption
- Rate Limiting: Avoid rapid successive API calls
Command Not Found
- Extension Activation: Ensure MCP extension is activated
- Command Palette: Refresh command palette cache
- Settings Reload: Restart VS Code after configuration changes
- 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
- Start Coding: Begin your development work
- Search First: Check existing knowledge before implementing
- Document Discoveries: Add new learnings to your knowledge base
- 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:
{
"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:
{
"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):
{
"recommendations": [
"mcp-extension-id"
]
}📞 Support
Need help with VS Code integration?
- Email: feedback@knowledge-ai.app
- Documentation: docs.knowledge-ai.app
- VS Code Help: docs.knowledge-ai.app/integrations/vscode
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