Vibe Coding for EveryonePart 6

What Is MCP? Connecting Umtri and Claude Code

A step-by-step guide to understanding MCP (Model Context Protocol) and connecting Umtri's MCP to Claude Code.

In the last post, we looked at the structural problems of vibe coding and the role Umtri plays in solving them. This time, we’ll actually connect Umtri to Claude Code.

The technology behind this connection is MCP (Model Context Protocol). If you’ve never heard of it before, don’t worry — setting it up takes just one command in the terminal.


What Is MCP

MCP is a standard way for AI to use external tools. Anthropic released it in late 2024, and it’s now supported not just by Claude Code but by a wide range of AI tools.

Here’s an easy way to think about it. Normally, when you talk to an AI, it only knows what’s inside the conversation itself. Once you connect MCP, the AI can directly pull information from external services (databases, collaboration tools, project management apps, and more) or even perform actions on them.

Without MCP With MCP
What the AI can know The conversation, open files External service data too
How it works Writes code only Can look up and modify external services
Example “Fix this function” “Pull up the tree from Umtri, then add a node for this feature”

Once you connect Umtri’s MCP, Claude Code can read your project structure straight from Umtri, and automatically add or edit nodes as it works.


Before You Start: Setting Up an Umtri Account and Getting a Token

To connect MCP, you first need an Umtri account.

1. Sign up and log in to Umtri

Create an account and log in at app.umtri.io.

2. Create a project (Ground)

After logging in, click the “New Ground” button to create a new project. Name it after the project you’re building (for example, bookmark-app).

3. Issue an MCP token

On the settings page, generate an API token to use for the MCP connection. This token is the key that lets Claude Code access Umtri.

The token is shown only once when issued, so copy it somewhere safe.


Connecting Umtri’s MCP to Claude Code

Run the following command in your terminal, replacing YOUR_TOKEN with the token you just issued.

claude mcp add umtri \
  --transport http \
  --url https://app.umtri.io/mcp \
  --header "Authorization: Bearer YOUR_TOKEN"

Running this command registers the Umtri MCP server with Claude Code. From then on, this connection activates automatically every time you run Claude Code.

Verifying the connection

Start Claude Code and ask it something like the following to check that the connection works.

Show me my list of Umtri projects

If the connection is working, you’ll see the list of projects you’ve created in Umtri.


What You Can Do with Umtri’s MCP

Here are the main features Claude Code can use once MCP is connected.

Command Description
list_projects Look up the list of projects in Umtri
get_graph Retrieve the full tree structure of a specific project
create_node Add a new node (trunk/limb/twig/leaf/vein) to the tree
update_node Edit the name or position of an existing node
delete_node Delete a node
record_commit Log commit information to the Umtri timeline
create_bug Register a bug issue in Umtri
list_bugs Look up the list of registered bugs

Real-World Examples

With MCP connected, you can have conversations with Claude Code like these.

Understanding the current structure

Pull the tree structure for the bookmark-app ground and summarize
what components currently exist

Claude Code reads the tree from Umtri and explains the current structure.

Adding a feature while recording the structure at the same time

Add a search feature to the BookmarkList component.
After that, register the SearchBar component as a leaf node
in the Umtri tree as well.

Writing the code and recording the structure both happen in a single request.

Using the structure to give the AI context

Read the current tree structure from Umtri and suggest where
would be the best place to add a tag filter feature.

The AI grasps the current project structure and offers an opinion from an architectural perspective.


A Word of Caution: Managing Your Token

An MCP token grants access to your Umtri account. If you put it directly in a code file, it risks being exposed publicly on places like GitHub.

The safe way to manage your token is to use an environment variable.

# Create a .env file
echo "UMTRI_TOKEN=your_token_here" > .env

# Add it to .gitignore so it doesn't get pushed to git
echo ".env" >> .gitignore

Then, in the MCP registration command, reference the environment variable instead of pasting the token value directly.


What Changes Once MCP Is Connected

Here’s a summary of the difference before and after connecting MCP.

Before MCP After MCP
Recording structure Manually entered into Umtri by hand Recorded automatically when you ask Claude Code
Understanding the project Have to open code files directly One query to the Umtri tree shows everything
Giving the AI context Explain the structure in every conversation Load the Umtri tree for instant context

Starting with the next post, we’ll cover what it actually looks like to build features with MCP connected — you’ll see how the structure builds up in the tree every time code is added.