MCP Servers – Giving AI Arms and Legs

MCP (Model Context Protocol) servers are like giving Claude actual hands to work with. Instead of just suggesting code, Claude can interact directly with your database, test in a browser, and manage your Linear tasks, and much more.

Think of it this way: without MCP servers, AI is like an expert consultant who can only talk. With MCP servers, the AI becomes a team member who can actually do things in other tools.

Skills vs MCP – what's the difference?

Your installed skills are knowledge – they tell Claude the right way to do things. An MCP server (or connector) is access – a live connection to a real tool. They pair up: a skill knows the right way to work with your database; a connector lets Claude actually read from it.

1. Understanding MCP Servers

MCP servers extend what AI can do by providing structured access to external tools and services. Instead of copying/pasting between tools, Claude operates them directly.

What MCP Servers Enable:

  • Neon: Claude can query your database and check table structures
  • Chrome DevTools MCP: Claude can test your site in a browser, take screenshots, and debug
  • Linear MCP: Claude can create issues, update status, and track your sprint progress

Why This Matters for Non-Technical Builders: You'll spend less time copying error messages, database URLs, and test results. Claude sees what you see and can help faster and more accurately.

The Analogy:

  • Without MCP: "I have an error. Let me screenshot it and describe it to you."
  • With MCP: Claude sees the error directly and can test fixes in real-time.

Outcome: You understand what MCP servers are and why they're powerful.

I understand what MCP servers do and why they're useful

2. Add Servers via Claude Desktop Connectors

The easiest way to give Claude these tools is Claude Desktop connectors – a built-in, one-click directory with OAuth sign-in. No config files, no API keys. Connectors you add in the desktop app are available to your Code sessions too.

How to add a connector (recommended):

  1. In Claude Desktop, click the + next to the prompt box and choose Connectors (or open Settings → Connectors).
  2. Browse the directory and add the ones you want:
    • Linear – task and sprint management
    • Neon – database access and queries
    • Chrome DevTools / browser – browser testing and debugging
  3. Sign in with OAuth when prompted – that's it, no keys to manage.

What you'll need ready:

  • A Linear account, and your Neon database (set up in Level 3)
  • Chrome installed on your system (for browser testing)
Start a new chat after adding a connector

Like skills, a newly added connector only becomes available when a session starts. After adding one, start a new chat (or fully reopen Claude) – then its tools are ready from the first message.

Alternative: commit the MCP server to your repo

Prefer to keep the setup in your codebase (so it travels with the project and teammates get it automatically)? Ask Claude in the chat: "Add the official Neon MCP server to my project's .mcp.json." Claude writes a .mcp.json you commit to Git. Connectors are the simpler default; this is the power-user route. See the MCP docs for the current server URLs.

Outcome: Your connectors are added and ready to authorize.

I added the Linear, Neon, and browser connectors

3. Connect to Linear MCP Server

The Linear MCP server lets Claude interact with your sprint board – creating issues, updating statuses, and tracking progress. Let's connect it and test it with your current sprint.

Configuration:

The Linear MCP uses OAuth, making setup simple:

  1. When you add the server, Claude Code prompts you to authorize access to your Linear workspace
  2. Click "Authorize" and sign in to Linear if needed
  3. Grant the requested permissions
  4. That's it – no API keys to manage

Make sure you're using a workspace where you have permission to read and create issues.

Get current sprint tasks from Linear
Using the Linear MCP server, show me all tasks from my current cycle that I created.
Please:
1.Connect to my Linear workspace
2.Identify the current active cycle
3.Filter for tasks that I created (assigned to me or created by me)
4.Display them in an organized list with:
- Task title
- Current status
- Priority (if set)
- Any dependencies or blockers
Format the results so I can see what I should work on next.

What you'll be able to do with Linear MCP:

  • "Show me my current sprint tasks"
  • "Create a new issue for fixing the login redirect"
  • "Update the Clerk setup task to 'In Progress'"
  • "What tasks are blocked waiting for dependencies?"

Workflow Integration: As you work through lessons, Claude can automatically update Linear issues, keeping your sprint board accurate without manual updates.

Outcome: Linear MCP is connected and displaying your current sprint tasks.

I connected Linear MCP and retrieved my current sprint tasks

4. Connect to Chrome DevTools MCP Server

The Chrome DevTools MCP lets Claude open your app in a browser, interact with it, take screenshots, and analyze performance. This is incredibly useful for testing user experiences and identifying optimization opportunities.

Configuration:

  1. Add the Chrome DevTools MCP server (Section 2) – it runs locally via npx, so there's nothing to sign in to.
  2. Make sure Chrome is installed on your system.
  3. Claude Code launches and controls Chrome when the server is called – no API keys needed.
Test app and get improvement suggestions
Using the Chrome DevTools MCP server, let's analyze my application:
1.Start my local development server (if not already running)
2.Navigate to my app's homepage in the preview
3.Take a screenshot of the homepage
4.Analyze the page and provide:
- The top 3 performance optimization opportunities (with specific metrics if available)
- The top 3 UI improvement suggestions (focusing on user experience and visual design)
Please present the suggestions clearly but DO NOT implement any changes yet. I want to review the recommendations first.
Include specific details like:
- Load times or performance scores
- Specific UI elements that could be improved
- Why each suggestion would make a meaningful difference

What you'll be able to do with Chrome DevTools MCP:

  • "Open my app and screenshot the homepage"
  • "Test the signup form and show me any errors"
  • "Check if the login flow redirects correctly"
  • "Verify the onboarding screens display properly"
  • "Analyze page performance and suggest optimizations"

Why this matters: Authentication flows involve multiple screens, redirects, and state changes. Having Claude test these flows automatically and suggest improvements saves hours of manual testing and optimization work.

Outcome: Chrome DevTools MCP is connected and has analyzed your application with improvement suggestions.

I connected Chrome DevTools MCP and got performance/UI suggestions

5. Connect to your Neon database

Claude can already reach your Neon database through the connection string Vercel set up – but a database connector gives it a cleaner, structured way to explore your schema and data. Neon offers an official MCP you can add the same way as the others.

Configuration:

  • Add the Neon connector from the + → Connectors menu and authorize it (sign in to Neon), or simply ask Claude to inspect your database using the connection it already has.
Get a database overview
Connect to my Neon database and give me an overview:
1.List all the tables.
2.For each table, explain what it's for, its key columns, and how they relate.
3.Highlight anything related to users.
Present it clearly so I understand my database structure.

What you'll be able to do:

  • "What tables exist in my database?"
  • "Show me the last 5 rows in the [x] table"
  • "Did my latest migration apply correctly?"
  • "Why isn't this query returning what I expect?"

Security note

Connecting your database to an AI carries some risk – mainly prompt injection, where the AI could be tricked by commands hidden in your data. Keep these habits:

  • Review before approving. Claude asks before each database action – keep that on and read what it's about to do.
  • Developer tool only. Don't expose this access to your end users.
  • Read-only when you can. If you only need to look, prefer read-only access.

Outcome: Claude can explore your Neon database, and you understand the safety basics.

I connected Claude to my Neon database and understand the safety basics

6. Test All MCP Servers Together

Now verify all three MCP servers work together in a coordinated workflow.

Check your connectors are live:

Open Settings → Connectors in Claude Desktop and confirm Linear, Neon, and the browser connector are all listed and signed in. If one shows as disconnected, click it and re-authorize.

If you went the codebase route instead, your servers live in a .mcp.json at your project root – check connection status anytime by asking Claude to list its connected MCP servers.

Remember: if you just added a connector, start a new chat so its tools load.

Test coordinated workflow with all MCP servers
Let's test all three MCP servers working together in a realistic workflow:
1.**Linear MCP**: Show me the first task in my current sprint
2.**Neon**: Display a summary of my database tables and their relationships
3.**Chrome DevTools MCP**: Open my app at the homepage and take a screenshot
After completing these three checks, explain how these tools will work together in my daily development workflow:
- How Linear tracks what I'm working on
- How Neon helps me understand and query my database
- How Chrome DevTools lets me test and verify the user experience
Summarize the unique value each MCP server provides and when to use each one.

Typical workflow using all three:

  1. Check Linear for your next task
  2. Implement the feature with Claude's help
  3. Claude queries and validates via Neon
  4. Claude tests the UI/UX via Chrome DevTools MCP
  5. Claude updates the Linear issue status to "Done"

Outcome: All three MCP servers are working together and you understand their coordinated workflow.

I tested all MCP servers together and understand the workflow

7. Understand MCP Server Usage Patterns

Learn when and how to leverage these MCP servers throughout your development process.

When to use the Neon connector:

  • Designing database tables: "What columns should my users table have?"
  • Writing queries: "How do I query all tasks for the current user?"
  • Debugging data access: "Why isn't this query returning the rows I expect?"
  • Verifying migrations: "Did my migration apply correctly?"

When to use Chrome DevTools MCP:

  • Testing flows: "Test the complete signup and login flow"
  • Visual verification: "Screenshot all onboarding screens"
  • Debugging errors: "What console errors appear when I click login?"
  • Responsive testing: "How does the auth form look on mobile?"

When to use Linear MCP:

  • Sprint planning: "What tasks are left in this sprint?"
  • Status updates: "Mark the Clerk setup task as complete"
  • Dependency checking: "What can I work on next?"
  • Progress tracking: "Show sprint velocity and remaining work"

Privacy and Security:

  • MCP servers access your tools with the permissions you grant during OAuth authorization
  • You can revoke access at any time from your service provider's settings (Linear, Neon)
  • OAuth connections are more secure than API keys – no credentials to store or expose
  • Review connected servers anytime from the + → Connectors menu, or by asking Claude to list its connected MCP servers

Outcome: You know when to use each MCP server and how to use them securely.

I understand when and how to use each MCP server effectively

What's Next

You've given Claude powerful capabilities to enhance your development workflow:

  • Linear MCP – Sprint and task management integrated into your coding process
  • Neon – Direct database access for queries, schema validation, and debugging
  • Chrome DevTools MCP – Automated browser testing, performance analysis, and UI verification

In the next lessons, you'll use these MCP tools to design and implement features with Claude handling coordination across all three platforms.

References