Walkthrough Agent
Uses Google Gemini API to generate contextually valid dummy data for form inputs during walkthroughs.
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., "@Walkthrough Agentwalk through the signup page at localhost:3000/signup using source from ./src/app/signup"
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.
Walkthrough Agent
An agentic MCP server that reads your app's source code, generates contextually valid dummy data, and drives a browser through your pages — narrating every step.
What it does
Developer runs agent
↓
Agent reads source folder → understands page structure
↓
Gemini generates contextually valid dummy inputs
↓
Playwright opens localhost URL + fills inputs + navigates
↓
On validation error → extract error from DOM → Gemini corrects inputs → retry (up to 3x)
↓
Output: terminal narration + screenshots + markdown report + Playwright traceRelated MCP server: MCP Cypress Page Object Generator
Setup
git clone <this repo>
cd walkthrough-agent
npm install
npx playwright install chromium
cp .env.example .env
# Add your GEMINI_API_KEY to .envGet a free Gemini API key at aistudio.google.com.
Usage
Standalone CLI (fastest)
# Analyze + generate inputs + run browser walkthrough
npx walkthrough-agent --url http://localhost:3000/signup --folder ./src/app/signup
# DOM-only mode (no source folder needed)
npx walkthrough-agent --url http://localhost:3000/login
# Analyze only — print PageAnalysis + InputMap, no browser
npx walkthrough-agent --url http://localhost:3000/signup --folder ./src --analyze-only
# Override entry file detection
npx walkthrough-agent --url http://localhost:3000 --folder ./src --entry App.tsx
# Adjust max retries
npx walkthrough-agent --url http://localhost:3000/signup --folder ./src --retries 5Output
Each run creates a timestamped directory:
output/run-2026-01-15-143022/
report.md ← walkthrough narrative
trace.zip ← Playwright trace (open at trace.playwright.dev)
screenshots/
01-page-load.png
02-fill-email.png
03-submit.png
04-result.pngAs an MCP Server (Gemini CLI)
Build first:
npm run buildAdd to your Gemini CLI config:
{
"mcpServers": {
"walkthrough-agent": {
"command": "node",
"args": ["/path/to/walkthrough-agent/dist/server.js"],
"env": { "GEMINI_API_KEY": "your-key-here" }
}
}
}Tools available in Gemini CLI:
analyze_page— extract form structure from source + live DOMgenerate_inputs— generate valid dummy datarun_walkthrough— drive Playwright through the pagegenerate_report— write markdown report
Example terminal output
Walkthrough Agent
──────────────────────────────────────────────────
Analyzing ./src/app/signup ...
Entry file: page.tsx
Found: email, password, confirm-password, submit
Validation rules: valid email, min 8 chars, must match password
Generating inputs...
email → alex.morgan@testmail.dev
password → Walkthrough#42
confirm-password → Walkthrough#42
Output directory: output/run-2026-01-15-143022
Opening http://localhost:3000/signup
Page loaded
email filled
password filled
confirm-password filled
Submitting...
Error detected: "Password must contain a special character"
Retry 1/3 — correcting inputs...
Submission successful
──────────────────────────────────────────────────
Screenshot(s) saved: 6 files in output/run-.../screenshots
Report saved: output/run-.../report.md
Trace saved: output/run-.../trace.zipKnown concerns (before shipping v1)
See PLAN.md for items to address before implementation:
FormElement stable key algorithm
Error selector → fieldId mapping
analyze_pagePlaywright lifecycle in DOM-only modeTypeScript build tooling verified above
Gemini free-tier quota — verify before heavy use
Report schema — implemented in
src/tools/report.ts
v2 roadmap
Auth support (
--session-cookieflag)Multi-page flow chaining
Negative test case generation
CI/CD — GitHub Action that posts walkthrough report as PR comment
Claude Desktop MCP support
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/sbhoyar1009/walkthrough-mcp-tool'
If you have feedback or need assistance with the MCP directory API, please join our Discord server