🌐 Browser & Web Tools

Overview

Browser & Web Tools give the Oryn agent a full set of capabilities for interacting with the internet and your running web app. The agent can fetch pages and search the web for reference material, drive a real headless Chromium browser to click, fill forms, and take screenshots, and record user-like interactions then replay them as automated Playwright tests. Together these tools let you ask the agent to do anything from "look up the latest API docs" to "fill out the signup form on my local dev server and tell me if it works".

How it works

Three MCP servers wire up the capabilities. The `web-mcp` server provides lightweight HTTP fetch and web search (via SerpAPI) without spinning up a browser. The `browser-mcp` server launches a headless Chromium instance through Playwright and exposes individual actions — navigate, click, fill, screenshot, accessibility snapshot, console log capture — as well as a batch `execute_steps` tool for multi-step flows. Site structure is pre-loaded by the `site-analyzer` MCP, which statically inspects your React/Next/Vite workspace and writes a `.oryn/site-knowledge` JSON file; the browser agent imports that file so it automatically receives route, form, modal, and component context alongside every page it visits. Recorded user interactions are handled by the `BrowserTestController` (.NET backend), which stores step sequences, generates Playwright TypeScript test scripts, and can replay them on demand via `npx playwright test`.

What you can do

How to use it

1. Ask the agent to open a page or search the web
   Type a plain-language prompt such as 'Open https://example.com and tell me what is on the page' or 'Search the web for the latest release notes for Tailwind CSS v4'. The agent picks the right tool automatically — web_fetch or web_search for read-only lookups, browser_navigate when it needs a real rendered page.
2. Let the agent interact with the page
   For tasks that require interaction — logging in, filling a form, clicking through a wizard — just describe what you want: 'Go to http://localhost:3000/signup, fill in the email and password fields, and submit the form'. The agent will use browser_fill and browser_click in sequence, waiting for elements to appear before acting.
3. Review screenshots or accessibility data
   After the agent acts it can take a screenshot so you can confirm what happened, or dump the accessibility tree so it can reason about the current state of the UI. Ask 'take a screenshot of the result' or the agent will do this automatically when it needs to verify the outcome.
4. Check logs if something looks wrong
   Ask 'show me the browser console logs' to see any JavaScript errors, warnings, or failed network requests captured during the session. This is useful for debugging form submissions, API calls, or page-load problems in your app.
5. Record and replay a user flow as a test
   Ask 'record a browser test called checkout-flow starting at http://localhost:3000/cart'. Describe the steps you want captured. When you are done, say 'stop the recording'. The agent stops the recording, generates a Playwright TypeScript spec, saves it as an artifact, and can immediately replay it to confirm it passes.
6. Improve agent accuracy with site knowledge
   For your own app, ask 'analyse my site and import the knowledge'. The site-analyzer MCP scans your workspace, writes a site-knowledge JSON file to .oryn/site-knowledge/, and the browser agent imports it so subsequent interactions benefit from pre-loaded route, form, and component context.

Example

Admin notes

Related