Claude Code MCP Tutorial: Connect Tools and Ship a Production App in 2026

Claude Code is Anthropic's terminal coding agent. It can run on your machine, edit your code, run shell commands, and call external tools. The "external tools" part is what the Model Context Protocol (MCP) unlocks. This Claude Code MCP tutorial covers what MCP actually is, the three ways to add MCP servers to Claude Code, the servers worth installing in 2026, and an end-to-end walkthrough that ships a production Next.js app by combining Claude Code with Totalum's MCP.

Quick Answer

• MCP (Model Context Protocol) is an open standard that lets Claude Code call external tools and read external data without custom code.
• Claude Code supports three transports for MCP servers: local stdio, remote HTTP/SSE, and remote HTTP with OAuth.
• The setup command is claude mcp add -- for stdio or claude mcp add --transport http for remote.
• The most useful MCP servers in 2026 cover code intelligence (filesystem, GitHub), design (Figma), data (Postgres, financial-datasets), browsers (Playwright), cloud (AWS), and full app builders (Totalum).
• Combine Claude Code with the Totalum MCP and a single prompt can scaffold, deploy, and host a real Next.js app on your domain.

What is MCP, in one sentence

The Model Context Protocol is an open JSON-RPC standard introduced by Anthropic in late 2024 that lets any AI agent connect to any compliant tool, with a uniform schema for tool discovery, invocation, and authentication. The full spec lives at modelcontextprotocol.io. Anthropic's own Claude Code documentation describes MCP as the way to "connect to hundreds of external tools and data sources" from inside the agent.

The practical effect: instead of the model knowing only what is in its training data, it can read your Linear tickets, query your Postgres database, scrape a Figma file, push code to GitHub, or spin up a fresh Next.js app. The model picks the right tool, asks for the right parameters, and you stay in the terminal.

Why Claude Code MCP matters in 2026

Three things changed in the last twelve months. First, MCP went from a Claude-Desktop-only experiment to a cross-vendor standard. AWS shipped its official MCP server as generally available in May 2026 and explicitly listed Claude Code, Kiro, and Cursor as supported clients. Vendors who do not ship an MCP server will quietly disappear from agent workflows.

Second, Claude Code itself matured. Subagents, slash commands, persistent project context, and a wider MCP server catalog turned Claude Code into something closer to a controllable software team than a single chat window. We covered the broader trade-offs in Claude Code vs Codex in 2026 and Cursor vs Claude Code in 2026; the short version is that Claude Code wins on agentic depth and parallelism, and MCP is the lever that pushes that depth into your specific stack.

Third, the cost curve flipped. Claude Code's pricing tiers (Pro, Max, API) made many MCP integrations economically viable that were not viable a year ago. You can keep several MCP servers connected, run multi-step plans, and not get a four-figure bill at the end of the week.

The three ways to connect MCP servers to Claude Code

Every MCP server you install ends up in one of three transports. Pick the wrong one and the server will fail to load or, worse, leak credentials.

Local stdio (your machine, your process)

Stdio servers run as a subprocess on your machine. Claude Code launches them with a command you provide, then talks to them over stdin and stdout. This is the right choice for tools that need filesystem access (a "filesystem" server), local databases, or anything that should never leave your laptop.

Add one with:

claude mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem /Users/me/projects

The flags after -- are the literal command Claude Code will run.

Remote HTTP or SSE (vendor-hosted, no auth flow)

Remote HTTP servers live on a vendor's infrastructure and accept calls over HTTPS. Use this for shared services where the vendor handles scale: financial data, weather, search, public APIs. Authentication, if needed, is usually a static API key in a header.

claude mcp add --transport http financial-datasets https://mcp.financialdatasets.ai

You can pass headers with --header 'Authorization: Bearer YOUR_KEY' for keyed APIs.

Remote HTTP with OAuth (vendor-hosted, per-user auth)

Some vendors require per-user OAuth, where the user signs in to the vendor and grants Claude Code a scoped token. Run /mcp inside Claude Code and the agent walks you through the browser-based OAuth flow. Most production vendors (GitHub, Linear, Figma, Totalum) ship this transport.

A real, working example using a public financial-data server:

claude mcp add --transport http financial-datasets https://mcp.financialdatasets.ai
# Then inside Claude Code:
/mcp
# Complete OAuth in your browser
claude mcp list   # verify

If you are migrating from Claude Desktop, note that Claude Code's claude mcp add is the only supported config path. There is no ~/.config/claude/claude_desktop_config.json for Claude Code; everything goes through the CLI command, which writes to your user, project, or local scope. Scott Spence wrote a good practical breakdown of these three scopes (--scope user, --scope project, --scope local).

Step by step: add your first MCP server

Assume you have Claude Code installed (npm install -g @anthropic-ai/claude-code or equivalent) and authenticated.

1. Pick a server. For a first install, the GitHub MCP server is a low-risk pick because every dev already has a GitHub identity in scope.
2. Add it to Claude Code with the right transport. GitHub ships an OAuth-enabled remote server:

claude mcp add --transport http github https://api.githubcopilot.com/mcp

1. Verify the server is registered:

claude mcp list
# github  http  https://api.githubcopilot.com/mcp

1. Open Claude Code and run /mcp. The agent will detect the unauthenticated server and prompt you to OAuth.

1. Test with a real prompt: "Open a draft pull request titled 'docs: typo fix' on the README of my totalum-experiments repo with a one-line change to README.md." If the integration is healthy, Claude Code asks you to confirm the tool call, executes it, and returns the PR URL.

If claude mcp list shows the server but tool calls fail with Tool not allowed in this scope, you most likely added the server with --scope local and are now in a different project. Re-add with --scope user for global access.

Most useful MCP servers in 2026

The MCP catalog grew fast. The set below is the curated short list we actually keep connected day to day at Totalum, sorted by use case.

Use case	Server	Transport	Why we keep it
Filesystem	@modelcontextprotocol/server-filesystem	stdio	Lets Claude Code edit any directory you allow, with no shell ambiguity.
GitHub	GitHub MCP server	http + OAuth	PRs, issues, file fetches, repo search. The right tool for every "find where we last touched X" prompt.
Postgres	@modelcontextprotocol/server-postgres	stdio	Read-only SQL against your DB. Use for backfilling tests and inspecting schemas.
Playwright	Microsoft @playwright/mcp	stdio	Real browser automation for scraping, testing, screenshots. Far more reliable than curl for JS-heavy pages.
Figma	Figma MCP	http + OAuth	Pull design tokens, components, frames into the prompt. Pairs well with code generators.
Financial data	financialdatasets.ai MCP	http	17,000+ stocks, fundamentals, prices. Useful for analytics agents.
AWS	AWS MCP Server (GA May 2026)	http + OAuth	Cloud-resource discovery and CDK help, gated by your IAM.
Full app builder	Totalum MCP	http + OAuth	Generates and deploys real Next.js apps end-to-end. The walkthrough below uses this one.

We trimmed servers that duplicate Claude Code's built-in capabilities (a "shell" or "fetch" MCP rarely beats Bash and WebFetch already in scope), and we de-prioritize anything stdio-only that needs Docker on the path; the friction is not worth it for most teams.

Tutorial: ship a production Next.js app with Claude Code and Totalum MCP

This is the part most "claude code mcp" tutorials skip. Adding servers is easy. The interesting workflow is using MCP to push real production output, not to chat with your filesystem.

The Totalum MCP exposes the same builder that powers totalum.app: scaffolding a real Next.js plus TotalumSDK project, generating database tables, writing pages and API routes, deploying to Cloudflare on a real domain. From Claude Code's point of view, every step is a tool call.

Step 1: connect Totalum MCP to Claude Code

# Replace TOTALUM_MCP_URL with the URL shown on totalum.app/api-and-mcp after you sign in.
claude mcp add --transport http totalum TOTALUM_MCP_URL
# Then inside Claude Code:
/mcp
# Complete OAuth in your browser; sign in with your Totalum account
claude mcp list

If you do not have a Totalum account, register a free workspace at totalum.app before running the OAuth step. The free tier is enough for the tutorial.

Step 2: ask Claude Code to scaffold an app

Open Claude Code in any empty directory and prompt:

> "Use the Totalum MCP to create a new project called client-portal-demo. Pick the Next.js plus TotalumSDK template, English locale, and a white-light theme. Wait for the build to finish and report the preview URL."

Claude Code will:

1. Discover the createProject tool exposed by the Totalum MCP.
2. Ask you to confirm the call (you can approve once with --auto-allow for the session if you trust it).
3. Wait for the project to provision (usually 30 to 90 seconds).
4. Print a preview URL like https://temporal-link-preview-xxx.totalum-project.com.

The output is a real Next.js codebase, not a prototype. You can hit the preview URL right now.

Step 3: ask Claude Code to add a database table and a page

The most useful pattern is to keep the database design in plain English in your prompt. Claude Code will translate it into the right MCP tool calls.

> "On the client-portal-demo project, create a client table with fields: name (string, required), company (string), email (email, required), photo (file/image), status (options: active, paused, archived), created_at (date). Then build a /clients page that lists clients in a table with their photo, name, company, and status badge. Add a button to create a new client. Use the project's existing shadcn/ui components."

Claude Code will:

1. Call the Totalum MCP createDatabaseTable and createTableProperty tools.
2. Use the Totalum MCP runAgent tool to dispatch the page-build job.
3. Stream the build status back into the chat.
4. Confirm the new page is live at the preview URL.

Step 4: deploy and add a custom domain

Once the preview looks right:

> "Deploy client-portal-demo to production and connect the domain clients.example.com."

Claude Code calls deploy and addCustomDomain, returns the DNS records you need to set, and the live production URL once the certificate provisions.

We covered the same end-to-end pattern in plain English (no Claude Code) in the client portal walkthrough for readers without Claude Code installed.

The point is not the specific app. The point is that one prompt produces a deployable, ownable codebase: real Next.js, real database, real auth, real domain. This is the Claude Code MCP workflow that compounds. Compare that to the prototype-first feel of Lovable vs Totalum or the developer-team-only positioning of Retool vs Totalum, and you can see why MCP-first builders are the next layer.

Security: do not get pwned via MCP

MCP is powerful exactly because it grants tool access. That cuts both ways. In May 2026, SecurityWeek reported that Claude Code OAuth tokens can be exfiltrated via a malicious MCP server that proxies legitimate tools and silently logs auth headers. The takeaway is not "stop using MCP", it is to treat each server like a third-party dependency.

Three rules we follow:

1. Never install a stdio MCP server from a source you would not run npm install from. The server runs as you, with your filesystem.
2. For remote OAuth servers, scope tokens minimally; if a vendor only offers a "full account" scope, run them in a fresh test account.
3. Audit claude mcp list quarterly. Remove servers you no longer use; expired tokens are still tokens.

FAQ

Is Claude Code MCP free?

The MCP protocol itself is free and open source. Claude Code is paid (Pro, Max, or API token usage); MCP servers are usually free, with a few vendors charging for hosted compute or premium data. Totalum's MCP is included with any Totalum plan and the free tier is enough for evaluation builds.

Can I use multiple MCP servers at once?

Yes. Claude Code multiplexes tool calls across all registered servers. Run claude mcp list to see the active set; the agent picks the right server per call based on the tool's namespace.

Can MCP servers run remotely?

Yes. Remote servers are HTTP or SSE endpoints (--transport http or --transport sse). OAuth is supported for per-user auth. The local stdio path is still the right choice for filesystem and other privacy-sensitive tools.

What is the difference between Claude Code MCP and Claude Desktop MCP?

Claude Desktop registers MCP servers via a JSON config file (claude_desktop_config.json). Claude Code uses the claude mcp add CLI to register servers in user, project, or local scope. The protocol is the same; the registration UX is different. Most servers work in both clients with no code changes.

Does the Totalum MCP work with Cursor, Codex CLI, or other agents?

Yes. The Totalum MCP follows the standard, so any MCP-compatible client (Cursor, Codex CLI, Cline, custom OpenAI agents, custom Anthropic agents) can call it the same way Claude Code does. Tool names and schemas are identical across clients.

How do I debug a failing MCP server?

Run claude mcp list to confirm registration. For OAuth issues, re-run /mcp inside Claude Code to refresh the token. For stdio issues, try the launch command in your shell directly; if it fails outside Claude Code, fix it there first. The official Claude Code MCP docs at code.claude.com cover the latest debug commands per release.

If you want to specifically drive Claude Code with Anthropic's strongest agentic model, our Claude Opus 4.7 and Totalum guide shows how to wire the new model against the MCP server above to ship a production app in one run.

Ready to ship a production app with Claude Code?

Most "claude code mcp" tutorials end at "now you have GitHub installed". The reason we built Totalum's MCP is to close the gap between connecting tools and actually shipping software you own. Connect Totalum to Claude Code, prompt once, and you have a real Next.js app on a real domain. No prototypes, no platform lock-in, no manual hosting.

Start free at totalum.app, or read more about the API and MCP surface on the Totalum API and MCP page. If you want to see how Totalum MCP fits in a wider stack, the best MCP servers in 2026 guide ranks 12 picks across documentation, developer tooling, operations, and app building. If you are an agency or SaaS team that wants to embed an AI app builder inside your own product, that is the fastest path; same MCP, same code-owning output.