An AI coding assistant can produce a convincing fix without checking what happens when the code runs. Give it access to the browser, the relevant documentation and your project’s actual structure, and you can ask it to investigate the problem and verify the result.
That is where MCP becomes useful. For web development, six servers cover particularly useful jobs: Chrome DevTools, Playwright, Context7, GitHub, Figma and Supabase. Which ones belong in your setup depends on the work you do.
Updated 17 October 2026.
What is an MCP server?
MCP stands for Model Context Protocol, an open standard that connects AI applications to external tools and information. An MCP server exposes capabilities that a compatible AI application can call, such as reading documentation or inspecting a browser. MCP introduction
People often call these integrations “MCP tools”. More precisely, a server can provide several individual tools. Chrome DevTools MCP, for example, has separate tools for console messages, network requests and performance recording. Chrome DevTools tool reference
The six tools at a glance
| MCP server | Main reason to use it |
|---|---|
| Chrome DevTools | Investigate browser errors, rendering and performance. |
| Playwright | Exercise forms, navigation and complete user journeys. |
| Context7 | Retrieve documentation for the libraries you are using. |
| GitHub | Bring repository, issue and pull request context into the task. |
| Figma | Work with design structure, variables and components. |
| Supabase | Work against the actual database structure and project data. |
1. Chrome DevTools MCP: investigate what happens in the browser
Google’s Chrome DevTools MCP gives an agent access to a running Chrome browser. It can examine console errors and network requests, inspect page styling, take screenshots and record performance traces. That makes it especially useful when a page loads slowly, a request fails or the rendered result behaves unexpectedly. Official documentation · Available tools
For a frontend developer, the useful part is the evidence. You can ask the agent to reproduce the problem, identify what it observed, make a targeted change and repeat the same check.
Example prompt:
Open the product page on localhost, reproduce the delay when opening the filters, and record a performance trace. Explain which activity accounts for the delay before proposing a change.
Google announced the public preview on 23 September 2025. The server is now part of Chrome DevTools for agents. Google’s announcement
When comparing performance before and after a change, keep the test conditions consistent. A local trace tells you about the run you measured; it does not establish how every visitor experiences the site.
2. Playwright MCP: check complete user journeys
Microsoft’s Playwright MCP lets an agent navigate pages, fill fields, click controls and inspect the resulting page state. It uses structured accessibility snapshots and supports browser configurations based on Chromium, Firefox and WebKit. Official repository
This is a useful fit for registration forms, search filters, account settings and other flows with several steps. Specify the expected behaviour so the agent has something concrete to check.
Example prompt:
Test registration with empty fields, an invalid email and valid test data. Check the validation messages and the successful state, then report any behaviour that differs from the requirements.
Turn important discoveries into saved regression tests. An agent successfully completing a journey once gives you evidence about that attempt; a maintained test lets you check it again after future changes.
Chrome DevTools MCP or Playwright MCP?
My recommendation is to choose Chrome DevTools for detailed Chrome diagnostics and Playwright for exploring user flows across browser engines. Their capabilities overlap: both can interact with pages and inspect browser evidence. Choose by the task you need to complete. Chrome tools · Playwright capabilities
3. Context7: bring library documentation into the task
Context7 retrieves library documentation and code examples for an AI coding agent, with support for version-specific documentation. It is useful when an implementation depends on an API that has changed or when the agent needs to confirm how a library works. Context7 documentation
For a Vue, Nuxt, React or TypeScript project, make the installed dependency versions part of the request. Ask the agent to check which documentation version it retrieved before applying the example.
Example prompt:
Check the Nuxt version installed in this project. Use Context7 to find the matching documentation for server-side data fetching, then review this page’s implementation against it.
Context7 supports specifying a library and version, but its documentation coverage is not a guarantee of correctness. Confirm the source and keep the project’s build and tests in the loop. Usage and limitations
4. GitHub MCP: understand the context behind a change
GitHub’s official MCP server can read repositories, issues and pull requests, and inspect GitHub Actions workflow results. It also offers write operations when the enabled tools and credentials allow them. Official GitHub MCP server
The practical value is the context around a change: its requirements, previous review comments and failed checks. That context helps you ask a more complete question than “fix this file”.
Example prompt:
Read this issue, the linked pull request and its failed checks. Explain the intended behaviour and identify the smallest change that would address the failure.
For investigation, start with read-only access and the relevant tool groups. GitHub MCP supports both restrictions, so a review task can be configured around the capabilities it needs. Configuration guide
5. Figma MCP: give the agent the design structure
Figma’s official MCP server supplies design context, screenshots, variables and component information. Its design-context output defaults to React and Tailwind, but you can request another framework, including Vue, and ask the agent to reuse components from your project. Figma tools and prompts
That is useful when implementing an existing design system. Include the relevant frame and explain which parts of your codebase already provide buttons, inputs and layout components.
Example prompt:
Implement this settings-screen frame in Vue 3 using our existing form components. Match the design variables and spacing, and flag any interaction states missing from the design.
The remote server also supports creating and editing Figma content. Canvas writing is currently in beta, requires a supported client and edit access, and has plan and seat restrictions; writing outside drafts requires a Full seat. Write to canvas · Access overview
Inspect the finished interface in the browser. Design context still leaves implementation decisions such as responsive behaviour and keyboard interaction to be checked.
6. Supabase MCP: connect the interface to the real schema
For projects using Supabase, its MCP server can inspect tables, run SQL, work with migrations, query logs and generate TypeScript types from the database schema. This helps an agent work with the structure that actually exists in the project. Available tools · Capability overview
It is particularly useful when building data-heavy screens: dashboards, account pages or admin forms. The schema gives the implementation a concrete starting point for field names, types and relationships.
Example prompt:
Inspect the development project’s customer tables and generate the current TypeScript types. Compare them with this form and report any field or type mismatches.
Scope the connection to the relevant project and use read-only mode for investigation. Review migrations in a development environment before applying them to production. Supabase supports project scoping and restricted tool groups alongside read-only SQL access. Configuration and access
Which MCP servers should you start with?
For everyday web development, I would start with Context7 and one browser integration. That gives the agent a way to look up the relevant documentation and examine the running application.
Add GitHub when issues, reviews and CI results are part of your workflow. Add Figma when you regularly implement designs. Add Supabase when the application uses Supabase and you need database context.
Before adding an integration, check what your agent already provides. The Playwright maintainers also offer a CLI with skills and describe it as a potentially more token-efficient option for coding agents. MCP is one available way to expose these capabilities. Playwright CLI
Use the official setup instructions linked above, because connection formats and supported features vary by client. Then give the agent a specific task with an observable outcome: reproduce the bug, identify the evidence, make the change and check the result.
The most useful setup is the one that closes a gap in your actual workflow. Start with a recurring problem and add the tool that helps you investigate it.
Putting AI to work on your website?
Choosing a model is one part of a working feature. If your business needs a support assistant, content workflow or connection to an existing system, I can help define and build the interface, integrations and checks it needs.
