DEV Community: Shada Daab

Browser Automation Workflows with Playwright MCP and JavaScript

Shada Daab — Sat, 08 Nov 2025 14:38:34 +0000

Browser automation just got smarter — and conversational. With the Model Context Protocol (MCP) and Playwright MCP, developers can now let AI agents control browsers: navigating pages, clicking elements, capturing screenshots, and running end-to-end tests — all through natural language.

This post will walk you through how to use the Playwright MCP to set up an AI-driven browser automation workflow in JavaScript or TypeScript.

Why Playwright MCP?

The Playwright MCP server wraps the full power of Playwright (Microsoft’s browser automation library) in the Model Context Protocol — a universal API standard that lets AI systems safely interact with tools.

That means an LLM can now:

Navigate to URLs (goto)
Click and type on elements
Capture screenshots or full-page renders
Extract data or verify page content

All without writing traditional test code — but still fully inspectable and structured.

Step 1: Install Playwright MCP

If you already have Node.js (v18+), installation is one command away:

npx @playwright/mcp init

This installs and configures the Playwright MCP server, exposing endpoints defined by the protocol (such as open_page, click_element, fill_field, and screenshot).

You can also run it manually:

npx @playwright/mcp serve

By default, it runs on http://localhost:4000/mcp.

Step 2: Explore Available Tools

Once the server is live, it exposes MCP tools like:

Tool Name	Description
`open_page`	Opens a given URL
`click_element`	Clicks a DOM element by selector
`fill_field`	Types text into input fields
`get_content`	Retrieves visible text or HTML
`screenshot`	Takes a screenshot of the current page

These structured tool calls allow an AI assistant (like Claude or GPT-5) to reason about page layouts, element trees, and accessibility data rather than raw pixels.

Step 3: Connect from a JavaScript Client

Let’s write a small Node.js client that interacts with the Playwright MCP server.

npm install @modelcontextprotocol/sdk

Then, create a file called browserClient.js:

import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';

const client = new Client({ name: 'playwright-demo' });
const transport = new StreamableHTTPClientTransport('http://localhost:4000/mcp');

await client.connect(transport);

// 1. Open GitHub login page
await client.callTool({
  name: 'open_page',
  arguments: { url: 'https://github.com/login' }
});

// 2. Fill in username & password fields
await client.callTool({
  name: 'fill_field',
  arguments: { selector: '#login_field', value: 'demo_user' }
});

await client.callTool({
  name: 'fill_field',
  arguments: { selector: '#password', value: 'secret_pass' }
});

// 3. Click the login button
await client.callTool({
  name: 'click_element',
  arguments: { selector: 'input[type="submit"]' }
});

// 4. Capture a screenshot after login
const result = await client.callTool({ name: 'screenshot', arguments: {} });

console.log('Screenshot saved:', result.structuredContent.filePath);

This script effectively lets an AI-driven process control your Playwright browser — structured, auditable, and automatable.

Step 4: Natural Language Control with VS Code or Claude

If you use Claude Desktop or the VS Code MCP extension, you can link your Playwright MCP server so that your AI assistant can perform automation via conversation.

Try prompting:

“Open my dashboard at https://example.com/dashboard and tell me how many new messages I have.”

“Navigate to the contact form and fill out the name and email fields.”

The AI uses MCP tools like open_page, get_content, and fill_field to execute these steps — safely and reproducibly.

Step 5: Example — AI-Powered Website Testing

You can use the same setup to perform automated end-to-end (E2E) tests. For example:

const response = await client.callTool({
  name: 'open_page',
  arguments: { url: 'https://example.com/login' }
});

await client.callTool({
  name: 'fill_field',
  arguments: { selector: '#email', value: 'user@example.com' }
});

await client.callTool({
  name: 'fill_field',
  arguments: { selector: '#password', value: 'mypassword' }
});

await client.callTool({ name: 'click_element', arguments: { selector: 'button[type="submit"]' } });

const content = await client.callTool({ name: 'get_content', arguments: { selector: 'h1' } });
console.log('Page heading after login:', content.structuredContent);

You can even let the AI generate these steps itself — by describing the goal instead of coding it.

Step 6: Accessibility Snapshots for Safer Automation

Unlike brittle pixel-based automation, MCP’s structured data layer uses accessibility snapshots and semantic element trees. That means commands like “click the ‘Submit’ button” map to actual labeled UI elements — improving reliability and safety.

This approach is crucial for integrating AI into production-grade testing environments.

Final Thoughts

Playwright MCP transforms the way developers and AI systems interact with the web. By exposing structured browser-control tools, it bridges the gap between conversational AI and real-world automation.

🔧 Key Benefits:

Seamless LLM integration with browser automation.
Declarative and safe access to page content.
Perfect for automated QA, scraping, or RAG data pipelines.

If you’ve ever wished your AI assistant could click that button for you — now it can.

Resources:

Setting Up an MCP Server

Shada Daab — Sat, 08 Nov 2025 14:18:22 +0000

1. Choose Your Environment (Local vs. Cloud)

Local (developer machine): For testing or desktop apps, you can run an MCP server as a local process. Any machine with Node.js installed can host an MCP server. Many reference servers are available as npm packages – for example, the filesystem server (which exposes files as tools) is published as @modelcontextprotocol/server-filesystem.
Cloud (remote): For production or web-based use, host the MCP server on a cloud platform. You can use services like Cloudflare Workers, Azure Functions, AWS Lambda, or any Node-friendly web host. Cloudflare even provides boilerplate and OAuth handling for remote MCP servers. The key is that the server must have an HTTPS endpoint that supports the MCP transport (Streamable HTTP + optional Server-Sent Events). ##

2. Install Dependencies

Make sure you have Node.js (latest LTS) installed. Then initialize a project and install the MCP SDK:

npm install @modelcontextprotocol/sdk express

The @modelcontextprotocol/sdk package contains the TypeScript/JavaScript SDK for building MCP servers and clients.

3. Create Your MCP Server (Example)

Using the TypeScript/JS SDK, you define an McpServer, register tools, and run an HTTP or stdio transport. For example, to make a simple “addition” tool in a Node.js server (server.ts):

import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';

// Create an MCP server instance
const server = new McpServer({
    name: 'demo-server',
    version: '1.0.0'
});

// Register a simple addition tool
server.registerTool(
  'add',
  {
    title: 'Addition Tool',
    description: 'Add two numbers',
    inputSchema: { a: z.number(), b: z.number() },         // e.g. use zod for schemas
    outputSchema: { result: z.number() }
  },
  async ({ a, b }) => {
    // This function runs when the AI calls the 'add' tool
    const sum = a + b;
    return {
      // The AI receives the text and structured output
      content: [{ type: 'text', text: `Result: ${sum}` }],
      structuredContent: { result: sum }
    };
  }
);

This example shows the core of an MCP server: you create an McpServer, then use registerTool(toolName, metadata, handler) to expose a function. In this case, an AI can call the “add” tool with {a:1, b:2} to get {result:3}. The full SDK README provides this example in context.

4. Expose the Server over a Transport

Next, tie the MCP server into an HTTP endpoint so clients can connect. A common pattern with Express is:

import express from 'express';
import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js';

const app = express();
app.use(express.json());

// HTTP endpoint for MCP (Streamable HTTP transport)
app.post('/mcp', async (req, res) => {
  // Create a new transport for each request
  const transport = new StreamableHTTPServerTransport({ enableJsonResponse: true });
  // Clean up on close
  res.on('close', () => transport.close());

  // Connect transport to our server and handle the incoming JSON-RPC
  await server.connect(transport);
  await transport.handleRequest(req, res, req.body);
});

// Start listening
const port = 3000;
app.listen(port, () => {
  console.log(`MCP server running at http://localhost:${port}/mcp`);
});

This skeleton (adapted from the MCP SDK docs) spins up an HTTP POST route at /mcp. MCP clients can then send JSON requests or open an SSE stream here. The key is to call server.connect(transport) and transport.handleRequest(req, res, req.body) for each request. (The SDK docs show this complete example.)

5. Quick-start with Reference Servers (no coding)

For common tasks, you don’t even have to write code. The community maintains ready-to-run MCP server packages. For example, the Filesystem Server (providing file-read/write tools) can be launched with one command. In a terminal, run:

npx -y @modelcontextprotocol/server-filesystem /path/to/dir

This starts an MCP server that grants access to the specified folder. You’ll then configure your AI client (or Claude Desktop, VS Code, etc.) to connect to this local server. Anthropic’s official docs show exactly this command for testing. In the same way, there are packages for other servers (e.g. server-git, server-google-drive, etc.) listed in the MCP GitHub repo.

6. Deploying to the Cloud

When you want your MCP server accessible on the internet, deploy it like any web service. Some options:

Cloudflare Workers: Cloudflare provides a streamlined flow. Their blog explains how a Worker can handle MCP (with built-in OAuth support) in minutes. You can bundle your TypeScript server code into a Worker and use Cloudflare’s workers-oauth-provider library to handle authentication.
Azure Functions / AWS Lambda / Containers: You can host the above Express code in Azure Functions (they even have a sample project) or any Node.js server environment. The only requirement is an HTTPS endpoint for the MCP transport (HTTP+SSE). For example, an Azure Functions template shows how to expose an /mcp SSE endpoint secured with function keys (see MS sample).
Generic Server: Any cloud VM or container works. Just ensure the host has Node, and forward port 3000 (or your port). Configure SSL for production (HTTPS is required for SSE). Once deployed, remote clients will point to your server’s URL instead of localhost.

Integrating MCP into JavaScript Apps

Once your MCP server is running, you can write a JavaScript client to use it. The MCP TypeScript SDK provides Client classes and transports. The common transports for JS are stdio (for local subprocess servers) and SSE/HTTP (for remote servers).

1. Using the MCP Client SDK

Install the same SDK in your JS project:

npm install @modelcontextprotocol/sdk

Then you can create a client and connect. For a local subprocess server (stdin/stdout transport), use StdioClientTransport. For example:

import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';

const client = new Client({ name: 'my-app' });
const transport = new StdioClientTransport({
  command: 'npx',
  args: ['-y', 'my-mcp-server@latest']  // e.g. launch a server via npx
});
await client.connect(transport);

This spawns the server (via npx) as a subprocess and communicates with it over stdio. The code snippet above is adapted from LangChain’s tutorial for MCP. After connect(), the client is linked to the server and ready to call tools.

For a remote (HTTP+SSE) server, use SSEClientTransport or the newer StreamableHTTPClientTransport. For example:

import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { SSEClientTransport } from '@modelcontextprotocol/sdk/client/sse.js';

const client = new Client({ name: 'my-app' });
const transport = new SSEClientTransport('https://myserver.com/mcp');
await client.connect(transport);

This opens a long-lived Server-Sent Events connection to the /mcp endpoint of your server. Once connected, the client and server exchange JSON-RPC messages over this channel.

2. Calling Tools from JavaScript

With the client connected, you can invoke any registered tool on the server. The SDK provides a simple method:

const result = await client.callTool({
  name: 'add',
  arguments: { a: 5, b: 7 }
});
console.log(result.structuredContent); // { result: 12 }

This sends a tool-invocation request to the server’s add tool, and awaits the response. The example above (from the SDK docs) shows calling a tool named “example-tool”. The result includes both textual content and structured output as defined by the server.

You can also read resources (if the server provides any) via client.readResource({...}) or listen to server notifications. In practice, many JS developers use higher-level libraries (e.g. LangChain/MCP adapters) to wrap these calls in agent patterns, but the raw callTool method is there if you need low-level control.

3. Example: Integrating in an App

Suppose you have a Node app that needs to list files via an MCP filesystem server. You might write:

// (After connecting client as above...)
const files = await client.callTool({
  name: 'list-files',
  arguments: { path: '/project', pattern: '*.js' }
});
console.log("JS files:", files.structuredContent.files);

Behind the scenes, the MCP server’s “list-files” tool runs and returns the list of files (in both text and JSON). Your app need not know how the server implemented it. The protocol ensures a clean handoff.

Best Practices and Pitfalls

Least Privilege Access. Only expose the tools and data the AI truly needs. For a filesystem server, explicitly list the directories it may touch. Never mount root or sensitive paths. By default, grant as narrow permissions as possible (e.g. read-only vs. write). Remember that a server runs with the user’s privileges, so be careful – the user approving is effectively giving full access of those resources.
Validate Inputs/Outputs. Define clear schemas for tool arguments and return values (the MCP SDK supports JSON schemas or libraries like Zod as shown). This prevents the AI from sending malformed data. It also keeps logs clean if something goes wrong.
Security (Prompt Injection & Malicious Tools). MCP is powerful, but be cautious. Treat tools as potentially dangerous operations. For example, an LLM might try to combine multiple tool calls in a way that exfiltrates data. Always review which tools an AI can invoke and under what context. Research has shown that MCP can be vulnerable to prompt-injection or sneaky tool replacement attacks, so monitor usage carefully. If you’re connecting to third-party APIs, ensure you’re not leaking tokens or sensitive info.
Use HTTPS and Authentication for Remote. When running servers on the internet, always use SSL/TLS. Implement standard OAuth or API key authentication for your endpoints. (For example, Cloudflare Workers provide a turnkey OAuth handler for you.) MCP itself assumes you’ll use OAuth-like flows to let users sign in and grant permissions, so leverage those rather than writing your own ad-hoc token system.
Handle Errors and Reconnection. Network glitches happen. The MCP SDK transports have retry modes, but design your client to handle disconnects or server timeouts gracefully. Log errors on both sides. The Claude Desktop guide recommends tailing the MCP logs if tools fail – you should similarly monitor your server’s output and the client’s logs.
Keep Spec Versions and SDKs Updated. MCP is evolving rapidly. For example, the older SSE transport is being phased out in favor of the Streamable HTTP transport. Make sure you use the latest SDK releases and check the MCP spec updates. Also pay attention to versioning fields (name, version) in Client and McpServer for compatibility.
Testing. Before connecting a powerful LLM (like GPT-4) to your server, test tools with simple inputs and offline prompts. Tools should fail safely. Use the MCP Inspector tool (npx @modelcontextprotocol/inspector) to list and test tools manually over HTTP.

Useful References and Next Steps

Official Docs: The Model Context Protocol documentation covers the spec and has tutorials (including local vs. remote server setup). Anthropic’s README lists many reference servers and usage tips.
MCP GitHub: The typescript-sdk repo has examples and detailed API info; we cited its Quick Start above.
Articles & Blogs: The Cloudflare MCP blog walks through deploying to Workers. Marc Nuri’s JavaScript tutorial shows client-side code and LangChain integration. Microsoft’s DevBlogs and Azure samples illustrate MCP in C# and TS.
Community Servers: Check out the mcp-servers repo for ready-made servers (Filesystem, GitHub, SQL, etc.) you can adapt.

By following these guidelines and examples, you can bring the power of MCP to your JavaScript projects. MCP servers let your AI assistants do things in your apps and data environments in a secure, standardized way, moving from mere chatbots to truly helpful agents.

Understanding Model Context Protocol (MCP) Servers

Shada Daab — Sat, 08 Nov 2025 14:11:58 +0000

Model Context Protocol (MCP) is a new open standard (introduced by Anthropic in late 2024) that unifies how AI systems like large language models (LLMs) connect to external tools, data, and services.
In MCP’s client-server architecture, an AI host (for example, a chat app or IDE) runs one or more MCP clients, each of which connects to an MCP server that provides specific functionality. An MCP server is simply a program (often a Node/TypeScript/Express service for JS developers) that registers “tools” and “resources” that the AI can invoke . These tools might let the AI read files, query a database, call an API, or perform any domain-specific action. Each action is mediated by the MCP protocol (a JSON-RPC 2.0–based interface over stdio or HTTP/SSE) so that the AI and server communicate in a standardized way .

MCP Architecture – an AI host on the user’s device runs one or more MCP clients, each connected to an MCP server. The server implements tools (functions) or data queries, often calling external APIs, and responds over the MCP protocol

This model solves the “N×M” connector problem: before MCP, developers had to write custom bridge code for each AI-tool pair, leading to many one-off integrations. MCP provides a universal interface for the AI to
discover and use tools . In practice, popular AI platforms (ChatGPT, Claude, etc.) and agent frameworks create an MCP client under the hood, so your JavaScript code can focus on exposing tools or
calling them without worrying about AI prompts.

Why Use MCP Servers? (Benefits & Use Cases)

Standardized integrations. MCP is an open, vendor-neutral protocol (similar in spirit to OpenAPI but for AI tools.). It lets any AI client talk to any MCP server with no proprietary plumbing. Anthropic’s docs note that MCP ships with SDKs in many languages (TypeScript, Python, C#, Java, etc.) and reference implementations for GitHub, Slack, Google Drive, databases, browser automation, and more. This ecosystem means you can often reuse or adapt an existing MCP server rather than reinvent one from scratch.
Secure, user-mediated access. By design, MCP interactions require explicit user approval. For local servers, the AI must ask the user before performing any action, ensuring you stay in control. For remote servers, MCP supports standard OAuth flows so end users can grant limited access tokens without sharing credentials. This combination of explicit approval and scoped tokens helps mitigate risks – for example, Cloudflare’s blog notes that MCP “uses OAuth” under the hood so users grant access safely.
Immediate new capabilities for AI. Connecting an MCP server can dramatically boost an AI’s abilities. For instance, an MCP server exposing your database enables natural-language queries to that database (use cases like “AI2SQL”). In software development, MCP is already powering code-assistant tools: IDEs like VS Code, GitHub Copilot, and platforms like Replit or Sourcegraph connect MCP servers that let the AI read your codebase, search your repo, or manipulate files in real-time. In short, you can turn your AI assistant into an agent that takes actions (sending emails, updating spreadsheets, deploying code, etc.) instead of just answering questions.
Wide adoption and momentum. Major AI providers (OpenAI, Google DeepMind, Microsoft) have embraced MCP. For example, in 2025 OpenAI announced MCP support in ChatGPT and their Agents SDK, and Google confirmed MCP support in its Gemini models. This broad industry adoption means MCP is likely to be supported everywhere agents run, so building on it is future-friendly. (One reporter even called MCP the “USB-C for AI” uniting rivals.)
Customizable to your needs. Because the protocol is open-source and extensible, you can write your own MCP server in JavaScript to connect any data source or tool to AI. This is huge for specialized domains: for example, you could build an MCP server that interfaces with your company’s ERP system or a proprietary API, without having to wait for a vendor plugin.