Lab 3.4: Connecting to the Outside World

Module: 3.4 - MCP Integration | ← SlidesDuration: 30 minutes Sample Project: hackathon-starter

Learning Objectives

By the end of this lab, you will be able to:

• Understand what MCP (Model Context Protocol) is
• Configure Claude to use MCP servers
• Use external tools in your prompts
• Integrate external data into coding tasks

Prerequisites

• Completed previous Day 3 labs
• Node.js installed
• Basic understanding of APIs

What is MCP?

Model Context Protocol is a standard for connecting AI assistants to external tools and data sources.

Without MCP, Claude is limited to:

• Reading local files
• Running shell commands
• Web searches

With MCP, Claude can:

• Query databases
• Fetch Jira tickets
• Access Figma designs
• Call any API you configure

Setup

# Navigate to the sample project
cd sample-projects/hackathon-starter

# Start Claude Code
claude

---

Task 1: Explore Built-in MCP Tools

Time: 10 minutes

Claude Code comes with some built-in capabilities. Let's explore what's available.

Check available tools:

What MCP servers are currently connected?

Try the web fetch capability:

Fetch the GitHub API to get info about the hackathon-starter repo:
https://api.github.com/repos/sahat/hackathon-starter

Success criteria:

• [ ] Understand what tools are available
• [ ] Successfully fetched external data

---

Task 2: Use External Data in Code

Time: 10 minutes

Now use fetched data to inform a coding task.

Prompt:

1. Fetch the latest release info from: https://api.github.com/repos/sahat/hackathon-starter/releases/latest
2. Based on the release notes, identify what changed
3. Check if our local codebase might be affected by these changes

Alternative if no releases:

1. Fetch the package.json from: https://raw.githubusercontent.com/sahat/hackathon-starter/master/package.json
2. Compare it with our local package.json
3. Identify any dependency version differences

Success criteria:

• [ ] External data fetched
• [ ] Data used to inform analysis
• [ ] Actionable insights generated

---

Task 3: Understand MCP Configuration

Time: 10 minutes

Learn how MCP servers are configured.

View the MCP configuration:

# Check global MCP config
cat ~/.claude/settings.json | grep -A 20 "mcpServers"

# Or ask Claude

Prompt:

Show me how to configure an MCP server in Claude Code settings.
What would the configuration look like for a hypothetical Jira server?

Example MCP configuration structure:

{
  "mcpServers": {
    "jira": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-server-jira"],
      "env": {
        "JIRA_URL": "https://your-company.atlassian.net",
        "JIRA_TOKEN": "your-api-token"
      }
    }
  }
}

Success criteria:

• [ ] Understand MCP configuration structure
• [ ] Know where settings are stored
• [ ] Can explain how to add a new MCP server

---

MCP Use Cases

MCP Server	Use Case
Jira	"Fetch ticket PROJ-123 and implement it"
Figma	"Get the design for the login page"
Database	"Query the users table for schema"
Slack	"Post a deployment notification"
GitHub	"List open PRs for this repo"

---

How MCP Works

Your Prompt → Claude → MCP Server → External Tool → Response → Claude → Your Answer

1. You ask Claude something that needs external data
2. Claude recognizes an MCP tool can help
3. Claude calls the MCP server
4. MCP server fetches data from external source
5. Data returns to Claude
6. Claude incorporates it into the response

---

Tips for Success

1. Start with read-only - Fetch data before allowing writes
2. Secure credentials - Use environment variables, not hardcoded tokens
3. Test incrementally - Verify each MCP server works before combining

---

Troubleshooting

MCP server not found:

• Check the server is installed (npx commands download on first use)
• Verify the command path is correct

Authentication errors:

• Ensure environment variables are set
• Check API tokens haven't expired

Timeout errors:

• External service might be slow
• Try simpler queries first

---

Common MCP Servers

Official Anthropic servers:

• @anthropic/mcp-server-github - GitHub integration
• @anthropic/mcp-server-slack - Slack integration
• @anthropic/mcp-server-postgres - PostgreSQL queries

Community servers:

• Search npmjs.com for "mcp-server-*"

---

Stretch Goals

If you finish early:

1. Research available MCP servers on npm
2. Plan which MCP integrations would help your real projects
3. Write a proposal for MCP servers your team should adopt

---

Deliverables

At the end of this lab, you should have:

1. Understanding of MCP architecture
2. Experience using external data in prompts
3. Knowledge of MCP configuration
4. Ideas for MCP servers useful to your team

---

Next Steps

After completing this lab, move on to Lab 3.5: AI Peer Review.