> ## Documentation Index
> Fetch the complete documentation index at: https://docsv4.mile.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Build with Claude Code

> Open the add-ons SDK in Claude Code and it guides you, with the MileApp knowledge base, from setup to an uploaded add-on.

[Claude Code](https://claude.com/claude-code) is an AI assistant that works in your terminal. The add-ons SDK comes ready for it. Open the SDK folder in Claude Code and two things load by themselves:

| What | What it gives Claude Code |
| - | - |
| **MileApp knowledge base** (an MCP server) | The full, current reference: the SDK, MileApp's API and the platform rules |
| **MileApp add-on builder** (a skill) | The step-by-step workflow: set up, build, check and upload |

With both, you can describe the add-on you want in plain words and build it together.

## Before you start

* A computer with [Node.js](https://nodejs.org) 20.19 or newer and [Git](https://git-scm.com).
* Access to the SDK repository. Ask MileApp if you don't have it.
* A personal access token from your MileApp account: **Profile › Personal Token**.
* Claude Code installed. Follow [Anthropic's setup guide](https://docs.claude.com/en/docs/claude-code/setup).

## Step 1: Open the SDK in Claude Code

```bash theme={null}
git clone https://repo.mile.app/mile-v4/mile-v4-ui-plugin-sdk.git
cd mile-v4-ui-plugin-sdk
claude
```

When Claude Code asks whether you trust this folder, choose **Yes**. That's the whole setup: the SDK's own settings connect the knowledge base and load the add-on builder skill.

To check, type `/mcp` in Claude Code. The list shows `knowledge-base` as connected.

> [!NOTE]
>
> The knowledge base and the skill load only when Claude Code runs inside the SDK folder. Always start `claude` from there.

## Step 2: Start building

1. Describe what you want, for example:

   > Build a MileApp add-on called "Delivery Summary" with one page that lists today's finished tasks of a flow I pick, and a button to export them to Excel.

2. Claude Code starts a branch for your add-on, asks for your token, starts the local preview, and builds the page with you. Check the preview at `http://localhost:3001` after each step and say what to change.

3. When you are happy, ask it to **build the add-on**. It produces the file and checks it.

4. [Upload and publish](https://docsv4.mile.app/pages/add-ons/sdk/publishing.md) the file.

The skill loads by itself whenever you talk about a MileApp add-on. You can also call it by name: `/mileapp-addon-builder`. While it works, it reads the knowledge base for the SDK details and for the MileApp data your add-on uses.

To look something up yourself, just ask, for example *"In the knowledge base, how do I save settings in a V4 add-on?"*

## Tips for good results

* Say who uses the add-on and what they do with it, not only what it shows.
* Build one page at a time and check the preview before adding the next.
* Ask Claude Code to explain any step you don't follow. It will run commands for you, but you stay in charge: approve what it does.
* Never paste your token anywhere except the local `.env` file, which is not uploaded or shared.

## Update

Run `git pull` on the SDK's `main` branch. The skill updates with it, and the knowledge base always serves the latest documentation.

## Use it outside the SDK folder

To have the knowledge base and the skill in every folder, set them up once for your user account.

Connect the knowledge base:

```bash theme={null}
claude mcp add --transport http --scope user knowledge-base https://mcpkb.mileapp.dev/mcp
```

Install the skill from your SDK clone (see Step 1). It copies the skill folder into Claude Code's skills folder:

```bash macOS / Linux theme={null}
mkdir -p ~/.claude/skills
cp -R mile-v4-ui-plugin-sdk/.claude/skills/mileapp-addon-builder ~/.claude/skills/
```

```powershell Windows theme={null}
New-Item -ItemType Directory -Force "$HOME\.claude\skills" | Out-Null
Copy-Item -Recurse -Force "mile-v4-ui-plugin-sdk\.claude\skills\mileapp-addon-builder" "$HOME\.claude\skills\"
```

Run these from the folder that contains `mile-v4-ui-plugin-sdk`. Copy again after a `git pull` to get the newest skill.

Run `claude mcp list` to check that `knowledge-base` shows as connected.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.