An AI coding assistant can build a working Giraffe app from a plain-English description. That puts custom feasibility tools, parcel lookups, and yield checks within reach of anyone on your team, even without deep programming experience. The Giraffe SDK skill gives the AI the facts it needs to write SDK code that works in your projects.
What the Giraffe SDK skill does
The Giraffe SDK skill is a set of instructions for Claude Code, Anthropic's AI coding tool. It tells Claude where to find the SDK documentation and how a Giraffe app talks to a project. With the skill installed, Claude:
Reads the official SDK docs before it writes code, and checks each function and its arguments against them.
Knows the difference between the geometries you draw and the evaluated geometries Giraffe calculates from them, so it edits the right one.
Passes map positions as longitude and latitude, which is the format Giraffe expects.
Looks up flow nodes in the docs before it builds or changes a flow.
Suggests searching the Content Library when you ask for a usage, flow, or block that isn't in your project.
Relies on Giraffe's own documentation and skips web searches for Giraffe information.
The skill is built for Claude Code. To use a different AI assistant, see Use another AI assistant further down this article.
Install the Giraffe SDK skill in Claude Code
The Giraffe SDK skill is a single file named SKILL.md. Save it in your Claude Code skills folder and Claude Code uses it in every project.
Install Claude Code. Follow the steps in the Claude Code docs.
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. Keep the file name SKILL.md.
Start a new Claude Code session so it loads the skill.
To share the skill with everyone who works on one app, save it in the app's own folder at .claude/skills/giraffe-sdk-developer/SKILL.md instead. Claude Code loads it for anyone who opens that folder.
Use the Giraffe SDK skill
Claude Code uses the Giraffe SDK skill on its own when you ask it to build or fix a Giraffe app. It also picks up the skill when your code imports @gi-nx/iframe-sdk. To call the skill by name, start your message with /giraffe-sdk-developer.
Set up a folder for your app
Start from one of Giraffe's example apps. Claude builds faster and makes fewer mistakes when it has working code to extend.
Clone the SDK examples repository, or copy the example closest to your idea into a new folder.
Open that folder in Claude Code.
Add an iFrame app to your Giraffe project and point it at your local development server. You then see each change inside Giraffe as Claude makes it.
Learn how to connect a local app to your project in Get Set Up with the SDK.
Write a good first prompt
A good prompt says who uses the app, what it reads from the project, and what it changes. Cover these points:
Who and why. Name the person and the decision the app supports, like "a development manager checking yield on a site."
What it reads. Name the project data it needs, like the project boundary, the drawn geometries, their usages, levels, and areas.
What it changes. Say what the app does in Giraffe, like drawing a geometry, turning on a view, zooming the map, or opening a popup.
Outside data. Give the API address and paste a sample response if the app pulls data from another system.
How it looks. Describe the layout, like a table, a list of cards, or a single button.
Tools. Say "React and TypeScript" to match the SDK examples.
Here's a first prompt that covers each point:
Build a React and TypeScript app for Giraffe. A development manager uses it to check yield on a site. Show a table of every building in the project with its usage, number of levels, and gross floor area, with a total at the bottom. When I click a row, zoom the map to that building. Update the table whenever the project changes.
Build the app in small steps
Ask Claude for one feature at a time. A small request is easier to test, and a mistake is easier to spot.
Ask for the smallest version of the app that does something useful.
Test it inside your Giraffe project.
Tell Claude what worked and what didn't. If something broke, paste the error from the browser console.
Ask for the next feature.
Keep one conversation per app. Claude remembers the decisions you already made and builds on them.
Example prompts
Use these prompts to add common features to a Giraffe app. Swap in your own values.
"When I click the map, look up the parcel at that point from [your parcel API] and draw its outline as a temporary layer."
"Add a button that draws a 30 m by 20 m rectangle with the Residential usage at the center of the project boundary."
"Check every building against a 24 m height limit and list any that go over."
"Show a list of cards. Opening a card turns on the saved view with the same name."
"Show a popup with the lot number and area when someone selects a parcel."
"Let the project admin set the height limit in the app's JSON settings instead of hard-coding it."
Check the AI's work
Test each change inside Giraffe before you ask for the next one. Watch for these common slips:
A function you can't find. Look it up in the SDK docs. If it isn't there, ask Claude to check the docs and use a real function.
Changing a calculated value. Giraffe calculates area and height from the geometry you draw. If Claude tries to set area or height directly, ask it to change the drawn geometry or its levels.
Keys in the code. Keep API keys and tokens out of your app's code. Store them as credentials.
Learn how to store API tokens for SDK apps in What are Credentials.
Use another AI assistant
Other AI assistants can build Giraffe apps too. Attach the Giraffe SDK skill file (SKILL.md) to your first message, or paste its text into the conversation. Then ask the assistant to follow it:
Follow the attached Giraffe SDK instructions. Read the SDK docs they link to before you write any code, and check every SDK function and its arguments against those docs.
The file links to the SDK docs, so the assistant needs web access to read them. If it can't open links, paste the text of these pages instead:
Giraffe state, the project data an app can read
SDK functions, the commands an app can run
Ready to share your app with your team? See Create an App.