local-explorer
par cloudflare
How to add products/resources to the local explorer or local API. Use when implementing new local APIs, or UI routes under…
npx skills add https://github.com/cloudflare/workers-sdk --skill local-explorerCloudflare Local Explorer Products
Use this skill when adding a new product or resource type to the local API and/or local explorer.
Start Here
Read these files before editing:
packages/miniflare/src/workers/local-explorer/explorer.worker.tspackages/miniflare/src/plugins/core/explorer.tspackages/miniflare/src/plugins/core/types.ts- One existing resource implementation in
packages/miniflare/src/workers/local-explorer/resources/, preferably the product most similar to the new one - One matching test in
packages/miniflare/test/plugins/local-explorer/
If there are UI changes, also read:
packages/local-explorer-ui/src/components/Sidebar.tsx- Existing route files under
packages/local-explorer-ui/src/routes/ - Existing product e2e tests under
packages/local-explorer-ui/src/__e2e__/
Workflow
- Add the API surface to
packages/miniflare/scripts/openapi-filter-config.ts. - Generate Miniflare's filtered spec and backend types from a full Cloudflare OpenAPI spec:
OPENAPI_INPUT_PATH=<path-to-full-openapi-spec> pnpm --dir packages/miniflare generate:api
- Inspect
packages/miniflare/src/workers/local-explorer/openapi.local.jsonand generated types. If the generated schemas include fields local explorer will not support, add ignores inopenapi-filter-config.tsand regenerate. - The explorer worker should have access to all user resource bindings. Ensure
proxyBindingsinclude bindings to the new product and thatgetExplorerServices()exposes any extra bindings the explorer worker needs. Wire product bindings throughconstructExplorerBindingMap()andconstructExplorerWorkerOpts()inpackages/miniflare/src/plugins/core/explorer.ts. - Add or extend resource binding metadata in
packages/miniflare/src/plugins/core/types.ts. - Implement handlers in
packages/miniflare/src/workers/local-explorer/resources/<product>.ts. Make sure to account for cross-instance aggregation, if applicable. - Register Hono routes in
packages/miniflare/src/workers/local-explorer/explorer.worker.ts. - Validate request bodies and query params with generated Zod schemas from
generated/zod.gen.tsusingvalidateRequestBody()andvalidateQuery(). - Return Cloudflare API envelope responses using
wrapResponse()anderrorResponse()fromcommon.tsunless an existing endpoint for that product uses a different response shape. - Add Miniflare tests in
packages/miniflare/test/plugins/local-explorer/<product>.spec.ts. - Regenerate the UI API client:
pnpm --dir packages/local-explorer-ui build
- Add UI routes/components. Use Kumo components for new UI. See https://github.com/cloudflare/kumo/blob/main/AGENTS.md.
- Add Playwright e2e tests under
packages/local-explorer-ui/src/__e2e__/<product>/for new visible product flows.
OpenAPI Rules
- Do not edit generated files like
packages/miniflare/src/workers/local-explorer/openapi.local.jsonorpackages/miniflare/src/workers/local-explorer/generated/directly. - Prefer upstream Cloudflare API paths when a public API exists.
- Use
extensions.pathsinopenapi-filter-config.tsonly for local-only APIs or APIs that do not exist in the public Cloudflare API. - Add ignores for unsupported params, headers, request body properties, and response fields rather than pretending to support them.
Backend Patterns
- Local list endpoints such as listing KV namespaces should not implement pagination as this may require cross-instance aggregation. Pagination should be supported when targeting individual resources, such as listing KV keys within a specific namespace.
- For cross-worker aggregation, use
aggregateListResults(),getPeerUrlsIfAggregating(), andfetchFromPeer()fromaggregation.ts; do not hand-roll peer discovery. Add tests for both local-only behavior and aggregated behavior when the product can span multiple instances. - If an API needs direct filesystem access, call through the loopback service (
c.env.MINIFLARE_LOOPBACK) to a Node.js endpoint. The local explorer API runs inside workerd, so it cannot access the host filesystem directly. - If an endpoint needs metadata that is not available on the runtime binding itself, put that metadata in
BindingIdMapand pass it throughCoreBindings.JSON_LOCAL_EXPLORER_BINDING_MAP. - If a product should appear in
/api/local/workers, add it toWorkerResourceBindingsand populate it inconstructExplorerWorkerOpts().
UI Patterns
- The UI API client is generated from
packages/miniflare/src/workers/local-explorer/openapi.local.jsonintopackages/local-explorer-ui/src/api/generated/. - Sidebar resources come from
/api/local/workers; updateLocalExplorerWorkerBindingsusage andSidebar.tsxwhen the product should appear in navigation. - Add route files under
packages/local-explorer-ui/src/routes/. TanStack Router regeneratessrc/routeTree.gen.tsduring UI build/dev. - Preserve worker selection by carrying the
workersearch param through product links when following sidebar patterns. - Use Kumo for new UI components wherever possible. Do not introduce a parallel component system.
- Do not use tailwindCSS color tokens, use Kumo color tokens instead.