The Webvizio MCP Server provides secure, structured access to Webvizio's API, enabling AI agents to interact with development tasks and projects through a standardized interface. It converts visual feedback and bug reports into actionable development work with rich context.
Project Management: List all available projects, view current project details, and switch between projects using project UUIDs
Task Discovery & Management: Retrieve open tasks assigned to you, displayed as numbered titles for user-friendly selection, and extract task UUIDs from Webvizio URLs
Task Information: Access detailed task descriptions and AI-ready execution prompts with technical context
Debug Data Access: Retrieve comprehensive debugging information including browser console logs, network request logs, action/reproduction step logs, and error logs
Visual Context: Fetch task screenshots showing exact browser state with lilac markers indicating problem areas and potential author annotations
Task Completion: Close tasks by setting status to 'Done' (requires user confirmation)
Workflow Integration: Seamlessly integrate with AI coding assistants (Cursor, Windsurf, etc.), following a structured process from task discovery through execution to completion
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Webvizio MCP Servershow me my open tasks"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
About Webvizio
Webvizio streamlines communication between end-users, non-technical teams, and developers.
Our easy-to-use browser extension lets you capture visual feedback and bug reports directly on a web page. It then automatically gathers all relevant data and converts it into actionable, context-enriched development tasks for your AI coding agents.
From non-technical product feedback to bug-free code in seconds, not days. Learn more about Webvizio for developers here.
Webvizio MCP Server
A TypeScript-based Model Context Protocol (MCP) server that provides secure and structured access to the Webvizio API. This server enables MCP clients to seamlessly interact with Webvizio projects and development tasks through a standardized interface.
Webvizio MCP Server - Automatically converts feedback and bug reports from websites and web apps into actionable, context-enriched developer tasks. Delivered straight to your AI coding tools, the Webvizio MCP Server ensures your AI agent has all the data it needs to solve tasks with speed and accuracy.
📋 Available Tools
Tool | Method | Description |
| GET | Fetch all available Webvizio projects |
| GET | Get details of the currently selected project |
| POST | Set the current Webvizio project to work with the project tasks |
| GET | Get the list of open tasks assigned to a user |
| GET | Get the task description |
| GET | Get an AI prompt to execute the task |
| GET | Get the task error logs |
| GET | Get the task console logs |
| GET | Get the task network logs |
| GET | Get the task action logs (Repro steps) |
| GET | Get the task screenshot |
| POST | Set task in Webvizio to Done status |
🛠 Installation
Make sure you have Node.js 18 (or a higher version) installed on your device.
Copy the MCP server configuration code to the
mcpServerssection of your AI Client configuration file."webvizio": { "command": "npx", "args": [ "-y", "@webvizio/mcp-server" ], "env": { "WEBVIZIO_API_KEY": "<your-api-key>" } }Generate and copy the API key for the MCP server on the AI Settings page https://app.webvizio.com/profile/ai
Insert the API key into the
WEBVIZIO_API_KEYenvironment variable.Save the changes.
Done. Your MCP server is configured and ready to work.
🚀 Usage
Open your IDE's chat (e.g., agent mode in Cursor or Cascade in Windsurf).
Paste a link to a Webvizio task. Alternatively, you can ask the AI agent to display all your tasks.
Instruct the AI agent to execute the selected task.
The AI agent can request the use of tools to gather more information on the task (e.g., screenshots, console logs, etc.). Approve these requests to allow the agent to proceed.
Check the agent's work to ensure the task has been completed correctly.
When the task is complete, ask the AI Agent to close the task.