Unlocking Claude Code’s Model Context Protocol: A Hands‑On MCP Guide

Introduction

Welcome to the fifth tutorial of the "Claude Code Advanced Usage" series, which aims to explore the Model Context Protocol (MCP) and its efficiency‑boosting capabilities.

World Before MCP

Before MCP, the industry mainly used OpenAI's function calling, a powerful and flexible technique that lets large language models interact with external tools to obtain real‑time information beyond their training data. Its workflow injects tool schemas directly into a single request prompt, which leads to long, fragile prompts and a lack of standardization.

Limitations of Function Calling

Although widely adopted, function calling suffers from several drawbacks:

Non‑unified interfaces : each tool or service has its own API, authentication, and data format, requiring custom glue code for every integration.

No standardized plugin ecosystem : developers repeatedly reinvent wheels, limiting reuse and knowledge sharing.

Context management challenges : all state must travel in the prompt, causing verbosity, higher cost, and potential truncation.

What Is MCP?

MCP is an open, unified protocol that standardizes how applications provide external context to large language models. If function calling is like a proprietary charger for each device, MCP is the AI world’s USB‑C interface.

Importance of MCP

For developers : dramatically reduces development time and complexity; no need to write custom glue code for each tool.

For AI applications : provides a plug‑and‑play way to access a wide ecosystem of data sources and tools, enhancing functionality and user experience.

For end users : enables more powerful AI assistants that can safely and reliably act on personal data such as calendars or documents.

How MCP Works

MCP follows a classic client‑server architecture and defines three main roles:

Host : the AI application (e.g., Claude Code) that coordinates and manages one or more MCP clients.

Server : an independent process or service that connects to a specific data source or tool (e.g., Figma, local file system) and provides context via the MCP protocol.

Client : created by the host to maintain a dedicated one‑to‑one connection with a server, acting as a bridge between host and server.

MCP vs. Function Calling: Visual Comparison

Key differences include:

Protocol standard : function calling is vendor‑specific; MCP is an open, unified industry standard.

Implementation : function calling embeds tool definitions in a single request prompt; MCP uses a persistent client‑server connection.

Context management : function calling relies on the prompt, leading to length limits; MCP separates tool context from dialogue context.

Extensibility : MCP’s modular design enables a thriving plugin ecosystem, unlike the fragmented function‑calling approach.

Analogy : function calling is like a dedicated, non‑universal charger; MCP is like a universal USB‑C port.

Practical Walkthrough

Step 1 – Obtain a Figma Personal Access Token

Log into Figma, click your profile avatar, and select Settings .

In the Security tab, scroll to Personal access tokens and click Generate new token .

Name the token (e.g., claude-mcp-token) and set scopes to Read only for Dev resources and File content .

Generate the token and copy it securely; it will be shown only once.

Step 2 – Install and Start the Figma MCP Server

Run the following command, replacing YOUR-KEY with the token you just copied:

claude mcp add "Framelink_Figma_MCP" -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

The command does three things: claude mcp add "Framelink_Figma_MCP": tells Claude Code to add a server named "Framelink_Figma_MCP". --: separates Claude’s own arguments from the external command that starts the server. npx -y figma-developer-mcp ...: downloads and runs the figma-developer-mcp package, passing the API key.

Step 3 – Verify Server Configuration

Run claude mcp to list all configured MCP servers. The Figma server should appear with status connected .

Step 4 – Copy a Specific Figma Design Element Link

Select the desired element on the canvas (button, card, etc.).

Right‑click → Copy/Paste as → Copy link to selection .

Step 5 – Request Implementation from Claude Code

Now you can ask Claude Code, for example, “Implement this Figma page in Flutter” and paste the copied link. For higher quality results, you may define a dedicated “figma‑implementer” agent:

---
name: figma-implementer
description: Figma design to Flutter pixel‑perfect implementation expert. When converting a Figma design to Flutter code, ensure UI matches the design exactly.
model: inherit
---
You are a professional Figma‑to‑Flutter pixel‑perfect implementer. ...

Claude Code will call the get_figma_data function on the server, receive structured design data (colors, fonts, layout sizes, etc.), and generate high‑quality Flutter UI code.

Summary

Compared with traditional function calling, MCP provides a standardized "USB‑C"‑like interface that simplifies integration of external tools, improves context handling, and enables more accurate code generation, dramatically boosting developer productivity and the quality of AI‑driven outputs.

References

https://platform.openai.com/docs/guides/function-calling

https://www.anthropic.com/news/model-context-protocol

https://docs.anthropic.com/en/docs/mcp

https://uxplanet.org/figma-mcp-complete-guide-c45af0975ab8