Hands visual feedback pinned on live web pages with the Yocoolab extension to coding agents, including the element, selector and screenshot.
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add yocoolab --env YOCOOLAB_TOKEN='<YOCOOLAB_TOKEN>' --env GITHUB_TOKEN='<GITHUB_TOKEN>' -- npx -y @yocoolab/mcp-server~/.codex/config.toml
[mcp_servers.yocoolab]
command = "npx"
args = ["-y", "@yocoolab/mcp-server"]
env = { YOCOOLAB_TOKEN = "<YOCOOLAB_TOKEN>", GITHUB_TOKEN = "<GITHUB_TOKEN>" }
# codex mcp add yocoolab --env YOCOOLAB_TOKEN='<YOCOOLAB_TOKEN>' --env GITHUB_TOKEN='<GITHUB_TOKEN>' -- npx -y @yocoolab/mcp-server~/.cursor/mcp.json
{
"mcpServers": {
"yocoolab": {
"command": "npx",
"args": [
"-y",
"@yocoolab/mcp-server"
],
"env": {
"YOCOOLAB_TOKEN": "<YOCOOLAB_TOKEN>",
"GITHUB_TOKEN": "<GITHUB_TOKEN>"
}
}
}
}.vscode/mcp.json
{
"servers": {
"yocoolab": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@yocoolab/mcp-server"
],
"env": {
"YOCOOLAB_TOKEN": "<YOCOOLAB_TOKEN>",
"GITHUB_TOKEN": "<GITHUB_TOKEN>"
}
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"yocoolab": {
"command": "npx",
"args": [
"-y",
"@yocoolab/mcp-server"
],
"env": {
"YOCOOLAB_TOKEN": "<YOCOOLAB_TOKEN>",
"GITHUB_TOKEN": "<GITHUB_TOKEN>"
}
}
}
}claude_desktop_config.json
{
"mcpServers": {
"yocoolab": {
"command": "npx",
"args": [
"-y",
"@yocoolab/mcp-server"
],
"env": {
"YOCOOLAB_TOKEN": "<YOCOOLAB_TOKEN>",
"GITHUB_TOKEN": "<GITHUB_TOKEN>"
}
}
}
}.trae/mcp.json
{
"mcpServers": {
"yocoolab": {
"command": "npx",
"args": [
"-y",
"@yocoolab/mcp-server"
],
"env": {
"YOCOOLAB_TOKEN": "<YOCOOLAB_TOKEN>",
"GITHUB_TOKEN": "<GITHUB_TOKEN>"
}
}
}
}Environment variables
YOCOOLAB_TOKENGITHUB_TOKEN
Replace the placeholders with your own credentials and keep them out of version control.