Station 6: MCP Servers for Enhanced AI Assistance

What are MCP servers?

Prof. Teeters explained: "MCP stands for Model Context Protocol. It's an open standard that lets AI assistants connect to external tools and data sources."

I asked Grace Hopper to help me understand. She said: "Think of MCP as a universal adapter. Just as USB-C connects many devices to your computer, MCP connects many tools to your AI assistant."

Here's what clicked for me:

The best part? VS Code and GitHub Copilot now support MCP servers natively. Prof. Teeters said VS Code added native MCP server support in early 2025, becoming generally available later that year.

Meeting Context7

Prof. Teeters recommended I start with Context7. "It's perfect for your Eleventy documentation problem," she said. "Context7 provides up-to-date, version-specific documentation directly to your AI assistant."

I visited the Eleventy docs at https://www.11ty.dev/ and realized how much had changed since my AI assistant was trained. No wonder I was getting wrong answers!

How Context7 works

1. You ask your AI assistant a question about a library and add the command: use Context7
2. The AI has Context7 fetch the CURRENT documentation from the source
3. Your AI gets accurate, version-specific code examples
4. You get answers that actually work!

What Context7 can access

• Official library documentation
• Code snippets from repositories
• API references
• Version-specific guides

Grace Hopper explains

Grace Hopper added: "Context7 retrieves documentation from thousands of libraries. When you ask about Eleventy, it fetches current Eleventy documentation—not outdated training data."

This was exactly what I needed!

Installing Context7 in VS Code

Prof. Teeters walked me through the installation. It was surprisingly easy!

Step 1: Enable Agent Mode

In VS Code Settings, search for chat.agent.enabled and turn it on. This is required for MCP servers to work with GitHub Copilot.

Step 2: Install from the MCP Gallery

This is the easy part! Open the Command Palette (Cmd+Shift+P on Mac, Ctrl+Shift+P on Windows) and run:

MCP: Browse MCP Servers

Find Context7 in the list and click Install. That's it!

Step 3: Verify it works

Open GitHub Copilot Chat, switch to Agent mode, and click the "Select tools" icon. You should see Context7 listed under your available tools!

HAP's installation experience

I'll be honest—I expected this to be harder. Prof. Teeters laughed and said, "VS Code added the MCP Gallery specifically to make this simple. No JSON files, no command line—just click Install."

For advanced users: You can also install Context7 manually using: npx @upstash/context7-mcp

Grace Hopper approved: "Simplicity enables adoption."

Using Context7 for Eleventy questions

With Context7 installed, I tested it on my actual Eleventy problems.

Real example that saved me

I asked about the Image Transform plugin configuration. Without Context7, the AI suggested options that don't exist. WITH Context7, it pulled the actual plugin documentation and gave me the correct syntax.

The difference was immediate—no more guessing whether the AI's suggestions were current!

Chrome DevTools MCP server

Prof. Teeters had another suggestion: "For frontend development, my favorite is Chrome DevTools MCP. It lets your AI assistant actually control and inspect a live Chrome browser!"

I was skeptical. "The AI can control my browser?"

Key features of Chrome DevTools MCP

• Performance insights: Records traces and extracts actionable performance data
• Network analysis: Analyzes requests without you manually checking DevTools
• Screenshot capture: Takes screenshots for visual debugging
• Console access: Reads browser console errors and warnings
• Reliable automation: Built on the Chrome DevTools Protocol (CDP), similar to how Puppeteer communicates with Chrome

Why this matters for Eleventy

When I deploy my blog, I can ask: "Check my site's Lighthouse performance score" or "Are there any console errors on my homepage?"

Grace Hopper noted: "This server connects AI to your actual development environment. Theory becomes practice."

I installed it following the same pattern as Context7.

Installing Chrome DevTools MCP

Installing Chrome DevTools MCP was just as easy:

Same process as Context7

1. Open Command Palette (Cmd+Shift+P or Ctrl+Shift+P)
2. Run "MCP: Browse MCP Servers"
3. Find Chrome DevTools MCP and click Install

Verifying it works

After installation, I opened Copilot Agent mode and saw new Chrome DevTools tools available. I could:

• Navigate to URLs
• Take screenshots
• Analyze performance
• Check console errors

All through natural language commands!

Prof. Teeters on the pattern

Prof. Teeters pointed out: "Notice how both servers installed the same way? That's the beauty of having a standard protocol. Once you learn the pattern, adding new capabilities is trivial."

The power of having TWO MCP servers felt amazing.

Practical workflow with both servers

Here's my new workflow for building Eleventy sites:

Prof. Teeters' observations

Prof. Teeters observed: "You're not just using AI—you're building a development environment where AI can truly help."

She added: "For really complex problems, I also use the sequential-thinking MCP server—it helps AI break down problems into manageable steps and think more carefully before answering."

I finally understood what she meant by "AI as a learning partner."

Reflection questions

Before you leave this station, think about:

1. How would up-to-date documentation change the way you use AI assistants?
2. What other MCP servers might be useful for your projects? (Hint: there are servers for GitHub, databases, Kubernetes, and more!)
3. Why is it important that MCP is an "open protocol" backed by multiple companies?
4. How does having AI control your browser change debugging?
5. What's the difference between AI trained on old docs vs. AI with live documentation access?

Next steps

Ready to try MCP servers yourself? Here's your path:

1. Verify your setup

• VS Code with MCP support (2025 or later)
• GitHub Copilot extension installed
• Agent Mode enabled in settings

2. Start with Context7

• Run "MCP: Browse MCP Servers" from Command Palette
• Find Context7 and click Install
• Test with a library you're learning

3. Add Chrome DevTools MCP

• Same process—browse, find, install!
• Try "take a screenshot of localhost:8080"
• Run a Lighthouse audit through chat

4. Explore more servers

• Sequential-thinking for complex problem-solving (Prof. Teeters' favorite!)
• GitHub MCP Server for repository management
• Database servers for SQL queries
• Check the VS Code MCP documentation for ideas

Prof. Teeters on the future

The MCP ecosystem is growing fast. Prof. Teeters said: "Learn the pattern now, and you'll be ready for whatever servers come next."