Connect Vynix to VS Code
Updated
VS Code is now the common control plane for multiple coding agents. Connect Vynix over MCP and your chosen agent reads the exact element, selector, styles, and runtime errors captured with each note, then edits the right files without re-triage.
Why connect VS Code to Vynix
A screenshot alone leaves agents guessing. Vynix captures machine-usable context for each note: selector, XPath, DOM snippet, computed styles, viewport, console errors, and failed requests. MCP lets your agent query that context directly in VS Code.
Before you begin
- The Vynix widget installed on the site you review.
- At least one annotation in a Vynix project.
- VS Code with MCP support enabled.
- Node.js 18 or newer (the server runs via npx).
Get your Vynix API token
Create a personal API token in your Vynix account and copy it. It authenticates MCP calls as you and can be revoked at any time.
Add the Vynix MCP server to VS Code
VS Code uses a servers key in .vscode/mcp.json. Add the Vynix server and your token:
{
"servers": {
"vynix": {
"command": "npx",
"args": ["-y", "@usevynix/mcp-server"],
"env": { "VYNIX_API_TOKEN": "your-token-here" }
}
}
}Open Command Palette, run MCP: List Servers, start vynix, then enable its tools in your agent chat tools picker.
What your VS Code agent can do
- List projects and open annotations.
- Read full note context: element, selector, DOM, styles, and runtime errors.
- Generate coding prompts and AI diagnoses with likely files.
- Update status, comment, and create GitHub issues from notes.
Frequently asked questions
- Is this different from the Copilot guide?
- The Copilot guide is agent-specific. This VS Code guide is editor-level and works with any MCP-capable agent you run in VS Code.
- Why does VS Code use servers instead of mcpServers?
- That is the schema VS Code expects. Other clients may use mcpServers for the same server definition.
- Can I make this global for all projects?
- Yes. Use MCP: Open User Configuration instead of a workspace .vscode/mcp.json file.