Frontline

Never open DevTools and hunt errors again. Frontline gives your coding agent the context it needs to debug and validate features by running your front-end apps in a real browser.

Comment

Overview

Today’s coding agents can write code and run back-end tests, but front-end development still requires humans to open the browser, read console or network errors, and copy-paste them back to code editors, or other coding agents that can be run locally. Frontline closes the gap by providing agents with live browser context, fully closing the loop on agent-driven development, allowing user to extend from their current SDLC.

Inspiration

We wanted to build a MCP server that would be useful in our daily work. We were inspired by our bad experiences using agents to develop front-end features, and decided to build a tool that can benefit ourselves in our day to day work with applications development. We also contributed to Stagehand’s open source repo in the process.

How it's built

System diagram We built a MCP server that can be integrated into your favorite MCP hosts such as Cursor or Claude Code. The MCP server we built gives them access to a web brower. The MCP server also allows the agent to interact with a webpage using a natural language prompt: this is done by using Stagehand by Browserbase.

This application uses:

  • Stagehand by BrowserBase
  • Weave by Weights & Bias
  • The Model Context Protocol’s official TypeScript SDK
  • OpenAI and Anthropic’s AI SDKs

Features

  1. An MCP server enables real-time browser inspection and error tracing for console logs and network requests.
  2. The user can choose between OpenAI and Anthropic Claude models for Stagehand browser automation
  3. Auto-clicking, auto-form filling, and interaction simulation
  4. Validates changes within code editor against live rendered output from browser
  5. Uses cloud browser instances (Chrome) for visibility (optional)
  6. Cursor agent can now perform needed action to understand the source of error and recommend changes
  7. Trace LLM call with Weave

Demo

https://youtu.be/SZ-4vUR6Ptc?si=7vwoXkYDuFtvQG2E

Sponsor tools

Browserbase: We use Stagehand by Browserbase to automate interacting with browsers from natural language prompts. Weights and Biases: We monitor the traces of the model API calls made by Stagehand using Weave by Weights and Biases.

Challenges

  1. WE ARE NOOBs - our entire team met through OSS community, we have little prior knowledge regarding MCP so we learnt things on the fly during this hackathon
  2. Using Stagehand with a non-headless browser that is also manipulated by a human user is currently inconvenient. One reason is the lack of an option to use the OS viewport size. We end up open several PR to improve the issue.
  3. Weave's Typescript SDK doesn't support MCP server. It only supports LLM call tracing. We added Weave for stagehand's browser automation and additionally attempted to write a new typescript SDK from scratch to support complex instrumenting to include infra/system information including machine details, v8 conditions, network requests etc.

OSS PR opened/pending during this hackathon

  1. Allow dynamic viewport for stagehand
  2. Readme improvement for stagehand
  3. Custom tracing typescript SDK for Weave to support protobuf conversion and MCP server, completely OTEL compliant

What's Next & What can be done better

  • Finish the tracing package customized for weave so it can trace both LLM calls and MCP servers. Our traces don't have a stacks due to current limitation
  • The unfinished CLI package should auto set up agent tooling, spin up both MCP inspector, MCP server and install package/tool to take care of necessary dependencies like Playwright

Built With

Share this project:

Updates