Dev Tool Overview

The local Dev Tool app: a developer dashboard for inspecting environment variables, emails, translations, the database, RBAC, and more.

The kit ships a standalone Dev Tool app at apps/dev-tool — a local-only developer dashboard for inspecting and editing the parts of the project that are otherwise spread across .env files, message JSON, the database, and config packages.

It is a separate TanStack Start app that reads from (and, for some tools, writes back to) the apps/web project on disk. It is meant for local development only — never deploy it.

Running the Dev Tool

Start just the Dev Tool:

pnpm --filter dev-tool dev

It serves on http://localhost:3010 (it picks the next free port if 3010 is taken). pnpm dev at the repo root also starts it alongside the other apps.

What's Inside

The left sidebar groups every tool:

  • Dashboard — at-a-glance project health: kit variant, runtime (Node/package manager), dependency install state, git branch/cleanliness, dev-server and database port checks, merge-conflict detection, and prerequisite tooling.
  • Environment Variables — browse, validate, and edit every .env variable across the monorepo, per mode (development/production), with override chains and secret masking. See Environment Variables and Production Environment Variables.
  • Emails — preview every transactional email template rendered to HTML, and send a test email through your SMTP settings.
  • Translations — a side-by-side matrix of every translation key across locales and namespaces, with inline editing. See Translations.
  • Database — browse project tables (columns, keys, foreign keys) and Postgres functions, categorized, with a click-through detail view.
  • PRD Manager — browse Product Requirements Documents stored under .prds/.
  • RBAC — an Inspector that visualizes the live @kit/rbac configuration (resources, actions, role hierarchy, permissions matrix) and a Builder that generates RBAC config code.

How It Works

The Dev Tool is a thin UI over the @kit/mcp-server package (tooling/mcp-server). The same service factories power both this app and the MCP Server that AI agents use — so the data you see here is exactly what an AI assistant sees. Read and write operations run inside server functions, so Node-only work (reading .env files, connecting to Postgres, sending mail) never ships to the browser.

Because it reads the real files on disk, the Dev Tool always reflects your current working tree.