Skip to main content

1.4 Setup MCP Servers and Skills

MCP (Model Context Protocol) servers and skills extend Claude's capabilities beyond code generation. In this section, you'll set up tools that allow Claude to interact with external systems.

What Are MCP Servers?​

MCP servers provide Claude with live, structured access to external systems. Instead of you copy-pasting information into the chat, Claude can query these systems directly.

Common use cases for MCP servers:

  • Documentation access — Fetch up-to-date docs for libraries and frameworks
  • Database interaction — Query tables, inspect schemas, understand data
  • API integration — Connect to external services and tools
  • File system access — Work with files outside the current project

You can browse available MCP servers at mcp.so or glama.ai/mcp/servers.

What Are Skills?​

Skills are specialized capabilities that can be invoked by Claude to perform specific tasks:

SkillPurpose
agent-browserAutomate browser interactions, take screenshots, test UIs
web-design-guidelinesReview UI code against best practices
frontend-designGenerate high-quality frontend interfaces

Install MCP Servers​

Claude Code provides a built-in mcp subcommand that makes installation straightforward. You can install MCP servers either globally (available in all projects) or locally (specific to a project).

Global vs Project Installation​

ScopeFlagConfig LocationUse When
Global-s user~/.claude/settings.jsonYou want the MCP available everywhere
Project-s project.claude/settings.json in project rootMCP is specific to this project

Context7 MCP (Documentation Access)​

Context7 provides Claude with access to up-to-date documentation, eliminating the need to rely solely on training data.

Get your API key (recommended):

While Context7 works without an API key, having one provides higher rate limits and better performance:

  1. Visit context7.com/dashboard
  2. Create an account if you don't have one
  3. Navigate to the API Keys section and create a new key
  4. Copy the key for use in the commands below

Install globally:

claude mcp add context7 -s user -- npx -y @upstash/context7-mcp --api-key YOUR_API_KEY

Or install for a specific project:

cd /path/to/your/project
claude mcp add context7 -s project -- npx -y @upstash/context7-mcp --api-key YOUR_API_KEY
tip

Replace YOUR_API_KEY with your actual API key from the Context7 dashboard. For more installation options and troubleshooting, see the official Context7 documentation.

DBHub MCP (Database Access) — Optional​

DBHub gives Claude direct access to query database schemas and data. Each database connection requires its own MCP server entry — use a descriptive name to distinguish them.

General pattern for local databases:

claude mcp add <descriptive-name> -s project -- npx -y @bytebase/dbhub@latest --transport stdio --dsn "<connection-string>"

Example — connecting to the local PostgreSQL database for the petclinic application:

claude mcp add dbhub-petclinic -s project -- npx -y @bytebase/dbhub@latest --transport stdio --dsn "postgres://petclinic:petclinic@localhost:5432/petclinic?sslmode=disable"
tip

If you work with multiple databases, add a separate server for each with a distinct name (e.g., dbhub-petclinic, dbhub-inventory).

Other MCP Servers​

As you work through the program, you may want to add other MCP servers. The general pattern is:

claude mcp add <server-name> -s user -- <command> <args>
Managing MCP Servers

You can list, remove, and manage MCP servers with the claude mcp command:

claude mcp list          # See installed servers
claude mcp remove <name> # Remove a server

Install Skills​

Skills are installed using the skills.sh platform from Vercel.

agent-browser​

This skill enables Claude to automate browser interactions — navigating pages, clicking buttons, filling forms, and capturing screenshots.

npx skills add vercel-labs/agent-browser --skill agent-browser

web-design-guidelines​

Review UI code against established web design best practices:

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

frontend-design​

Generate distinctive, production-grade frontend interfaces:

npx skills add anthropics/claude-code --skill frontend-design
Selecting Claude Code as Agent Type

When running these commands, the installer may prompt you to select which agent to install the skill for. Use the spacebar to select "Claude Code" from the list, then press Enter to confirm.

Alternatively, you can specify Claude Code explicitly by adding -a claude-code to any installation command:

npx skills add vercel-labs/agent-browser --skill agent-browser -a claude-code

Verify MCP and Skills Setup​

Restart Claude Code to load the new configuration:

# Exit any running Claude session first
claude

Note: You may need to open a new terminal to pick up changes.

Test Context7​

Ask Claude to fetch documentation:

Use Context7 to get the latest documentation for Express.js routing

Claude should use the Context7 MCP to fetch current documentation rather than relying on training data.

Test Skills​

Use the /skills command to list all installed skills:

/skills

This should display your installed skills, including agent-browser, web-design-guidelines, and frontend-design.

Configuration File Locations​

Forge uses Claude Code in the terminal. For this program, use the Claude Code CLI configuration locations below:

ScopeConfig Location
Global Claude Code CLI settings~/.claude/settings.json
Project-scoped Claude Code CLI settings.claude/settings.json in project root

Other Claude product configuration is outside the Forge setup path.

Troubleshooting​

MCP server fails to start​

Check that npx is available:

npx --version

If not, ensure Node.js is properly installed (see Environment Setup).

Skills not recognized​

  1. Restart Claude Code after installing skills
  2. Check skills are installed: npx skills list
  3. Try reinstalling: npx skills add <skill-name> --force

Context7 returns errors​

  • Verify internet connectivity
  • Some documentation sources may be rate-limited; wait and retry
  • Check Context7 service status

Permission issues​

If the skills installer reports permission or symlink errors, do not install an npm package directly. Rerun the relevant npx skills add ... command for Claude Code with --copy so the skill files are copied into the agent directory instead of symlinked:

npx skills add vercel-labs/agent-browser --skill agent-browser -a claude-code --copy

What You've Configured​

At this point, your Claude Code environment includes:

  • SDD Workflow Prompts — Four slash commands for spec-driven development
  • MCP Servers — Context7 for documentation access (and optionally others)
  • Skills — Browser automation, design review, frontend generation

Next Steps​

With your environment fully configured, it's time to fork the example project and put these tools to work.

Knowledge Check​

Question 1 of 6

MCP Servers and Skills Knowledge Check

Q1. What is the primary purpose of MCP servers in Claude Code?