api-client-gen

name	api-client-gen
description	Generate a fully-typed TypeScript API client from Strapi content-type schemas and route contracts. Use after backend-schema when you need to create or regenerate the frontend API layer.

API Client Generation

Use api-types-mcp to generate a typed TypeScript API client from Strapi content-type schemas (schema.json) and optional route contracts (*.contract.ts) on disk. No running Strapi required.

When to Use

• After creating or modifying content types (Phase 3 of feature cycle)
• After adding custom routes via strapi-routes-mcp create_custom_route
• When the frontend API client is out of date with the backend
• Before building frontend pages that consume the API
• User asks to "generate API client", "regenerate API types", "update API layer"

Prerequisites

• Project scaffolded via scaffold-project
• Content types defined under backend/src/api/*/content-types/*/schema.json
• Optional: route contracts at backend/src/api/*/routes/*.contract.ts
• Optional: STRAPI_BASE_URL and STRAPI_API_TOKEN in backend/.env.local (connect syncs these to frontend/.env.local)
• Call connect once per session before generate_api_client

Generated Output

generate_api_client produces a layered client under frontend/src/api/:

frontend/src/api/
├── client.ts                  # StrapiClient class + createStrapiClient factory
├── index.ts                   # Barrel re-exports
├── types/
│   ├── articles.ts            # Article interface, ArticleFindParams, ArticleFilters, ArticleSortable
│   ├── tags.ts
│   ├── filters.ts             # Shared StringFilter, NumberFilter, etc.
│   └── index.ts
└── namespaces/
    ├── articles.ts            # ArticlesNamespace class with find/findOne/create/update/delete + custom methods
    ├── tags.ts
    └── index.ts

Usage from the frontend

import { createStrapiClient } from "@/api";

const api = createStrapiClient({
  baseUrl: import.meta.env.VITE_API_URL,
  token: import.meta.env.VITE_STRAPI_TOKEN,
});

const articles = await api.articles.find({
  filters: { status: { $eq: "published" } },
  sort: ["publishedAt:desc"],
  populate: ["author", "tags"],
  pagination: { page: 1, pageSize: 10 },
});

const featured = await api.articles.featured({ limit: 5 });   // custom route

Process

Step 1: Verify Backend Schema

Confirm content types are committed on disk:

ls backend/src/api/*/content-types/*/schema.json

Step 2: Connect

Call api-types-mcp connect to validate directory structure and sync the Strapi token from backend/.env.local to frontend/.env.local:

connect({ projectDir: "/absolute/path/to/project" })

connect no longer requires Strapi to be running and does not use admin credentials — it only reads files.

Step 3: Generate the Client

Call api-types-mcp generate_api_client:

generate_api_client({ projectDir: "/absolute/path/to/project" })

The tool reads every schema.json and every *.contract.ts under backend/src/api/, merges them by namespace (pluralName), and writes the full client to frontend/src/api/.

Step 4: Verify Type Correctness

cd frontend && npx tsc --noEmit

Fix any type errors before proceeding.

Step 5: Query for Usage

Use query_api_types to search the generated namespace classes and types:

query_api_types({ query: "how to create article" })
query_api_types({ query: "find with pagination" })
query_api_types({ query: "featured articles" })

Step 6: Commit Generated Files

git add frontend/src/api/
git commit -m "checkpoint:feature/types"

File Protection

All files under frontend/src/api/ are managed by api-types-mcp. Never edit them directly. To change the API:

1. Modify schema.json via strapi-mcp, or
2. Create/update a route contract via strapi-routes-mcp create_custom_route, or
3. Edit *.contract.ts files by hand
4. Re-run generate_api_client

Regeneration

generate_api_client overwrites every file under frontend/src/api/. It is safe to run repeatedly — output is fully derived from the backend sources.

Related

• strapi-routes-mcp create_custom_route — add custom endpoints that feed into the generated client
• strapi-routes-mcp list_routes — inspect default CRUD + custom routes for a given API