# Start from a template

If the plugin does not exist yet, do not wire the SDK by hand. One command writes a project with the manifest, the init call, the UI adapter, tests, lint, CI and the files a coding agent needs.

```bash
npm create @tode-sdk@latest my-plugin
```

It asks four things: the directory, the UI framework (React, Vue, Svelte, vanilla TypeScript), the bundler (Vite or esbuild) and, optionally, your tode API key. Skip the key and the plugin runs with analytics off until you add it to `.env`.

### Run it in Figma

```bash
cd my-plugin
npm run dev
```

In Figma Desktop: Plugins → Development → Import plugin from manifest → pick `manifest.json`. Turn on "Hot reload plugin" in the same menu and every save reloads the plugin.

### Add the key

Register the plugin in the [dashboard](https://app.usetode.dev) to get a key, put it in `.env` as `TODE_API_KEY=...` and rebuild. The key is injected into the main bundle at build time and the plugin starts sending events.

### Check

```bash
npm run check
```

Typecheck for both threads, lint, the main-thread tests, a production build and a manifest check in one command. The generated CI workflow runs the same thing.

## What is already wired

- `manifest.json` has `permissions: ["currentuser"]` and the two `processing.usetode.dev` entries in `networkAccess.allowedDomains`, plus `documentAccess: "dynamic-page"`.
- `src/main/main.ts` calls `tode.init({ apiKey })` after `figma.showUI()`. The key comes from `__TODE_API_KEY__`, which the bundler defines from `.env`.
- The UI mounts the adapter for the framework you picked (`useTode()`, `createTodeStore()` or `new TodeClient()`), which records sessions.
- Two example events: `rectangles_created` with the count as a metric, from the main thread, and `help_opened` from the UI.
- Typed messages between the threads in `src/shared/messages.ts`, a `figma.clientStorage` helper and a test for each main-thread module.

## For coding agents

- `AGENTS.md` explains the two threads, the commands and how to add a feature. `CLAUDE.md` includes it.
- `npm run check` is the one verification command; its exit code is the answer.
- `npm run preview` opens the UI in a browser tab with the main thread mocked, so an agent with a browser tool can click through it. Nothing reaches tode from there.
- `skills/figma-plugin-tode/SKILL.md` holds the sandbox rules that trip agents.
- The CLI never prompts without a TTY. Give every choice as a flag or pass `--yes`:

```bash
npm create @tode-sdk@latest my-plugin -- --framework react --bundler vite --yes --no-install
```

`--list` prints the matrix as JSON.

## Flags

| Flag | Values | Default |
|---|---|---|
| `--framework` | `react`, `vue`, `svelte`, `vanilla` | `react` |
| `--bundler` | `vite`, `esbuild` | `vite` |
| `--name` | any text | title-cased directory |
| `--api-key` | your key | none (`.env` not written) |
| `--pm` | `npm`, `pnpm`, `yarn`, `bun` | detected |
| `--no-install`, `--no-git`, `-y`/`--yes`, `--list` | | |

## Source

The generator is [kolebayev/create-tode-plugin](https://github.com/kolebayev/create-tode-plugin). Its React + Vite output is kept as a GitHub template at [kolebayev/figma-plugin-template-with-tode](https://github.com/kolebayev/figma-plugin-template-with-tode) for "Use this template" and `degit`. Both are MIT.

Source: https://docs.usetode.dev/template