Terminology

Agentic Development Toolkit (ADT) projects are ordinary web projects, so these docs use ordinary web vocabulary. If you've spent your career in FileMaker, some of it will be unfamiliar. Each entry below says what the thing is, what ADT uses it for, and where to read more.

You don't need to learn any of this before you start — your agent handles most of it. Come back when a word comes up and you want to know what it means.

Note  Ask your agent Your coding agent already knows these tools. When an entry here leaves you wanting more, ask the agent to explain the term against your own project. That's usually faster than reading a documentation site cold.

The project stack

adt app add scaffolds every ADT Web Viewer app with the same set of libraries. Build a Web Viewer App is where you first see them working together.

React

The library that renders your app's interface. You describe the screen as components — reusable pieces like a customer list or a form — and React keeps what's displayed in sync as the underlying data changes. Every screen in an ADT project is React.

See react.dev/learn.

TypeScript

JavaScript with types added. Types describe the shape of your data, so a misspelled field name or a wrong value type is caught while you write the code instead of when someone opens the screen. ADT leans on this hard: adt typegen turns your FileMaker layouts into TypeScript types, which is what makes the agent's checks meaningful.

See typescriptlang.org/docs.

Vite

The tool that runs and builds your project. During development it serves the app at a local URL and refreshes the browser as soon as you save a file. When you're ready to ship, it compiles the whole project into files a browser can load. pnpm dev and pnpm build are both Vite.

See vite.dev/guide.

Tailwind CSS

A styling system. Rather than writing separate stylesheets, you apply small utility classes directly to elements — flex, p-4, text-sm — and compose them into a design. ADT projects use Tailwind v4 for layout and styling throughout.

See tailwindcss.com/docs.

shadcn/ui

A collection of ready-made React components — buttons, dialogs, tables, date pickers — built on Tailwind. It isn't a package you install and import from. The components are copied into your project as source code, so you and your agent can edit them like any other file. ADT scaffolds the new-york style.

See ui.shadcn.com/docs. For visual theme editors and help applying a theme, see Theming.

TanStack Router

Handles navigation inside your app. It maps URLs to screens, so a Web Viewer app can show a customer list at one route and a customer detail view at another, with back and forward behaving the way users expect.

See the TanStack Router docs.

TanStack Query

Manages the data your app fetches from FileMaker. Also called React Query. It caches results, refetches in the background, and refreshes affected screens after a write, so you don't hand-roll loading, caching, and refresh logic for every call.

See Use a Typed Data Client for how ADT apps use it, and the TanStack Query docs.

Zod

A validation library. You define a schema describing what data should look like, then check real data against it while the app runs. adt typegen generates a Zod schema per layout, so a FileMaker field that changes type or disappears fails loudly instead of quietly breaking a screen. @adt/fmdapi accepts any validator implementing Standard Schema, but Zod is the default.

See zod.dev and Validation & Transformation.

vite-plugin-singlefile

A Vite plugin that inlines an entire built app — JavaScript, CSS, and assets — into one dist/index.html. That's what makes a build deployable into a FileMaker Web Viewer, which needs a single self-contained file.

See vite-plugin-singlefile on GitHub.

TanStack Intent

A tool for shipping agent skills inside npm packages. A skill is documentation written for coding agents rather than for people, so an agent uses a library the way its maintainers intended instead of guessing from memory. ADT installs it so your agent picks up the skills bundled with @adt/fmdapi and shadcn/ui.

See the TanStack Intent docs.

Tools you run

Node.js

The runtime that lets JavaScript run on your machine instead of inside a browser. The dev server and the build run on Node.js. The adt CLI itself is a compiled binary and doesn't need it — you only need Node.js once you build a Web Viewer app with adt app add. ADT requires Node.js 24+.

See System Requirements for supported versions, and nodejs.org for the API documentation.

pnpm

The package manager that installs your project's dependencies and runs its scripts. It's the tool behind pnpm install, pnpm dev, pnpm build, and pnpm check. ADT templates pin pnpm 11.

See pnpm.io/installation.

npm

The public registry where JavaScript packages are published, and the package manager bundled with Node.js. ADT apps pull most dependencies from npm — but not @adt/fmdapi, which is vendored into your project instead and updated with adt update.

See docs.npmjs.com.

Git and GitHub

Version control for your project folder, plus the service that hosts a shared copy your team syncs with. This is the one area where the FileMaker workflow and the web workflow differ most.

See GitHub Workflow, a full introduction written for FileMaker developers.

Linters and formatters

A linter flags suspect code — an unused variable, a likely bug. A formatter rewrites code to a consistent style so nobody argues about spacing. In an ADT project they run alongside type checking whenever the agent checks its work.

See Biome and Prettier, the two you're most likely to meet.

Terms you'll run into

You don't need to memorize these. They're here so a word in a doc page or an agent's message doesn't stop you.

  • Package (or dependency) — a reusable library your project pulls in. The list lives in package.json, and pnpm install downloads them.

  • Scaffold — generate a starter project with folders, config, and dependencies already in place. adt init scaffolds an ADT project (a registry and agent instructions, no dependencies); adt app add scaffolds a Web Viewer app with dependencies installed.

  • Vendored — copied into your project's source rather than installed from a registry. @adt/fmdapi is vendored at vendor/@adt/fmdapi, so you can read it and it travels with your repo.

  • CLI — a command line interface: a program invoked by name with arguments, rather than clicked. pnpm, git, and ADT's own filemaker are CLIs you type into a terminal. adt is also a CLI, but not one of yours: it ships inside the agent plugin, isn't on your PATH, and only your agent invokes it. See What ADT installs.

  • Build — the step that turns your source code into files a browser can run. pnpm build is the build.

  • Bundle — what a build produces. In ADT that is a single HTML artifact that Deploy to FileMaker stores in your FileMaker file.

  • Dev server — the local web server Vite runs while you develop, on port 5175 by default. It reloads the browser as you save.

  • Type checking — confirming your code's types line up before it ever runs. This is what catches a field name that no longer exists in your FileMaker file.

  • Compile time vs runtime — compile time is while your code is being checked and built; runtime is while it's actually running in the browser. TypeScript types exist only at compile time, which is exactly why ADT also validates data at runtime with Zod.

  • Component — a self-contained piece of UI in React: a customer card, a toolbar, an entire screen.

  • Hook — a React function that lets a component use state, data fetching, or lifecycle behavior. Their names start with use, as in useWebViewerCommand.

  • State — data your app holds in memory while it runs. ADT docs contrast this with server state: the FileMaker records TanStack Query caches on your app's behalf.

  • Route — a URL inside your app mapped to a screen. TanStack Router manages these.

  • Schema — a description of what data should look like. FileMaker has schema (tables and fields), and so does your app (the Zod schemas typegen writes from those layouts).

  • Validation — checking real data against a schema, and failing when it doesn't match.

  • async / await / promise — JavaScript's way of handling work that takes time, such as calling a FileMaker script. A promise is the pending result; await waits for it to arrive.

  • Console — the browser's log and error panel, part of its developer tools. It's the first place to look when a Web Viewer app misbehaves, and what your agent reads when it previews the app.

  • localhost and ports — localhost is your own machine. A port number picks which local service you're talking to: FileMaker Pro's Agent Access defaults to 19080, and the Vite dev server defaults to 5175. ADT reads a custom Agent Access port from FM_DEV_SERVER_PORT.

  • Agent Access — a setting built into FileMaker Pro 26.1 and later (File → Manage → Agents) that lets a local process ask which files are open and run a script in one of them. ADT uses it for Web Viewer development; it needs no ADT-specific plugin. See How ADT Connects to FileMaker.

  • HTTP — a request and a response. It's how the pieces described on How ADT Connects to FileMaker talk to each other.

  • JSON — a plain-text format for structured data. Config files like adt.config.json use it, and it's how data moves between FileMaker and your app.

  • HTML, CSS, and JavaScript — the three languages every web page is made of: structure, style, and behavior. Everything above eventually compiles down to these. The general reference is MDN Web Docs.

Git terms — repo, commit, branch, merge, pull request — are defined in GitHub Workflow.