con un clic
browser-tools
// Interactive browser automation via Chrome DevTools Protocol using Brave. Use when you need to interact with web pages, test frontends, or when user interaction with a visible browser is required.
// Interactive browser automation via Chrome DevTools Protocol using Brave. Use when you need to interact with web pages, test frontends, or when user interaction with a visible browser is required.
| name | browser-tools |
| description | Interactive browser automation via Chrome DevTools Protocol using Brave. Use when you need to interact with web pages, test frontends, or when user interaction with a visible browser is required. |
Chrome DevTools Protocol tools for agent-assisted web automation. These tools connect to Brave running on :9222 with remote debugging enabled.
Run once before first use:
cd {baseDir}/browser-tools
npm install
{baseDir}/browser-start.js # Fresh profile
{baseDir}/browser-start.js --profile # Copy user's Brave profile (cookies, logins)
Launch Brave with remote debugging on :9222. Use --profile to preserve user's authentication state.
{baseDir}/browser-nav.js https://example.com
{baseDir}/browser-nav.js https://example.com --new
Navigate to URLs. Use --new flag to open in a new tab instead of reusing current tab.
{baseDir}/browser-eval.js 'document.title'
{baseDir}/browser-eval.js 'document.querySelectorAll("a").length'
Execute JavaScript in the active tab. Code runs in async context. Use this to extract data, inspect page state, or perform DOM operations programmatically.
{baseDir}/browser-screenshot.js
Capture current viewport and return temporary file path. Use this to visually inspect page state or verify UI changes.
{baseDir}/browser-pick.js "Click the submit button"
IMPORTANT: Use this tool when the user wants to select specific DOM elements on the page. This launches an interactive picker that lets the user click elements to select them. The user can select multiple elements (Cmd/Ctrl+Click) and press Enter when done. The tool returns CSS selectors for the selected elements.
Common use cases:
{baseDir}/browser-cookies.js
Display all cookies for the current tab including domain, path, httpOnly, and secure flags. Use this to debug authentication issues or inspect session state.
{baseDir}/browser-content.js https://example.com
Navigate to a URL and extract readable content as markdown. Uses Mozilla Readability for article extraction and Turndown for HTML-to-markdown conversion. Works on pages with JavaScript content (waits for page to load).
Don't take screenshots to see page state. Do parse the DOM directly:
// Get page structure
document.body.innerHTML.slice(0, 5000)
// Find interactive elements
Array.from(document.querySelectorAll('button, input, [role="button"]')).map(e => ({
id: e.id,
text: e.textContent.trim(),
class: e.className
}))
Wrap everything in an IIFE to run multi-statement code:
(function() {
// Multiple operations
const data = document.querySelector('#target').textContent;
const buttons = document.querySelectorAll('button');
// Interactions
buttons[0].click();
// Return results
return JSON.stringify({ data, buttonCount: buttons.length });
})()
Don't make separate calls for each click. Do batch them:
(function() {
const actions = ["btn1", "btn2", "btn3"];
actions.forEach(id => document.getElementById(id).click());
return "Done";
})()
(function() {
const text = "HELLO";
for (const char of text) {
document.getElementById("key-" + char).click();
}
document.getElementById("submit").click();
return "Submitted: " + text;
})()
Extract structured state in one call:
(function() {
const state = {
score: document.querySelector('.score')?.textContent,
status: document.querySelector('.status')?.className,
items: Array.from(document.querySelectorAll('.item')).map(el => ({
text: el.textContent,
active: el.classList.contains('active')
}))
};
return JSON.stringify(state, null, 2);
})()
If DOM updates after actions, add a small delay with bash:
sleep 0.5 && {baseDir}/browser-eval.js '...'
Always start by understanding the page structure:
(function() {
return {
title: document.title,
forms: document.forms.length,
buttons: document.querySelectorAll('button').length,
inputs: document.querySelectorAll('input').length,
mainContent: document.body.innerHTML.slice(0, 3000)
};
})()
Then target specific elements based on what you find.
Create, update, migrate, and debug MCP server configuration for Pi using pi-mcp-adapter. Use when adding an MCP server, editing ~/.pi/agent/mcp.json, importing MCP configs, switching from legacy MCPorter workflows, or documenting MCP setup. Use proactively when auth, server wiring, direct tools, or environment-variable based config is involved.
Create, structure, and refine Agent Skills (OpenClaw format) — the open standard for extending AI agents with specialized knowledge. Use when asked to create a SKILL.md, build an agent skill, write an OpenClaw skill, make a skill for Cursor/VS Code/Claude Code/Copilot/Gemini CLI, or package reusable agent instructions. Triggers include "create a skill", "agent skill", "SKILL.md", "openclaw", ".agents/skills", "skills for my repo", "package this workflow as a skill".
Set up GitHub repo CI with Husky git hooks, commit-check-action, conventional commits, and conventional branch naming. Handles greenfield and existing repos intelligently — detects existing CI, package managers, and config before making changes. Use when setting up CI, adding git hooks, enforcing commit conventions, or standardizing branch naming. Examples: - user: "Set up CI for this repo" → assess repo, install husky + commit-check - user: "Add conventional commits" → configure local hooks + GitHub Action - user: "Enforce branch naming" → add commit-check branch validation - user: "/setup-ci" → full CI pipeline setup with interactive questions - user: "Add husky to this project" → install and configure husky hooks
Web search, content crawling, code context lookup, company research, and deep AI research via Exa. Use when the user needs to search the web, fetch page content from a URL, find code examples or documentation, research a company, or run a deep research report on a complex topic.
Create and manage pi skills with proper SKILL.md format, frontmatter, and organization. Use for skill creation, naming conventions, bundled resources (scripts/references/assets), progressive disclosure patterns, MCP-related skill documentation, and deciding when to use skills vs Pi MCP servers. Use proactively when user says "create a skill", "SKILL.md", "add a skill", "document this workflow", "add MCP server docs", or asks about skill structure.
Search for real-world code examples across a million GitHub repositories. Use when you need to find actual code patterns, library usage examples, or implementation patterns. Triggers include "search GitHub for", "find code examples of", "how do developers use", "show real-world usage of", or any need to see production code patterns.