Building your first MCP workflow

What is an MCP workflow?

An MCP workflow is the combination of multiple MCPs in a sequence of actions that Claude Code chains automatically to accomplish a complex task. Instead of using one MCP at a time, you describe a complete objective and Claude Code orchestrates the different tools to get there.

The tutorial: Context7 + GitHub + Playwright

In this tutorial, we'll create a complete workflow that:

1. Checks the documentation (Context7) to implement a feature
2. Creates the code following up-to-date best practices
3. Visually tests the result (Playwright)
4. Creates a pull request (GitHub) with a summary of changes

Prerequisites

Make sure you have all three MCPs configured in your ~/.claude/settings.json file:

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp"]
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your-token"
      }
    }
  }
}

Verify everything is connected:

Step 1: Formulate the request

The key to a good MCP workflow is a clear and complete request. Don't ask for each step separately -- describe the end goal and let Claude Code orchestrate.

# Launch Claude Code in your project
claude

# Then type your complete request:
# "Check the Next.js 14 docs with Context7 to see how to implement
# a custom 404 page with the App Router.
# Create the not-found.tsx page with a modern design.
# Start the dev server, take a screenshot of the 404 page
# to verify the rendering. Then create a branch and a PR
# with a summary of changes."

Concrete example step by step

Let's see what Claude Code does at each stage.

1. Documentation lookup (Context7)

# Claude Code calls Context7 internally:
# -> resolve-library-id("nextjs")
# -> query-docs("not-found.tsx app router custom 404 page")
#
# Context7 returns the official documentation:
# - not-found.tsx must be in app/
# - It exports a default React component
# - It displays when notFound() is called
# - It can use metadata

2. Code creation

// app/not-found.tsx - Created by Claude Code
import Link from 'next/link'

export default function NotFound() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center">
      <h1 className="text-6xl font-bold text-slate-900 dark:text-white">
        404
      </h1>
      <p className="mt-4 text-xl text-slate-600 dark:text-slate-400">
        This page doesn't exist or has been moved.
      </p>
      <Link
        href="/"
        className="mt-8 rounded-lg bg-brand-600 px-6 py-3 text-white
                   transition-colors hover:bg-brand-700"
      >
        Back to home
      </Link>
    </div>
  )
}

3. Visual testing (Playwright)

4. PR creation (GitHub)

Best practices for MCP workflows

1. Be specific in your requests

2. Let Claude Code orchestrate

Don't break your workflow into micro-steps. Describe the end goal and let Claude Code decide the optimal order of operations. It knows which MCPs to call and in what order.

3. Check intermediate results

Claude Code will ask for confirmation before sensitive actions (creating a PR, sending a message, modifying data). Use these checkpoints to verify everything is going well.

4. Iterate quickly

The advantage of MCP workflows is the speed of iteration. If the result isn't perfect, ask for an adjustment. Claude Code keeps the conversation context and can modify work already done.

5. Combine categories

The most powerful workflows combine MCPs from different categories:

• Development + Productivity: Code review + Slack notification
• Design + Development: Component generation + E2E tests + PR
• Productivity + Design: Email analysis + mockup creation

Advanced workflow examples

"Automated bug fix" workflow

# Ask Claude Code:
# "Look at the Sentry errors from the last 24 hours,
# find the most frequent one, analyze the stack trace,
# identify the file and line in our code,
# propose a fix, write a test to reproduce it,
# visually verify the page works with Playwright,
# and create a PR with all of that."
#
# MCPs used: Sentry + Playwright + GitHub

"Complete feature" workflow

# Ask Claude Code:
# "Check the React Hook Form docs with Context7,
# create a contact form with validation
# (name, email, message, all required).
# Add Tailwind styles, test the form with Playwright
# (empty submission -> errors, valid submission -> success),
# and create a PR with the test screenshots."
#
# MCPs used: Context7 + Playwright + GitHub

"Team report" workflow

# Ask Claude Code:
# "Look at the PRs merged this week on GitHub,
# the important messages from the #engineering channel on Slack,
# and my meetings for the week on Google Calendar.
# Generate a structured weekly report and send it
# to the #weekly-report channel on Slack."
#
# MCPs used: GitHub + Slack + Google Calendar

Next steps

You now have the basics of MCP workflows down. Here's how to go further:

• Discover Skills: Create reusable commands for your workflows
• Master prompting: Advanced techniques for more effective requests
• Understanding MCPs: Back to protocol fundamentals
• Configure The Claude Codex: Generate your ideal configuration