opencode-plugin-vue-devtools

OpenCode plugin that enables Vue DevTools AI Inspect to send prompts directly to your OpenCode session.

How it works

When OpenCode starts with this plugin, it launches a local HTTP server (port 18900-18910) that acts as a bridge between the browser-based Vue DevTools and your OpenCode session.

The browser discovers the plugin via a handshake protocol and sends structured prompts containing component source location and user intent.

Install

npm install opencode-plugin-vue-devtools

Add to your opencode.json:

{
  "plugin": ["opencode-plugin-vue-devtools"]
}

Protocol

| Endpoint | Method | Description | | -------------------- | ------ | --------------------------------------------------------------------------- | | /handshake?nonce=N | GET | Discovery handshake, returns { response: N*7+42, projectRoot, sessionId } | | /prompt | POST | Forward prompt to OpenCode session { text: "..." } | | /status | GET | Health check { alive: true, projectRoot, sessionId } |

How discovery works

1. Vue DevTools overlay scans ports 18900-18910
2. Sends a random nonce to /handshake
3. Verifies the response matches nonce * 7 + 42
4. Uses projectRoot to match against component file paths (multi-project support)
5. Sends prompts to the matched instance

License

MIT