Mastering Claude Code

Introduction

One Saturday morning, I decided to bake a cake. The recipe called for eggs, flour, and frosting. I had to buy eggs from a poultry farm, flour from a mill, and frosting from a specialty cake supply shop. I had to visit three different places, learn each one's ordering method, and navigate each one's payment system. It was cumbersome. But what if there were a single supermarket in the neighborhood?

I could buy eggs, flour, and frosting all in one place. One ordering method, one payment system. That supermarket is what an MCP connected server is.

What Is MCP: The Supermarket Analogy

MCP stands for Model Context Protocol. It is a standardized way for agents to connect to external services.

Take Gmail as an example. Gmail has the ability to send emails, read them, search them, and create drafts. One service contains multiple tools. When you connect the Gmail MCP server to Claude Code, the agent can use all these tools at once.

You don't need to write a separate script to send email. You don't need to dig through API documentation to search. When the agent is connected to an MCP server, it automatically discovers what tools are available and selects the right tool for each situation.

Let me expand on the supermarket analogy.

[Figure 9-1] A diagram comparing two approaches: on the left, "Without MCP," showing an agent connecting to three separate APIs individually; on the right, "Using MCP," showing an agent accessing multiple tools through a single MCP server.

The heart of MCP is standardization. When any service is built as an MCP server following the MCP specification, Claude Code connects to it in the same way and calls tools in the same way. Whether it's Gmail, Firecrawl, or Google Calendar, the connection method is structurally the same.

Installing a Firecrawl MCP Server: A Hands-On Exercise

Theory alone won't make it click. Let's install an MCP server ourselves. Firecrawl is a service that collects data from websites. It offers multiple features including web scraping, crawling, search, and screenshot capture. When you connect Firecrawl's MCP server to Claude Code, the agent can freely retrieve web data.

Step 1: Obtain a Firecrawl API Key

Visit the Firecrawl website (firecrawl.dev) and create an account. The free plan gives you 500 credits, which is plenty for practice. Once you enter the dashboard, your API key is displayed. Copy this key and save it.

Step 2: Save the API Key in an .env File

If there is no .env file in your project root, create one. If it already exists, open that file. Save your API key there in the following format.

Why save it in an .env file? I'll cover the reasons in detail in the next section, but the short answer is this: an API key is like a password. If you type it directly in the conversation, the key remains in plain text within the context window. When you save it in an .env file, the agent reads from the file when needed, but the key itself never appears in the conversation record.

Step 3: Run the MCP Server Installation Command

Request the installation from Claude Code. Firecrawl's official documentation provides installation commands for Claude Code CLI. Tell the agent what needs to be done.

The agent runs the command to register the MCP server in your project. Once installation is complete, the configuration is finalized to reference the API key stored in your .env file.

Step 4: Verify the Installation

Once installation is complete, try typing the /context command. Firecrawl-related tools should appear in the MCP Tools section. If web scraping, crawling, search, and other tools appear in the list, the connection is working properly.

[Figure 9-2] A screenshot showing the results of the /context command, with Firecrawl tools listed in the MCP Tools section.

From this point on, when the agent receives a natural language request like "scrape job postings from this URL," it automatically selects and runs the appropriate tool from the Firecrawl MCP server. You don't need to know which endpoint to call or what parameters to pass.

API Key Security: Why Store Secrets in an .env File

I mentioned the .env file during the Firecrawl installation process. Let me explore more deeply why you shouldn't type API keys directly in the conversation window.

An API key is a credential for accessing external services. It is essentially a password. If this key is exposed, someone could use my account and charges could be incurred.

What happens when you paste an API key directly into the Claude Code conversation window? It becomes part of the conversation record. It exists in plain text within the context window. When the agent runs a Bash command with the key as an argument, the key may also appear in execution logs. This is not desirable from a security standpoint.

Using an .env file mitigates this problem. The key exists only on your computer. The agent reads environment variables through methods like os.environ in scripts, and the key value itself never appears in the conversation record.

Add one more safeguard: create a .gitignore file in your project and add .env to the list. This way, even if you upload the project to a public repository like GitHub, the .env file is not uploaded. You prevent the risk of secrets being exposed on the internet.

These two measures form the basic defense line of your security.

[Figure 9-3] A diagram showing the safe management flow of API keys, comparing the path ".env file → load as environment variable → reference in script" with the unsafe path "type directly in conversation → exposed in context record."

If you accidentally type an API key in the conversation during practice, it is safe to rotate it immediately. Simply revoke the old key in the service dashboard, issue a new one, and save it in your .env file.

Expanding the Agent's Reach with MCP

Just by connecting Firecrawl alone, the agent's range of capabilities expands significantly. It can scrape hundreds of job postings from job sites and organize them into Excel files. It can collect dentist contact information from Yellow Pages to build a sales lead list. It can regularly monitor competitor websites.

If one MCP server is like one supermarket, connecting multiple MCP servers is like holding memberships to multiple supermarkets at once. Adding the Gmail MCP server enables reading, sending, and searching emails. Adding the Google Calendar MCP server enables viewing and creating calendar events.

By combining these, the agent can handle complex requests like "find meeting requests in today's emails and add them to my calendar."

[Figure 9-4] A diagram with the agent at the center and multiple MCP servers (Firecrawl, Gmail, Calendar, Notion, etc.) connected in a radial pattern. Two to three representative tools for each server are shown as small icons.

Each time you add an MCP server, the pattern is the same: save the service's API key in your .env file and run the installation command. You simply repeat the process once you've learned it.

There is one caveat to note: as you connect more MCP servers, the MCP tool definitions take up more space in the context window. Using the /context command from the previous chapter, you can see the token consumption for the MCP Tools section increases. The agent has more hands, but less space to remember.

Connecting MCP servers indiscriminately can leave insufficient space for important conversation content.

The choice of MCP connected servers should align with your project's purpose. A competitor analysis project does not require Gmail MCP connected servers. An email automation project does not necessarily need Firecrawl. The efficient approach is to equip only the tools you truly need.

We have equipped the agent with memory (the range it can read at once), instructions (claude.md), and tools (MCP connected servers). When these three work in harmony, the agent becomes ready to perform substantive work. Now we move forward to building actual projects by combining these tools.

Attorney Kim Kyung-jin, AI Expert

Specialist in AI Legal Policy, former member of the National Assembly, author of numerous works

If this book has been with you even for a moment, please support the next story so it can reach the world.

(Voluntary support account: Nonghyup 302-1096-0948-81 Account holder: Kim Kyung-jin)