Connect Vynix to GitHub Copilot

Why connect Copilot to Vynix

Copilot is fast in your editor but blind to what a reviewer saw in the browser. Vynix bridges that: each note carries the resolved selector, the DOM snippet, the computed styles, the viewport, and any runtime errors. Over MCP, Copilot's agent reads that context and turns "this looks broken on mobile" into a precise edit.

Before you begin

• The Vynix widget installed on the site you review.
• At least one annotation in a Vynix project.
• VS Code with GitHub Copilot and agent mode 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 the MCP server as you and can be revoked at any time.

Add the Vynix MCP server to VS Code

Copilot reads MCP servers from a workspace .vscode/mcp.json (or your user settings). Note VS Code uses a servers key, not mcpServers:

{
  "servers": {
    "vynix": {
      "command": "npx",
      "args": ["-y", "@usevynix/mcp-server"],
      "env": { "VYNIX_API_TOKEN": "your-token-here" }
    }
  }
}

Open the Copilot Chat view, switch to Agent mode, and confirm the vynix tools appear in the tools picker. If they do not, reload the window and check Node is on your PATH.

What Copilot can do with your feedback

• List projects and open annotations from chat.
• Read a note's full captured context: element, selector, XPath, styles, DOM, and errors.
• Generate a coding prompt or an AI diagnosis with likely files.
• Update status, add a comment, and open a GitHub issue directly from the note.

A typical loop with Copilot

In agent mode, ask "what Vynix feedback is open on this repo's site?" Copilot lists the notes, reads the one you point at, edits the component, and can file or close a GitHub issue. Because Vynix already opens one-click issues, the handoff between the note and the pull request stays tight.