DEV Community: 0x5eva

Accelerate Development with Fast Feedback Loops Using MCP Browser and LLMs

0x5eva — Fri, 20 Jun 2025 16:45:21 +0000

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!

Setting Up a Private Docker Registry with Coolify

0x5eva — Fri, 09 May 2025 15:36:24 +0000

Docker Registry is an application that handles storing and managing docker container images. It helps create a stable, well tested environment for your app that can be used both during both development and production.

In this tutorial we'll walk through the process of setting up our own private docker registry and pushing images to it.

Why would you need it?

Sure, you could just host your app without it and manage deployments with a few bash scripts. That might work at first but as soon as your app grows, so do your requirements. You might need some kind of rollback mechanism, ensure environment consistency or improve reliability and repeatability.

Besides, the build process often demands more compute resources than simply running the app, which could result in longer deployment durations. It's better to break the deployment into stages, handling all the preparations and code transformations before the app reaches the production server.

Why would you use additional tools like Coolify for this?

Well, technically, you are still able to manage images via terminal commands, but why bother doing this if there is already a battle-tested software that can help us to skip a few steps?

Prerequisites

In this tutorial we'll be using v4.0.0-beta.390 which is the latest available release now

Let’s log into the Coolify dashboard:

Next, we need to add a new service:

Select the Docker Registry service, then choose the server where you want to host it. After that you'll be redirected to the service configuration page:

Here, we can change the name of the container and proceed with the setup.

Don’t forget to click the save button after making any changes!

If you're going to make the registry accessible from the internet, you can also edit the domain name that points to your server's address here.

Now let's set up the login credentials.
This is the default user:
testuser:testpassword

and being represented as

testuser:$2y$05$/o2JvmI2bhExXIt6Oqxa7ekYB7v3scj1wFEf6tBslJvJOMoPQL.Gy

It's defined both in the compose file and in persistent storage after the first launch of the container.
You should change it immediately after installation for security reasons.
To do this, we need to generate a new username:password pair. You can do it with the following command:

You may need to install Apache utilities first:

sudo apt update
sudo apt install apache2-utils

The command to generate the new credentials:

htpasswd -nB docker-tutorial-user

Once we have the generated string we can use it for authentication
so let's update the value in the persistent storage:

Now, let’s take a look at the compose file.
The only optional change we might want to make here is to remove the existing credentials to ensure they won't be used anymore:

services:

  registry:

    image: 'registry:2'

    environment:

      - SERVICE_FQDN_REGISTRY_5000

      - REGISTRY_AUTH=htpasswd

      - REGISTRY_AUTH_HTPASSWD_REALM=Registry

      - REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password

      - REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data

    volumes:

      -

        type: bind

        source: ./auth/registry.password

        target: /auth/registry.password

        isDirectory: false

        content: 'testuser:$2y$05$/o2JvmI2bhExXIt6Oqxa7ekYB7v3scj1wFEf6tBslJvJOMoPQL.Gy'

      -

        type: bind

        source: ./config/config.yml

        target: /etc/docker/registry/config.yml

        isDirectory: false

        content: "version: 0.1\nlog:\n  fields:\n    service: registry\nstorage:\n  cache:\n    blobdescriptor: inmemory\n  filesystem:\n    rootdirectory: /var/lib/registry\nhttp:\n  addr: :5000\n  headers:\n    X-Content-Type-Options: [nosniff]\nhealth:\n  storagedriver:\n    enabled: true\n    interval: 10s\n    threshold: 3"

      -

        type: bind

        source: ./data

        target: /data

        isDirectory: true

Making the registry accessible

After entering a valid domain that points at the server IP address and restarting the container we should be able to connect to the container with our client and push/pull images.

If we didn't change the default settings for the proxy Coolify will automatically issue a valid SSL Let's encrypt certificate:

If we still encounter a certificate error, try switching the default proxy to Caddy and restart the container

Once you see the Login Succeeded message, you can start pushing and using your images! 😊

Additional information:
If you're operating inside the virtual network or just prefer to not expose the registry to the internet you have at least 3 options:

Generate a self-signed certificate
Use ready-to-go tools to set up a VPN with an internal SSL domain
Set up an unencrypted Docker registry and add it to you docker client's daemon.json file

{
  "insecure-registries": ["docker-registry-internal-address:5000"]
}