Getting Started with MCP Servers in Claude Code

Last updated: December 31, 2024

MCP (Model Context Protocol) servers extend Claude Code's capabilities by connecting it to external tools. This guide covers setup for popular MCP servers including Figma for design imports and Playwright for browser automation.

How do I set up the Figma MCP server?

The Figma MCP server lets you import designs directly into Claude Code.

Step 1: Install the MCP server

Run this command in your terminal:

claude mcp add --transport http figma https://mcp.figma.com/mcp

Step 2: Authenticate with Figma

1. Run claude to start Claude Code
2. Type /mcp
3. Click on Figma and complete the authentication flow in your browser

Step 3: Import a design

1. In Figma, click on the frame or component you want (it helps to copy it into a new frame first)
2. Copy the URL from your browser—it will include a node-id parameter
3. Paste the URL into Claude Code with your instructions

Example:

Here's my design: https://www.figma.com/design/ABC123/My-Project?node-id=456-789

Convert this to a React component with Tailwind CSS.

How do I set up the Playwright MCP server?

The Playwright MCP server enables browser automation and testing capabilities in Claude Code.

Step 1: Install the MCP server

Run this command in your terminal:

claude mcp add playwright -- npx @anthropic-ai/mcp-server-playwright

Step 2: Use Playwright in Claude Code

Once installed, you can ask Claude Code to:

• Navigate to websites and interact with them
• Take screenshots of web pages
• Run browser-based tests
• Automate form filling and clicking

Example:

Go to https://example.com and take a screenshot of the homepage.