Agent skill

Tauri Dev MCP Bridge

by jerrywu001 in jerrywu001/cc-sessions-viewer

Launches a Tauri app's dev build with the MCP bridge compiled in, so an agent can take screenshots, read the live DOM, click real buttons and call real backend commands.

MITAuto-check: warningsTesting & QA

Install Tauri Dev MCP Bridge

The automated check flagged lines worth reading first. See the safety section below.

skills CLI
$ npx skills add jerrywu001/cc-sessions-viewer --skill tauri-dev-mcp -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jerrywu001/cc-sessions-viewer tauri-dev-mcp --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jerrywu001/cc-sessions-viewer.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/tauri-dev-mcp .claude/skills/tauri-dev-mcp && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
tauri-dev-mcp
GitHub stars
395
Token cost
~1.4k tokens
SKILL.md length
546 words
Files
1
Skills in repo
3
Repo updated
First seen
Licence
MIT

At a glance

Launches a Tauri app's dev build with the MCP bridge compiled in, so an agent can take screenshots, read the live DOM, click real buttons and call real backend commands.

  • Works in 6 steps: Launch → Connect → Drive the UI → …
  • Checking that a UI change actually renders in the running Tauri app
  • SKILL.md covers 1. Launch, 2. Connect, 3. Drive the UI and 4. Screenshots: focus the…, plus 2 more sections
  • Calls npx, osascript and npm

What it does

This app ships an optional MCP bridge behind a non-default Cargo feature, and the skill's key warning is that the usual npm run tauri dev compiles without it, leaving every bridge tool unable to connect with no explanation in the log. The correct launch is npx tauri dev with the dev-mcp feature, run in the background because it never exits, with the bridge listening on a local port. It also covers a stale Vite process holding port 1420 after pkill, fixed by killing the process listening on that port.

Next you start a driver session, which is needed before any webview or IPC tool and must be repeated after a page reload. It recommends running JavaScript in the webview over clicking by coordinates, and calling real backend commands through the webview's own Tauri bridge because the IPC tool has an allowlist. Destructive commands should use disposable fixtures and restore afterwards. A screenshot section on focusing the window first is cut off. It is not for unit-test-only changes or reading code.

When your agent uses it

  • Checking that a UI change actually renders in the running Tauri app
  • Driving the app's real buttons and reading back the resulting DOM
  • Calling a real Tauri backend command against real data
  • Taking screenshots of the app window during development

Example prompts

  • “Launch the Tauri dev build with the MCP bridge and screenshot the settings page.”
  • “Open the Settings tab in the running app and read back what rendered.”
  • “tauri dev dies with port 1420 already in use; clear it and relaunch.”
  • “Call the storage_usage command in the running app and show me the result.”

Requirements

  • A Tauri project with the dev-mcp Cargo feature
  • The MCP bridge plugin and a driver session

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Launch
  2. Connect
  3. Drive the UI
  4. Screenshots: focus the window first
  5. Hazards worth planning around
  6. Shut down

What it can do on your machine

Read from SKILL.md and the folder at commit 5bf4343. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx
    • osascript
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx and npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Tauri Dev MCP Bridge loads about 1.4k tokens when it runs. Until then it costs about 103 tokens; SKILL.md has 546 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~103
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: warnings

The automated check found patterns that need a careful read before installing.

  • WarningTells the agent its actions are pre-authorized / not to stop for confirmationSKILL.md:10
    s this actually render / actually work" without asking the user.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jerrywu001/cc-sessions-viewer at commit 5bf4343, republished under its MIT licence (© jerrywu001). 546 words, ~1,436 tokens.

Download SKILL.mdSave it as .claude/skills/tauri-dev-mcp/SKILL.md (or your agent's skills folder).
name
tauri-dev-mcp
description
Use when you need to visually verify or drive this Tauri app's running UI — taking screenshots, reading the live DOM, clicking real buttons, or calling real backend commands against real data. Covers launching the dev build with the MCP bridge compiled in, connecting the driver session, and shutting down cleanly. Not suitable for unit-test-only changes, or when the user only wants the code read.

Verifying this app's UI through the Tauri MCP bridge

This app ships an optional MCP bridge that lets an agent screenshot the window, read/execute JS in the webview, and invoke real Tauri commands. It is the only way to check "does this actually render / actually work" without asking the user.

The single most common failure: launching with the wrong command. The bridge is behind a non-default Cargo feature. npm run tauri dev compiles without it and every mcp___hypothesi_tauri-mcp-server__* tool will then fail to connect, with nothing in the log explaining why.

1. Launch

bash
# Correct — bridge compiled in, listening on 127.0.0.1:9223
nohup npx tauri dev --features dev-mcp > /tmp/tauri-dev.log 2>&1 &

# Wait for the window instead of guessing a sleep duration
until pgrep -f "target/debug/cc-sessions-viewer" >/dev/null 2>&1; do sleep 2; done
sleep 5   # let the webview finish loading

First build takes minutes; incremental rebuilds are seconds. Do not run this in the foreground — it never exits.

Port 1420 is already in use

Vite is locked to port 1420 (strictPort, hardcoded in tauri.conf.json). A stale Vite from a previous run survives pkill -f "tauri dev", and the next launch dies with Error: Port 1420 is already in use followed by The "beforeDevCommand" terminated with a non-zero status code.

bash
lsof -ti :1420 | xargs kill    # then relaunch

2. Connect

driver_session { action: "start" }

Required before any webview_* / ipc_* tool. A warning about the plugin not reporting its version is expected and harmless — this repo pins tauri-plugin-mcp-bridge 0.2, and tools needing ≥0.13 (such as manage_window { action: "focus" }) will refuse; see §4 for the workaround.

Re-run driver_session start after any location.reload() — the reload drops the injected bridge globals.

3. Drive the UI

Prefer webview_execute_js over coordinate clicking: it is deterministic, and it returns data you can assert on in the same call.

js
// Open Settings → a specific tab, then read back what rendered
(async () => {
  const wait = (ms) => new Promise(r => setTimeout(r, ms))
  const btn = [...document.querySelectorAll('button')]
    .find(b => /Settings|设置/.test(b.textContent || ''))
  btn && btn.click()
  await wait(300)
  const tab = [...document.querySelectorAll('.set-nav-item')]
    .find(n => /Storage|存储/.test(n.textContent || ''))
  tab && tab.click()
  await wait(500)
  return { rows: [...document.querySelectorAll('.set-store-name')].map(e => e.textContent.trim()) }
})()
Calling real backend commands

Go through the webview's own bridge — ipc_execute_command has an allowlist and will reject most commands:

js
(async () => {
  const invoke = window.__TAURI__.core.invoke
  return await invoke('storage_usage')
})()

This runs the real command against real data. For anything destructive, seed disposable fixtures first and restore afterwards (see §5).

4. Screenshots: focus the window first

If the window is not frontmost, document.visibilityState === 'hidden' and requestAnimationFrame never fires. Vue <Transition> then freezes at *-leave-from — a dialog you just closed stays in the DOM forever, and screenshots come back faded, stale, or showing a modal that is logically gone. This looks exactly like a product bug and is not one.

bash
osascript -e 'tell application "System Events" to set frontmost of \
  (first process whose unix id is (do shell script \
  "pgrep -f \"target/debug/cc-sessions-viewer\" | head -1") as integer) to true'

Confirm before trusting a screenshot:

js
({ hidden: document.hidden, visibility: document.visibilityState })

manage_window { action: "focus" } would be the clean way, but it needs plugin ≥0.13 and this app is on 0.2 — use the osascript above.

Show full SKILL.md (179 more words)Show less

5. Hazards worth planning around

  • HMR reloads the webview. Editing locale files or several files at once remounts the app: open modals close and your carefully staged state is gone. Re-open and re-assert rather than trusting a stale handle.
  • Disabled buttons swallow clicks silently. A clear/delete button gated on :disabled="!bytes" does nothing when the target is empty, and the absence of a dialog reads as "my code is broken". Check button.disabled before concluding anything.
  • Two copies of the app may be running. The user's installed build (/Applications/Sessions Viewer.app) shares on-disk state with the dev build. Never kill it, and remember it can be the one holding a file you are watching.
  • Seed, then restore. When verifying deletion/retention paths, write throwaway fixtures (a TEST- name prefix makes cleanup greppable), back up any real config you perturb, and put it back when finished.

6. Shut down

Kill the wrapper, the app, and Vite — the first two leave Vite holding 1420:

bash
pkill -f "tauri dev"
pkill -f "target/debug/cc-sessions-viewer"
pkill -f "node_modules/.bin/vite"
lsof -ti :1420          # must print nothing
pgrep -fl "Applications/Sessions Viewer.app"   # the user's app — must survive

Then driver_session { action: "stop" }.

Leave the machine as you found it: dev processes stopped, port free, fixtures deleted, backed-up config restored.

© jerrywu001, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/tauri-dev-mcp of jerrywu001/cc-sessions-viewer.

Open the folder on GitHubat commit 5bf4343

Compare with similar skills

Tauri Dev MCP Bridge next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Tauri Dev MCP Bridge compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Tauri Dev MCP Bridge this skilljerrywu001/cc-sessions-viewer395—~1.4kAutomated safety check: WarnMIT
Qwen Code E2E TestingQwenLM/qwen-code28k—~2.1kAutomated safety check: PassApache-2.0
Glance TestDebugBase/glance156—~827Automated safety check: PassMIT
Edt MCP Build TestDitriXNew/EDT-MCP295—~1.4kAutomated safety check: PassAGPL-3.0
Edt MCP E2E TestingDitriXNew/EDT-MCP295—~1.3kAutomated safety check: PassAGPL-3.0
Exploring The WizardPostHog/wizard197—~2.2kAutomated safety check: PassMIT

Similar skills

  • Qwen Code E2E Testing

    QwenLM/qwen-code

    Guides end-to-end testing of the Qwen Code CLI in headless mode with real model calls, MCP test servers and inspection of raw API traffic.

    28k GitHub stars~2.1k tokensUpdated today
    Testing & QAAuto-check passed
  • Glance Test

    DebugBase/glance

    Run E2E browser tests on any web application using Glance MCP.

    156 GitHub stars~827 tokensUpdated 5 mo ago
    Testing & QAAuto-check passed
  • Edt MCP Build Test

    DitriXNew/EDT-MCP

    How to build the EDT-MCP Eclipse plugin (Tycho/Maven) and run its unit and e2e tests, plus the test conventions for this repo.

    295 GitHub stars~1.4k tokensUpdated yesterday
    Testing & QAAuto-check passed
  • Edt MCP E2E Testing

    DitriXNew/EDT-MCP

    How to write/run the AUTOMATED black-box e2e suite (tests/e2e/) that covers every EDT-MCP tool (62 today) against a live server with git-fixture isolation, happy + negative + error-quality coverage…

    295 GitHub stars~1.3k tokensUpdated yesterday
    Testing & QAAuto-check passed
  • Exploring The Wizard

    PostHog/wizard

    Official

    Drive the PostHog wizard headlessly against a throwaway app through wizard-ci MCP tools, inspect decisions, and capture the real TUI.

    197 GitHub stars~2.2k tokensUpdated yesterday
    Testing & QAAuto-check passed
  • Explains how to add an end-to-end test scenario to remindb, choosing between a direct API test and an MCP test and using the shared helpers and fixtures.

    129 GitHub stars~1.8k tokensUpdated 2 mo ago
    Testing & QAAuto-check passed

More from jerrywu001/cc-sessions-viewer

  • Guarded Git Commit and Push

    jerrywu001/cc-sessions-viewer

    Commits and pushes only on an explicit request, pulling first, running the project's CI checks locally, and stopping cold on any conflict or failure.

    395 GitHub stars~603 tokensUpdated 2 days ago
    Auto-check: notes
  • Agent Skill Designer

    jerrywu001/cc-sessions-viewer

    Teaches how to design a good SKILL.md around five patterns: Tool Wrapper, Generator, Reviewer, Inversion and Pipeline.

    395 GitHub stars~1k tokensUpdated 2 days ago
    Auto-check passed

Questions about Tauri Dev MCP Bridge

What does Tauri Dev MCP Bridge do?

Launches a Tauri app's dev build with the MCP bridge compiled in, so an agent can take screenshots, read the live DOM, click real buttons and call real backend commands. This app ships an optional MCP bridge behind a non-default Cargo feature, and the skill's key warning is that the usual npm run tauri dev compiles without it, leaving every bridge tool unable to connect with no explanation in the log. The correct launch is npx tauri dev with the dev-mcp feature, run in the background because it never exits, with the bridge listening on a local port.

When should I use Tauri Dev MCP Bridge?

Tauri Dev MCP Bridge fits situations like: checking that a UI change actually renders in the running Tauri app; driving the app's real buttons and reading back the resulting DOM; calling a real Tauri backend command against real data; taking screenshots of the app window during development.

How do I install Tauri Dev MCP Bridge in Claude Code?

Run `npx skills add jerrywu001/cc-sessions-viewer --skill tauri-dev-mcp -a claude-code`. Or copy the skill folder (.agents/skills/tauri-dev-mcp in jerrywu001/cc-sessions-viewer) into .claude/skills/tauri-dev-mcp in your project. Claude Code loads it when a task matches its description.

How do I install Tauri Dev MCP Bridge in Codex?

Run `npx skills add jerrywu001/cc-sessions-viewer --skill tauri-dev-mcp -a codex`. Or copy the skill folder (.agents/skills/tauri-dev-mcp in jerrywu001/cc-sessions-viewer) into .agents/skills/tauri-dev-mcp in your project. Codex loads it when a task matches its description.

Can I use Tauri Dev MCP Bridge in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jerrywu001/cc-sessions-viewer --skill tauri-dev-mcp -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tauri-dev-mcp, .gemini/skills/tauri-dev-mcp, .github/skills/tauri-dev-mcp and .opencode/skills/tauri-dev-mcp in your project.

What does Tauri Dev MCP Bridge need to run?

Going by SKILL.md and its folder, Tauri Dev MCP Bridge needs the command-line tools its instructions call (npx, osascript and npm). Our summary lists: A Tauri project with the dev-mcp Cargo feature; The MCP bridge plugin and a driver session.

Does Tauri Dev MCP Bridge access the network?

SKILL.md contains no URLs. Its commands use npx and npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Tauri Dev MCP Bridge safe to install?

Our automated static check of SKILL.md flagged 1 warning(s): tells the agent its actions are pre-authorized / not to stop for confirmation. Read the flagged lines before installing; the check is not a guarantee either way.

What licence does Tauri Dev MCP Bridge use?

Tauri Dev MCP Bridge is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Tauri Dev MCP Bridge use?

About 1.4k tokens (SKILL.md is roughly 5.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Tauri Dev MCP Bridge?

Skills that share tags, products or a category with Tauri Dev MCP Bridge: Qwen Code E2E Testing (QwenLM/qwen-code, 28k stars), Glance Test (DebugBase/glance, 156 stars), Edt MCP Build Test (DitriXNew/EDT-MCP, 295 stars) and Edt MCP E2E Testing (DitriXNew/EDT-MCP, 295 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tauri Dev MCP Bridge?

jerrywu001 (a GitHub user) maintains it in jerrywu001/cc-sessions-viewer, which has 395 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on October 7, 2026.

Source: jerrywu001/cc-sessions-viewer on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.