hanzi-browse

by hanziliVerified

let any ai agent use the local browser

175
Stars
51
Forks
JavaScript
Language
8/23/2026
Added
View on GitHubDownload ZIP

⚠️ Third-Party Software Notice

This skill is third-party open-source software developed and hosted independently on GitHub. SkillTip is an informational directory and does not control or maintain the underlying repository. Any security checks displayed are automated and limited in scope. Review the source code before installing.

Read the Terms of Service

Installation

Add to your Claude Code skills directory:

# Add to your Claude Code skills
git clone https://github.com/hanzili/hanzi-browse

Getting Started

Guides for using skills like hanzi-browse.

Security Report

Verified

Last scanned: —

{
  "status": "PASSED",
  "issues": []
}

README.md

English | 中文

Hanzi Browse

Hanzi Browse

The context layer for browsing agents.

Your browsing agent keeps failing on real sites — X uses Draft.js, LinkedIn hides the
connect button, Gmail needs keyboard shortcuts. Hanzi Browse ships 24 site playbooks —
hints for the LLM, not brittle scripts — so it actually finishes the task.

npm Chrome Web Store Discord License

Works with

Claude Code   Cursor   Codex   Gemini CLI   VS Code   Kiro   Antigravity   OpenCode


Watch demo


Two ways to use Hanzi Browse

Same 24 site playbooks underneath. Two install paths depending on who's driving.

For your agent — a browser sub-agent for your coding agent

One command. npx hanzi-browse setup detects every AI agent on your machine (Claude Code, Cursor, Codex, and 9 more) and wires Hanzi Browse in as an MCP tool. Your main agent delegates browser work; a sub-agent runs the loop — read page → plan next action → click/type/scroll → observe → repeat until done — and returns a clean answer. Site playbooks auto-load by URL so the model already knows the quirks.

Use it now

For your product — browser automation for your users, described in English

Your backend calls runTask({ task: "…" }). Your users' own Chrome executes it, signed in as themselves. Same 24 playbooks as the CLI, exposed as a REST API and @hanzi-browse/sdk. Free tools on tools.hanzilla.co are built on this SDK.

Build with it


Get Started

npx hanzi-browse setup

One command does everything:

npx hanzi-browse setup
│
├── 1. Detect browsers ──── Chrome, Brave, Edge, Arc, Chromium
│
├── 2. Install extension ── Opens Chrome Web Store, waits for install
│
├── 3. Detect AI agents ─── Claude Code, Cursor, Codex, Windsurf,
│                           VS Code, Gemini CLI, Amp, Cline, Roo Code
│
├── 4. Configure MCP ────── Merges hanzi-browse into each agent's config
│
├── 5. Install skills ───── Copies browser skills into each agent
│
└── 6. Choose AI mode ───── Managed ($0.05/task) or BYOM (free forever)
  • Managed — we handle the AI. 20 free tasks/month, then $0.05/task. No API key needed.
  • BYOM — use your Claude Pro/Max subscription, GPT Plus, or any API key. Free forever, runs locally.

Examples

"Go to Gmail and unsubscribe from all marketing emails from the last week"
"Apply for the senior engineer position on careers.acme.com"
"Log into my bank and download last month's statement"
"Find AI engineer jobs on LinkedIn in San Francisco"

Skills & Free Tools

Hanzi Browse has two distribution channels. Both use the same browser automation engine and site domain knowledge:

Skills — for users who run Hanzi Browse locally through their AI agent. The setup wizard installs skills directly into your agent (Claude Code, Cursor, etc.). Each skill teaches the agent when and how to use the browser for a specific workflow.

Free Tools — hosted web apps that anyone can try without installing anything. Each tool is a standalone app built on the Hanzi Browse API that demonstrates a use case. Every skill can become a free tool.

Skills

Installed automatically during npx hanzi-browse setup. Your agent reads these as markdown files.

SkillDescription
hanzi-browseCore skill — when and how to use browser automation
e2e-testerTest your app in a real browser, report bugs with screenshots
social-posterDraft per-platform posts, publish from your signed-in accounts
linkedin-prospectorFind prospects, send personalized connection requests
a11y-auditorRun accessibility audits in a real browser
data-extractorExtract structured data from websites into CSV/JSON
x-marketerTwitter/X marketing workflows

Open source — add your own.

Free Tools

Try them at tools.hanzilla.co. No account needed — just install the extension and go.

ToolWhat it doesTry it
X MarketingAI finds relevant conversations on X, drafts personalized replies, posts from your Chrometools.hanzilla.co/x-marketing

Site Playbooks — the context layer

Both CLI and SDK rely on a shared set of site playbooks — verified interaction recipes for complex websites. They teach the LLM how async loading works on X, which selector hides LinkedIn's connect button, that Gmail responds to keyboard shortcuts, and how to sidestep anti-bot detection on ~20 other sites.

Hints for the LLM, not brittle scripts. The model stays in control; we just hand it the cheat sheet. When the DOM shifts, the agent adapts — no adapter to rebuild.

Currently supports 24 sites: X, LinkedIn, Gmail, GitHub, Notion, Figma, Slack, Reddit, Amazon, eBay, Walmart, Target, Zillow, Apartments.com, Craigslist, Indeed, Google Docs, Sheets, Calendar, Drive, ChatGPT, Claude.ai, Stack Overflow.

All playbooks live in server/src/agent/domain-skills.json as a single shared JSON array. To add a site, open a PR appending a { domain, skill } entry.


Build with Hanzi Browse

Embed browser automation in your product. Your app calls the Hanzi Browse API, a real browser executes the task, you get the result back.

  1. Get an API keysign in to your developer console, then create a key
  2. Pair a browser — create a pairing token, send your user a pairing link (/pair/{token}) — they click it and auto-pair
  3. Run a taskPOST /v1/tasks with a task and browser session ID
  4. Get the result — poll GET /v1/tasks/:id until complete, or use runTask() which blocks
import { HanziClient } from '@hanzi-browse/sdk';

const client = new HanziClient({ apiKey: process.env.HANZI_API_KEY });

const { pairingToken } = await client.createPairingToken();
const sessions = await client.listSessions();

const result = await client.runTask({
  browserSessionId: sessions[0].id,
  task: 'Read the patient chart on the current page',
});
console.log(result.answer);

API reference · Dashboard · Sample integration


Tools

ToolDescription
browser_startRun a task. Blocks until complete.
browser_messageSend follow-up to an existing session.
browser_statusCheck progress.
browser_stopStop a task.
browser_screenshotCapture current page as image.

Pricing

ManagedBYOM
Price$0.05/task (20 free/month)Free forever
AI modelWe handle it (Gemini)Your own key
DataProcessed on Hanzi Browse serversNever leaves your machine
BillingOnly completed tasks. Errors are free.N/A

Building a product? Contact us for volume pricing.


Development

Prerequisites: Node.js 18+, Docker Desktop (must be running before make fresh).

First time (local setup)

git clone https://github.com/hanzili/hanzi-browse
cd hanzi-browse
make fresh

Performs full setup: installs deps, builds server/dashboard/extension, starts Postgres, runs migrations, and launches the dev server (~90s).

Run the project

make dev

Starts the backend services (Postgres + migrations + API server) and serves the dashboard UI.

Configuration

The defaults in .env.example are enough to run the server.

Optional services:

  • Google OAuth (dashboard sign-in) -- add GOOGLE_CLIENT_ID / GOOGLE_CLIENT_SECRET to .env
  • Stripe (credit purchases) -- add test keys to .env
  • Vertex AI (managed task execution) -- see .env.example for setup steps
  • PostHog (analytics) -- add POSTHOG_API_KEY to enable local CLI telemetry, dashboard analytics, managed backend analytics, and the example apps; optionally set POSTHOG_HOST

Load the extension

Open chrome://extensions, enable Developer Mode, click "Load unpacked", and select the project root (the folder that contains manifest.json).

Verify everything works

After make dev is running and the extension is loaded, test both user paths:

Test 1: MCP / CLI mode (user path)

# In a separate terminal:
node server/dist/cli.js start "Go to example.com and tell me the page title"

You should see a Chrome window open, the agent navigate to example.com, and return the page title. If this works, the relay + extension + agent loop are all connected.

Test 2: Managed API mode (developer path)

# 1. Check the API is running
curl http://localhost:3456/v1/health

# 2. Open the dashboard and sign in (requires Google OAuth configured)
open http://localhost:3456/dashboard

# 3. Create an API key from the dashboard, then:
curl -X POST http://localhost:3456/v1/browser-sessions/pair \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json"

# 4. Open the pairing URL in Chrome (from the response)
open "http://localhost:3456/pair/PAIRING_TOKEN"

# 5. After pairing, run a task
curl -X POST http://localhost:3456/v1/tasks \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"task": "Go to example.com and read the title", "browser_session_id": "SESSION_ID"}'

# 6. Check the result
curl http://localhost:3456/v1/tasks/TASK_ID \
  -H "Authorization: Bearer YOUR_API_KEY"

Test 3: Embed widget

Create a test HTML file and open it in Chrome:

<div id="hanzi"></div>
<script src="http://localhost:3456/embed.js"></script>
<script>
  HanziConnect.mount('#hanzi', {
    apiKey: 'YOUR_PUBLISHABLE_KEY',
    apiUrl: 'http://localhost:3456',
    onConnected: (id) => console.log('Connected:', id),
    onError: (err) => console.log('Error:', err),
  });
</script>

You should see the pairing widget with step-by-step instructions.

Notes

  • Local vs CLI usage -- npx hanzi-browse setup is for packaged usage and may not work in a local clone
  • Port conflicts -- if you see EADDRINUSE on 3456, stop existing processes or run make stop
  • No Google OAuth? -- The dashboard sign-in won't work, but you can seed a test workspace directly in the database and use the API key for testing

Commands

CommandWhat it does
make freshFull first-time setup (deps + build + DB + start)
make devStart everything (DB + migrate + server)
make buildRebuild server + dashboard + extension
make stopStop Postgres
make cleanStop + delete database volume
make check-prereqsVerify Node 18+ and Docker are available
make helpShow all commands

Contributing

We welcome contributions! See CONTRIBUTING.md for setup instructions.

Good first contributions: new skills, landing pages, site-pattern files, platform testing, translations. Check the open issues.


Community

Discord · Documentation · Twitter


Privacy

Hanzi Browse operates in different modes with different data handling. Read the privacy policy.

  • BYOM: No data sent to Hanzi Browse servers. Screenshots go to your chosen AI provider only.
  • Managed / API: Task data processed on Hanzi Browse servers via Google Vertex AI.

License

Polyform Noncommercial 1.0.0

Frequently Asked Questions

What is hanzi-browse?

hanzi-browse is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by hanzili. let any ai agent use the local browser. It has 175 GitHub stars.

Is hanzi-browse safe to use?

Yes. hanzi-browse passed SkillsLLM's automated security scan — a dependency vulnerability audit plus prompt-injection heuristics — with no high-severity issues. You can read the full report in the Security Report section on this page.

How do I install hanzi-browse?

Clone the repository with "git clone https://github.com/hanzili/hanzi-browse" and add it to your Claude Code skills directory (see the Installation section above).

What programming language is hanzi-browse written in?

hanzi-browse is primarily written in JavaScript. It is open-source under hanzili on GitHub, so you can review or fork the full source.

Are there alternatives to hanzi-browse?

Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh hanzi-browse against similar tools.

Comments (0)

No comments yet. Be the first to share your thoughts!

ECC

by affaan-m

10

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

242,21936,702JavaScript
AI Agentsai-agentsanthropicclaude-code
View details
15

An agentic skills framework & software development methodology that works.

234,96620,863Shell
AI Agentsai-agentsbrainstorming
View details

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

185,94028,768JavaScript
AI Agentsai-agentsanthropicclaude-code
View details

cc-switch

by farion1231

3

A cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Grok Build & Hermes Agent. Only official website: ccswitch.io

128,8688,826Rust
AI Agentsclaude-codeai-tools
View details

claude-code

by anthropics

Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.

120,03119,897Shell
AI Agents
View details

Developers Also Liked

Based on votes and bookmarks from developers who liked this skill

ECC

by affaan-m

10

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

242,21936,702JavaScript
AI Agentsai-agentsanthropicclaude-code
View details
15

An agentic skills framework & software development methodology that works.

234,96620,863Shell
AI Agentsai-agentsbrainstorming
View details

n8n

by n8n-io

12

Fair-code workflow automation platform with native AI capabilities. Combine visual building with custom code, self-host or cloud, 400+ integrations.

201,88160,308TypeScript
MCP Serversapisai-tools
View details

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

185,94028,768JavaScript
AI Agentsai-agentsanthropicclaude-code
View details

cc-switch

by farion1231

3

A cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Grok Build & Hermes Agent. Only official website: ccswitch.io

128,8688,826Rust
AI Agentsclaude-codeai-tools
View details