Automating Code Review with Claude Code, Playwright and Notion

Although I use Claude Code almost daily, one area I've barely explored is connecting to other services via MCP.

Today we'll examine how Claude Code behaves as an MCP client (I've discussed MCP previously), connecting with two of the most widely used services in tech to create a small automated code/UI review system.

What is MCP?

MCP is a protocol (created by Anthropic) that enables Claude to connect with thousands of external tools and services. Unlike traditional APIs, which have their own surface and structure, MCP normalizes access through a common interface. This allows you to use the same protocol with services as diverse as Docker, GitHub, or Notion.

MCP matters because it extends your AI workflow and incorporates real tools in real-time, without leaving the conversational environment. It's not just another API: it's a direct integration layer with your stack.

Why Should You Augment Your Workflow with MCP?

Because Claude, by itself, can't actually do anything. What it has is context and judgment.

But it has no access to your database, your Sentry errors, your local files, your deployments, or your Figma designs. MCP gives it arms.

Using Claude Code without MCP is like having a project manager locked in a room without doors or windows. MCP breaks that isolation and transforms Claude into a true orchestrator.

Additionally:

It's more secure than allowing direct access: you define the servers and their scope.
It's reproducible: you can version your .mcp.json per project.
It's delegable: you can encapsulate commands as prompts and slash commands [LINK] (I'll show you how later).
It's extensible: if a server doesn't exist, you can create it yourself with the SDK.

If subagents change "how Claude thinks," MCP changes "what Claude can work with."

Types of MCP Servers

First, check out their documentation, which explains it brilliantly. Essentially, there are two ways to "install" MCP servers for Claude to use.

Although thousands of MCP servers are available, they all fall into at least these two categories.

Local Servers

These need access to your local files and processes, so they run as such on your development machine. Speaking of E2E testing, both Puppeteer and Playwright need access to your processes to use a browser and to your files to, for example, save a screenshot.

Remote Servers

Remote servers host all their infrastructure elsewhere and provide an interface for your MCP client (in this case Claude Code) to interact with them. This includes most tools and services every developer knows: Linear, JIRA, GitHub, Notion, etc.

How to Install MCP Servers with Claude Code

For this demo we'll use two types of MCP servers:

A remote one, like Notion, which connects via HTTP and requires authentication.
A local one, like Playwright, which runs on your machine as a stdio process and needs browser access.

Connecting Claude Code with Playwright (Local)

Microsoft Playwright requires the server to run on your machine because it needs access to your local browser to execute E2E tests, take screenshots, etc.

I recommend checking out the documentation for its MCP server.

The command looks like this:

claude mcp add playwright -- npx @playwright/mcp@latest

You'll receive a confirmation similar to this:

# Added stdio MCP server playwright with command: npx @playwright/mcp@latest to local config
# File modified: **/Users/juan.nunez/.claude.json** [project: /Users/juan.nunez/Desktop/vue-project]

This is crucial because, if you notice, it indicates where it saved the MCP server information: .claude.json in my user directory, meaning user scope. This way I can use Playwright in any project.

Of course, you can modify the scope of MCP connections with Claude Code using the --scope user or --scope project flag during installation.

Connecting Notion with Claude Code (Remote)

In Notion's case, the solution isn't as simple. After trying what the official Claude Code documentation suggests, I ended up with a dead connection that couldn't authenticate with my Notion account.

Notion's own MCP documentation doesn't help either, as it doesn't include Claude Code as an MCP client.

If you think you're clever (like I did) and think, "well, I can use Claude desktop and then export the data" you're in for another surprise: it does NOT work since Notion MCP doesn't leave traces in claude_desktop_config.json:

{
  "mcpServers": {}
}

What to do then? After some research, I found this article 🙏 that suggests a different approach. This one worked.

Go to your Notion account's integrations page.
Create a new Internal integration.
In Configuration, assign the capabilities you need.
Important: don't forget to go to Access and give your integration access to at least one workspace page in Notion (or all of them).

With all this, you'll have a token/secret you can use to authenticate all requests to Notion's MCP server. Copy it, you'll need it to build the command:

claude mcp add notion \
  --env 'OPENAPI_MCP_HEADERS={"Authorization":"Bearer ntn_xxx","Notion-Version":"2022-06-28"}' \
  -- npx -y @notionhq/notion-mcp-server

Of course, replace ntn_xxx with your token, and hit Enter. You should now have both servers connected. Claude Code can:

Take screenshots using the browser with Playwright.
Write and save reports in a live Notion database.

To verify, access Claude Code and use the /mcp command. Your output should look similar or include this:

Demo Time

This is what we'll use to play with MCP and Claude Code.

graph LR
  User --> A[Claude Code Command]--> B[Review Process]
  B <--> |Screenshot| C[Playwright MCP]
  B --> |Report| D[Notion MCP]

We'll create a —very basic— automated UX/code review system.
Through a custom command we'll give Claude instructions.
Claude will then use Playwright to take a screenshot of our work (for example, a view/component).
Claude will compare it with the control image.
Continuing, Claude will analyze the similarities/differences at the UI level, as well as the internal structure and logic.
Finally, Claude will generate a report and save it to your chosen Notion workspace page.

Creating a Custom Command

This is one of my favorite Claude Code features (again, I've discussed custom commands and Claude Code before) and I use it extensively.

Essentially, it's about grouping instructions in a file (Markdown, ./claude/commands/review-component.md) to send them repeatedly to the model through a command (/review-component).

It accepts arguments via $ARGUMENTS and you can even use Bash-style placeholders with $1, $2, $N. The documentation is quite good.

Here's the command (review-component.md):

I want you to review my component from a markup, logic and UI level.
The component is located here: $1
You can see it live if you use the Playwright MCP server to open: $2
And you can compare with the desired result using this reference image: $3

Do the following:
1. Use Playwright to take a screenshot of the live component.
2. Compare it to the reference image and assess visual accuracy.
3. Analyze the source component for:
   - HTML structure and semantic correctness.
   - JavaScript / TypeScript logic quality.
   - UI/UX quality and adherence to modern Tailwind CSS conventions.
4. Write a succinct but professional analysis covering markup, logic and visual output.
5. Save the report as a new entry in the ScratchPad page in Notion via the Notion MCP server.

Use expert-level vocabulary. Avoid generic feedback. Output must be directly actionable.

Using the Command

Once you save the Markdown file, the command will be ready to use with Claude Code. Now you just need to provide the arguments.

In this example, I ran it on a small Vue.js project.

/review-component @src/components/ProfileCard.vue http://localhost/5114 [Image]

Where:

/review-component is the invocation of the custom command we created ($1).
@src/components/ProfileCard.vue is the path to the artifact (component, view, etc.) we want to validate ($2).
[Image] is the control image we want to compare our artifact against ($3).

Results

When executing the command, you'll see Claude begin processing the information and performing its analysis. It will likely ask for authorization at each different interaction with the MCP servers, but you already know how to modify permissions when working with Claude Code (link to my Claude Code professional guide.

When finished, you'll have a report on your chosen Notion workspace page. Something like this:

How to Expand It

As you've seen, this example is just the tip of the iceberg. In other words: much—much more—can be done with the tools Claude Code offers.

It all depends on your situation, circumstances, goals, and workflow, but here are some ideas:

Detail the prompt much more (here's a small AI prompting guide) to receive feedback on specific areas, or using a key technology, etc.
Ask Claude to rate the artifact from 0 to 10 and attach a comparison image between the result and the control image.
If you want to take this further, you can modify the entire process and make it more or less mandatory every time there are code changes (pre-commit hook).
You can even give Claude the option to "fix" the artifact to match the model. It's an iteration between capturing image → correcting. I've tried it myself and it's quite an interesting workflow.

Conclusion

The MCP protocol isn't just another integration: it's a way to unlock real execution from within the conversational environment. Claude stops being an observer and becomes an active part of your toolchain.

This, combined with the modularity of subagents and the power of custom commands, creates a new paradigm: composing intelligent automation from your prompt.