Connect Claude to Giraffe and Claude can work inside your live project, alongside your files, email, and other connectors. Set up the Giraffe MCP once in each Claude product you use. claude.ai and Claude Code each need their own setup.
Claude’s own instructions
Claude Code with MCP servers: https://code.claude.com/docs/en/mcp
Custom connectors in claude.ai: https://support.claude.com/en/articles/11175166-getting-started-with-custom-connectors-using-remote-mcp
Connect claude.ai to Giraffe
In a saved Giraffe project, open the MCP app in its own panel and click Connect.
Go to claude.ai and click your name or initials in the bottom left.
Click Settings, then Connectors.
Click Add custom connector.
Enter a name, like Giraffe.
Paste this in the URL field:
https://mcp-relay.giraffe.build/mcpClick Add.
Click Connect next to the Giraffe connector, and approve the sign-in in the window that opens.
Start a new chat. Click the + or tools button under the message box and check that Giraffe is turned on.
Ask Claude “Is Giraffe connected?”
On a Claude Team or Enterprise plan: an organization owner may need to add the connector first, under Organization settings, then Connectors. After that, each person clicks Connect to sign in.
Connect Claude Code to Giraffe
1. Click Connect in Giraffe
In a saved Giraffe project, open the MCP app in its own panel and click Connect.
2. Open a terminal
Mac: press
Cmd+Space, type Terminal, and pressEnter.Windows: press the
Windowskey, type PowerShell, and pressEnter.
3. Check that Claude Code is installed
Type this and press Enter:
claude --version
If you see a version number, it’s installed. If you get “command not found”, install it using the Claude Code setup guide.
4. Add the Giraffe MCP
Paste this and press Enter:
claude mcp add --transport http --scope user giraffe-app https://mcp-relay.giraffe.build/mcp
--scope user makes the connection available in every folder you open Claude Code in, not just the current one.
5. Sign in
In the terminal, type
claudeand pressEnterto start Claude Code.
Type
/mcp, pick giraffe-app, and follow the sign-in prompt in your browser.
6. Check it worked. Ask Claude “Is Giraffe connected?”
Add the Giraffe SDK skill
The Giraffe SDK skill helps Claude make correct changes through the Giraffe MCP. It tells Claude where the SDK docs are and how Giraffe stores a project. With the skill, Claude:
Checks each SDK command and its arguments against the official docs.
Edits the geometries you draw, and treats the areas and heights Giraffe calculates from them as read-only.
Passes map positions as longitude and latitude.
Changes a usage when you want many geometries to change at once.
Looks up flow nodes in the docs before it builds or changes a flow.
Suggests searching the Content Library for a usage, flow, or block that isn't in your project.
To install it in Claude Code:
Download the Giraffe SDK skill file.
Create a folder named giraffe-sdk-developer inside your Claude Code skills folder:
Mac:
~/.claude/skills/giraffe-sdk-developerWindows:
%USERPROFILE%\.claude\skills\giraffe-sdk-developer
Move the downloaded file into that folder and name it SKILL.md.
Start a new Claude Code session so it loads the skill.
In claude.ai, upload the skill file under Settings, then Capabilities, then Skills.
The same skill helps Claude develop a Giraffe app with AI.
Troubleshoot Claude's Giraffe connection
Claude says your browser isn't linked
The link from Connect in the MCP app lasts 30 minutes. Click Connect again, then add or re-authenticate the Giraffe connector in Claude right away. claude.ai and Claude Code each need their own sign-in, so you may need to click Connect once for each.
Claude doesn't use the Giraffe tools in claude.ai
claude.ai only uses a connector that's turned on in the chat. Click the + or tools button under the message box and turn on Giraffe.