Adding a New Tool

Quick Start

Use the /new-tool Claude Code command to scaffold everything automatically:

/new-tool

Manual Steps

If adding manually, create these files:

1. Route File

src/routes/<tool-name>.tsx

TanStack Router file-based route with the tool’s page component.

2. Components

src/components/<tool-name>/
├── <tool-name>-page.tsx    # Main page component
└── ...                      # Tool-specific components

3. TanStack Query Hooks

src/hooks/use-<tool-name>.ts

Query and mutation hooks for the tool’s API endpoints.

4. API Routes

worker/routes/<tool-name>.ts

Hono route group with permission middleware.

5. Register Routes

In worker/index.ts, import and register the new route group.

6. Sidebar Entry

Add the tool to the navigation array in src/components/layout/app-sidebar.tsx.

7. Database Tables

If the tool needs data storage:

• Add tables to db/schema.sql
• Create a migration in db/migrations/
• Update seed data in db/seed.sql

8. Default Permissions

Add entries to tool_permissions in db/seed.sql for all 5 access levels.

9. Documentation

• Create docs/src/content/docs/tools/<tool-name>.mdx
• Create docs/src/content/docs/api/<tool-name>.mdx
• Add entries to docs/astro.config.mjs sidebar