mib2c-mcp
Click on "Deploy 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., "@mib2c-mcpScreenshot the ambient light page and label every point and touch area"
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.
mib2c-mcp
An MCP server that lets Claude see and work the MIB2 Configurator open in your browser: the web app for VW MIB2 head unit skins (ambient light, climate, car status, parking, energy flow, tyre and traffic sign screens).
Claude can read what the app shows, switch pages, cars, sides and themes, take screenshots of the head unit screen, read and move ambient light / climate / car status points and touch areas (with undo), set the preview situation (ambient colour, climate preset, vehicle messages, lights and vents on or off), and list, export and replace images. Saving goes through the app: it shows you the list of changes and waits for you to confirm.
Your skin files stay in the browser. This server runs on your computer, listens only on 127.0.0.1, and talks to
the page over a WebSocket. There is nothing to pair or type in.
Requirements
Node.js 20 or newer, and git (npx fetches the server from GitHub).
Chrome or Edge with the app open (https://mib2c.pqisa.eu, or your own copy of it).
Claude Code, Claude Desktop, or another MCP client.
Related MCP server: Glance
Set up
Claude Code
claude mcp add --scope user mib2c -- npx -y github:TomasSlekys/mib2c-mcpStart a new Claude Code session afterwards (a running one doesn't see a newly added server).
Claude Desktop: Settings › Developer › Edit Config, then add to claude_desktop_config.json:
{
"mcpServers": {
"mib2c": { "command": "npx", "args": ["-y", "github:TomasSlekys/mib2c-mcp"] }
}
}On Windows, if Claude Desktop can't start it, use "command": "cmd", "args": ["/c", "npx", "-y", "github:TomasSlekys/mib2c-mcp"].
Connect the page
The first time: open the app, click Claude in its top bar, and click Allow when the browser asks whether the site may access your local network (or this computer). The dot turns green once Claude is running.
After that: nothing. The page connects by itself, within a few seconds, whenever Claude runs this server. Open the app and your skins folder and talk to Claude.
Why the one click: browsers only let a public website reach 127.0.0.1 after you allow it (Chrome's Local Network
Access), and the app doesn't ask on its own, so visitors who don't use Claude never see the prompt. Chrome remembers
your answer for the site. Turn off in the Claude menu stops the page connecting until you turn it on again. The
app run on your own computer (localhost) connects without the prompt.
Security: the server only accepts the app's own pages (by their origin, which the browser sets and a web page can't
fake), on 127.0.0.1 only. Programs already running on your computer could also connect, as with any local
server; they could do no more than you can on your own computer anyway.
Tools
Tool | What it does |
| Connection state, and how to connect if the page isn't. Claude calls this first. |
| Skin, head unit, theme, page, mode, car, side, unsaved changes, undo state. |
| The cars a page has pictures for, with names where known. |
| Page, car, side, View / Edit mode, theme, head unit UI, screen view. |
| The page's screen as PNG at the screen's own resolution; |
| The zone file of the ambient light / climate / car status page: points, touch areas, names, images. |
| Move or place points, touch areas or corners (each call is one undo step). |
| Put items, or a whole file, back as saved (one undo step). |
| Copy positions to the other side (mirrored) or another car (scaled to its picture). |
| Step back and forward through position edits, per data file. |
| The parking layout file (sectors, pieces, positions) and its preview (obstacles, faults, guide lines…). |
| The energy flow file (car, battery, engine, e-motor, tracks) and its situation. |
| What the car reports on the interior pages (nothing is written). |
| Search the unit's 453 vehicle messages. |
| Find images by path; get one as PNG, or write it to a file to edit elsewhere. |
| Replace one image, or a folder of them matched by file name, from pictures on this computer; take one back. |
| Everything save would write, before and after; a check of the edited zone files. |
| Save every change; you confirm in the app first, unless you let Claude save without asking. |
Everything Claude does shows up in the app's Claude › Log: each action with its time, a plain description, how it went, and on click what Claude asked for and got back.
Options
mib2c-mcp [--port <n>]Setting | Default | |
|
| WebSocket port on 127.0.0.1. Enter the same port in the app's Claude menu. |
| More page origins allowed to connect, comma-separated, |
Troubleshooting
The dot stays amber ("waiting"): Claude isn't running, or its server uses another port. Ask Claude for
status(Claude starts the server when it starts), and check the port.Red dot ("blocked by the browser"): the local network prompt was blocked. Click the icon left of the address, allow Local network (or Loopback network) access for the site, and reload.
"Port 47391 is taken": another Claude session already runs mib2c-mcp. Close it, or give this one another port (
MIB2C_PORT) and enter that port in the app."Versions differ": update whichever is older: reload the app, or restart Claude so npx fetches the latest server.
A page on your own address is refused: add its origin to
MIB2C_ORIGINS.Only one tab at a time: a newly connected tab takes over from the previous one.
How it works
Claude ──stdio (MCP)──> mib2c-mcp ──ws://127.0.0.1:47391──> the app's page (the browser)The server turns each tool call into a command for the page (src/protocol.ts; the app has the same file in
src/lib/bridge/protocol.ts, change both together). The page runs it with the app's own code, so the app's rules,
undo history and save confirmation apply, and sends back the result or a picture. The server only reads files
from your computer for replace_image.
The page must say hello within 5 seconds, from an allowed origin, or it is disconnected.
Calls time out after 30 seconds (2 minutes for replace_image, 15 minutes for save, which waits for you).
Development
npm install
npm test # builds, then runs the tests (node --test)
npm run build
node dist/src/index.js --helpTo try it against a local copy of the app, run the app's dev server (npm run dev, http://localhost:3000 is
allowed) and point Claude at node /path/to/mib2c-mcp/dist/src/index.js.
Licence
MIT, Copyright (c) 2026 Tomas Slekys. See LICENSE.
Available Tools
33 toolsalign_itemsAlign itemsB
Lines up two or more items' boxes on one edge or centre line of the box around them all (as the app's inspector does); one undo step.
Inputs: edge (required), items (required).
check_skinCheck before savingARead-only
Checks the edited zone files (and the one shown): whether the head unit loads each file, and points or touch areas that reach outside their picture or are too small to press. Errors would break the screen on the unit; warnings are worth a look.
Inputs: no named parameters.
copy_pointsCopy points to another side or carA
Copies the interior page's point and touch area positions from one car / side to another, in one undo step in the target file: points by id, touch areas by order. Between driving sides they are mirrored (by default); to a picture of another size they are scaled (by default). Default: from the car and side shown, to the other side of the same car.
Inputs: to, from, what, scale, +2 more.
distribute_itemsSpread items outB
Spreads three or more items so the gaps between their boxes are equal; the first and last stay. One undo step.
Inputs: axis (required), items (required).
export_imageExport imageA
Writes one image of the skin to a PNG file on this computer (as stored, or its unsaved replacement): to edit it in another tool, then bring it back with replace_image.
Inputs: file (required), path, index, which.
find_vehicle_messagesFind vehicle messagesBRead-only
The head unit's 453 vehicle messages (car status): each lights one part in a state (info, warning, stop). Search by text, part id or state.
Inputs: part, limit, query, state.
get_changesUnsaved changesARead-only
Everything that save would write: each replaced image (with the file it came from) and every moved point, touch area, parking or energy flow position, with its saved and new place.
Inputs: no named parameters.
get_energy_dataEnergy flow fileARead-only
The energy flow page's file (config_BEV.efl / config_PHEV.efl) for the car shown: car picture, features (battery, engine, e-motor) and flows (tracks, masks, wheel rings) with names and saved places when moved, and the preview. Open the energy flow page first.
Inputs: no named parameters.
get_imageGet imageARead-only
One image from the skin as PNG: as stored ("current") or its unsaved replacement ("new", the default when there is one).
Inputs: path, index, which.
get_parking_dataParking fileARead-only
The parking page's layout file (config_mini.ops / config.ops) for the car shown: sectors with their bands, background pieces and car image positions (with saved places when moved), the sensors by group, and the preview. Open the parking page first.
Inputs: no named parameters.
get_previewPreview situationBRead-only
What the car reports in the preview: ambient light colour, brightness and mode; climate preset, fan, temperatures, air (cooling / venting / heating) and automatic distribution; car status messages, readiness and start-stop; lights or vents switched off.
Inputs: no named parameters.
get_scene_dataZone file dataARead-only
The ambient light, climate or car status page's zone file for the shown car and side: touch areas (corners), feature / vent / part points with names, positions (and the saved ones when moved), their images and sizes, what the preview shows, screen views, undo state. Coordinates are picture pixels from the top-left; a point is its image's top-left corner.
Inputs: no named parameters.
get_stateApp stateARead-only
What the app shows now: the open skin and its head unit, the theme skin, the page, View / Edit mode, the car and driving side, unsaved changes (replaced images, moved positions per data file) and undo availability.
Inputs: no named parameters.
list_carsList carsCRead-only
The cars a page has pictures for (car codes such as 0203070200 = VW Golf 7 estate, with names where known), each with its driving sides on the interior pages and whether it has unsaved changes.
Inputs: page.
list_imagesList imagesARead-only
Images in the skin's images.mcf whose path contains the query, with their index, every path that uses them (an image can be shared), and any unsaved replacement.
Inputs: limit, query.
move_energyMove energy flow positionsA
Moves the car picture, features or flows of the energy flow file by dx / dy (one undo step). A track and its mask usually move together. Unsaved until save.
Inputs: items (required), dx, dy.
move_itemsMove points or touch areasA
Moves zone file items on the interior page shown (ambient light, climate, car status), kept inside the picture; one undo step. Either dx / dy (move all items together) or x / y (place one item: a point by its top-left, a touch area by its bounding box top-left, a corner exactly). Unsaved until save.
Inputs: items (required), x, y, dx, +1 more.
move_parkingMove parking positionsA
Moves parking sectors (all their bands), background pieces or car image positions by dx / dy (stored left-half pixels; the right half follows mirrored). One undo step. Unsaved until save.
Inputs: items (required), dx, dy.
redoRedoB
Redoes one position edit: in the zone file shown, or in the data file named (a path from get_state's unsaved files: .gca, carstatus.car, parking .ops, energy flow .efl).
Inputs: file.
replace_imageReplace imageA
Replaces one image of the skin with a picture file on this computer (PNG, JPEG or WebP), stored in the image's format. It must have the image's size (only ambient feature images may change size) unless fit is "fit", "fill" or "stretch". A shared image changes everywhere it is used. Unsaved until save; revert_image takes it back.
Inputs: file (required), fit, path, index.
replace_imagesReplace imagesA
Replaces several images at once from picture files on this computer, each matched by its file name to the image of that name whose path contains scope (such as "0204080200/GenericCarAdjuster/AmbianceLight/" or a car code). A file that matches no image, or several different ones, is skipped and listed; an image shared by several cars counts once. Unsaved until save.
Inputs: scope (required), fit, files, folder.
reset_itemsReset itemsA
Puts the given points or touch areas back where the saved file has them (one undo step). A corner puts its whole touch area back.
Inputs: items (required).
revert_fileRevert a fileA
Puts a whole data file back as saved (one undo step, so undo brings the edits back): the zone file shown, or the file named (a path from get_state's unsaved files: .gca, carstatus.car, .ops, .efl).
Inputs: file.
revert_imageRevert imageC
Takes back an image's unsaved replacement.
Inputs: path, index.
saveSaveADestructive
Saves every unsaved change into the skin folder (or downloads the files where the browser can't write to it). Unless the user let Claude save without asking (in the app's Claude menu), the app first shows them the list of changes and waits for them to confirm, so this can take a while; it reports whether they saved or cancelled. A .backup of each file is kept before its first save. Run check_skin first.
Inputs: no named parameters.
screenshotScreenshotARead-only
A picture of the page's screen as the app draws it (the head unit's screen, or the picture with its lights, vents, parts and zone outlines). labels draws point ids and touch area outlines with their names (interior pages). region + zoom shows a part up close. pictureBox in the answer says where the picture sits in the screenshot (x, y, pixels per picture pixel). With file, the PNG is written there instead of shown.
Inputs: file, zoom, labels, region, +2 more.
set_energy_previewEnergy flow previewC
What the car reports on the energy flow page (nothing is written): kind (BEV / PHEV), situation, parts on or off, battery flow and charge, movement.
Inputs: kind, motor, charge, engine, +4 more.
set_parking_previewParking previewC
What the car reports on the parking page (nothing is written): layout, 360° side sensors, rear traffic alert, trailer, obstacles per sensor, faults per group, guide lines and steering, the area view side.
Inputs: rta, clear, level, steer, +10 more.
set_pointsPlace many itemsB
Puts many points, touch areas or corners at exact positions in one step (one undo step), on the interior page shown. Picture pixels; kept inside the picture.
Inputs: items (required).
set_previewSet preview situationA
Sets what the car reports in the preview (nothing is written to the skin): ambient light, climate, car status, and which ambient lights or climate vents are on (page shown). Take a screenshot after to see it.
Inputs: points, status, ambient, climate.
statusConnection statusARead-only
Whether the MIB2 Configurator page is connected, and how the user connects it if not. Call this first.
Inputs: no named parameters.
undoUndoA
Undoes one position edit: in the zone file shown, or in the data file named (a path from get_state's unsaved files: .gca, carstatus.car, parking .ops, energy flow .efl).
Inputs: file.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
TDQS
Scored across 33 tools
Most tools target a clearly distinct resource+action, and the three parallel editors (zone / parking / energy) are separated by domain-specific verbs (move_items vs move_parking vs move_energy) plus the 'open that page first' hints. The main soft spots are the family of 'take it back' tools (undo, redo, revert_file, revert_image, reset_items) whose boundaries are subtle, and the many get_*_data / set_*_preview pairs, which an agent can still resolve from descriptions.
The overwhelming majority follow a snake_case verb_noun pattern (get_state, list_cars, move_items, replace_images, set_energy_preview). Deviations are minor but present: bare noun-only names like 'status', plus verb-less actions 'save', 'screenshot', 'undo' and 'redo', and inconsistent noun forms across the parallel tools (move_parking / move_energy vs move_items).
At 33 tools this is heavy, driven by three near-parallel data-file editors (get/move/set_preview ×3) plus a separate image pipeline, preview simulation, validation and undo stack. Each tool is defensible for this complex skin-configurator domain, but the surface is on the large side and the repetition inflates it.
Lifecycle coverage is strong: connect, inspect state/scene/changes, edit positions, save with backups, undo/redo, validate with check_skin, inspect/replace/export images, and simulate previews. Notable gaps are creation/deletion of items — there is no tool to add a new point, touch area, flow or sector, only to move or reset existing ones — and no way to create a new skin or car entry.
Related MCP Connectors
Compare Figma designs against live websites and get visual + content QA reports, from inside Claude.
Lets your AI build and edit websites in Xodia, a visual website builder for real code (Vite, React, Tailwind CSS or plain HTML in your own git repo): read and write site files, create pages and CMS collections, run typecheck, design and link checks, take screenshots, manage forms and translations, and pick up change requests the user sends from the visual editor. Sign in once with your Xodia account (OAuth). Free plan, no card needed. Setup: https://xodia.ai/ai/mcp
Hosted browser for agents: open pages, search the web, extract data, read PDFs and take screenshots.
Live browser debugging for AI assistants — DOM, console, network via MCP.
Related MCP Servers
- FlicenseNot gradedqualityDmaintenanceProvides browser automation capabilities through Claude Desktop and other MCP clients, enabling navigation, screenshot capture, content extraction, and interactive control.-
- AlicenseNot gradedqualityAmaintenanceEnables Claude Code to control a real browser through MCP tools for navigation, clicking, typing, screenshots, accessibility snapshots, and automated test scenarios. It also supports visual regression, session recording, and network/console monitoring to verify web apps directly from the terminal.106 npmMIT
- AlicenseNot gradedqualityAmaintenanceEnables Claude Code to control a real browser for navigating, clicking, typing, taking screenshots, inspecting pages, and running multi-step automated tests. It also supports visual regression, session recording, and network/console monitoring through MCP tools.106 npmMIT
- AlicenseNot gradedqualityAmaintenanceEnables Claude Code to control a real browser for navigation, interaction, screenshots, accessibility snapshots, and automated end-to-end testing through MCP tools.106 npmMIT