Accelerate Development with Fast Feedback Loops Using MCP Browser and LLMs

The world of modern web development is evolving. Now we're not talking about the notorious race of everyday emerging front-end frameworks or about the environments that have walked the path from text editors to powerful plugin-rich and adjustable IDEs for any purpose.

LLMs are gaining power and becoming better and better so there are two ways to deal with it - deny it or accept it. In order to keep up with the more and more increasing speed of development it's always nice to revisit the current state of events and check new cool kids on the block.

Nowadays the development process has become more like a copy-paste from the error trace to GPT and back. The tools are powerful, but we still require the middleman to handle all of them, to give the context. Context is still something we're trying to handle better, because we often treat LLMs like it's an all-knowing machine forgetting that it can operate only with the available context.

Of course, there are new tools like web search or docs analysis but for better results, it would be nice if the agent could see the results of its creation immediately without the operator's help.

One of them is Playwright MCP. This project is a browser, that provides our agent with "eyes". After generating a component it's able to immediately see the outcome and make the adjustments. You don't need to insert error codes or explain - you could just ask it to check the dev tools and fix the code to avoid those errors, thus creating a powerful feedback loop that helps you to focus on more architectural tasks rather than explaining why you don't like the result. Now, let's dive into how to use it, and let's make a simple news website to test the setup.

Tools required:

• pnpm - as a package manager
• Cursor IDE (or any MCP-compatible IDE like VS Code, Windsurf, etc)
• Playwright MCP - Browser with MCP interface
• TanStack Start - A fullstack framework
• TheNewsAPI - an example API
• Vitest - For visual and unit testing

Initial setup:

pnpm dlx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic
cd start-basic
pnpm install
pnpm run dev

In your package.json, add:

"scripts": {
  "mcp": "npx @playwright/mcp@latest"
}

Then start the development server and MCP browser:

pnpm dev
pnpm mcp:browser

Developing process

Start interacting with the browser via the MCP interface. You'll prompt, observe the outcome, and iterate. For example, you might:

• Ask the agent to check the console for errors
• Let the LLM suggest UI or logic fixes
• Watch as your IDE uses MCP to inspect live browser state and adjust code accordingly

💡 You can also enable auto tool usage - just be cautious, as it can be unstable. I recommend adding the MCP browser command to the allowed list otherwise you might get an unpleasant surprise where the agent installs packages while trying to resolve a simple bug caused by an incorrect import.

So our first goal will be creating a simple news layout. While you're doing that you could also ask LLM to launch a development server, check the webpage and console for any errors and immediately try to resolve them.
Prompt example:

Build a modern news aggregator website using React, Vite, TanStack Router for routing, TanStack Query for data fetching, and Tailwind CSS for styling. The application should have a main page with a category sidebar that filters a news feed, a simple "About" page, and a persistent header for navigation. Fetch articles from a public news API, display them in a card-based layout with a clear loading state, and ensure that clicking a category dynamically updates the main content to show relevant news

💡 News API requires a key
Make sure to add your News API key to the .env file:
NEWS_API_KEY=your_api_key_here

Time to Test

Now let's push the MCP browser to its limits and generate some tests using Vitest.
Prompt example:
_

Use the browser_generate_playwright_test action to generate tests:
-scenario 1: should navigate between Home and About pages
-scenario 2: should filter news by category
_

test('should navigate between home and about pages', async ({ page }) => {
  await page.goto('http://localhost:3000/about');
  await page.getByRole('link', { name: 'Home' }).click();
  await expect(page).toHaveURL('http://localhost:3000/');
  await expect(page.getByRole('heading', { name: 'General News' })).toBeVisible();
  await page.getByRole('link', { name: 'About' }).click();
  await expect(page).toHaveURL('http://localhost:3000/about');
  await expect(page.getByRole('heading', { name: 'About This News Website' })).toBeVisible();
});

test('should filter news by category', async ({ page }) => {
  await page.goto('http://localhost:3000/');
  await page.getByRole('button', { name: 'Business' }).click();

  // Wait for the heading to appear, with a longer timeout
  await expect(page.getByRole('heading', { name: 'Business News' })).toBeVisible({ timeout: 10000 });
}); 

Then, we can also prompt it to run those tests, check for errors, and if they exist - fix them. Yes, it's that easy! However, I also recommend carefully inspecting the generated tests to ensure they actually meet all your requirements of the product.

Don't assume this basic project is the limit of what agents can do. It's just a simple example to help you explore the new development principles that can speed up your workflow a lot - and help you experiment without the regret of wasted time!