Convex Create Component

1---2name: convex-create-component3description: Designs and builds Convex components with isolated tables, clear boundaries, and app-facing wrappers. Use this skill when creating a new Convex component, extracting reusable backend logic into a component, building a third-party integration that owns its own tables, packaging Convex functionality for reuse, or when the user mentions defineComponent, app.use, ComponentApi, ctx.runQuery/runMutation across component boundaries, or wants to separate concerns into isolated Convex modules.4---5 6# Convex Create Component7 8Create reusable Convex components with clear boundaries and a small app-facing API.9 10## When to Use11 12- Creating a new Convex component in an existing app13- Extracting reusable backend logic into a component14- Building a third-party integration that should own its own tables and workflows15- Packaging Convex functionality for reuse across multiple apps16 17## When Not to Use18 19- One-off business logic that belongs in the main app20- Thin utilities that do not need Convex tables or functions21- App-level orchestration that should stay in `convex/`22- Cases where a normal TypeScript library is enough23 24## Workflow25 261. Ask the user what they are building and what the end goal is. If the repo already makes the answer obvious, say so and confirm before proceeding.272. Choose the shape using the decision tree below and read the matching reference file.283. Decide whether a component is justified. Prefer normal app code or a regular library if the feature does not need isolated tables, backend functions, or reusable persistent state.294. Make a short plan for:30   - what tables the component owns31   - what public functions it exposes32   - what data must be passed in from the app (auth, env vars, parent IDs)33   - what stays in the app as wrappers or HTTP mounts345. Create the component structure with `convex.config.ts`, `schema.ts`, and function files.356. Implement functions using the component's own `./_generated/server` imports, not the app's generated files.367. Wire the component into the app with `app.use(...)`. If the app does not already have `convex/convex.config.ts`, create it.378. Call the component from the app through `components.<name>` using `ctx.runQuery`, `ctx.runMutation`, or `ctx.runAction`.389. If React clients, HTTP callers, or public APIs need access, create wrapper functions in the app instead of exposing component functions directly.3910. Run `npx convex dev` and fix codegen, type, or boundary issues before finishing.40 41## Choose the Shape42 43Ask the user, then pick one path:44 45| Goal                                              | Shape            | Reference                           |46| ------------------------------------------------- | ---------------- | ----------------------------------- |47| Component for this app only                       | Local            | `references/local-components.md`    |48| Publish or share across apps                      | Packaged         | `references/packaged-components.md` |49| User explicitly needs local + shared library code | Hybrid           | `references/hybrid-components.md`   |50| Not sure                                          | Default to local | `references/local-components.md`    |51 52Read exactly one reference file before proceeding.53 54## Default Approach55 56Unless the user explicitly wants an npm package, default to a local component:57 58- Put it under `convex/components/<componentName>/`59- Define it with `defineComponent(...)` in its own `convex.config.ts`60- Install it from the app's `convex/convex.config.ts` with `app.use(...)`61- Let `npx convex dev` generate the component's own `_generated/` files62 63## Component Skeleton64 65A minimal local component with a table and two functions, plus the app wiring.66 67```ts68// convex/components/notifications/convex.config.ts69import { defineComponent } from "convex/server";70 71export default defineComponent("notifications");72```73 74```ts75// convex/components/notifications/schema.ts76import { defineSchema, defineTable } from "convex/server";77import { v } from "convex/values";78 79export default defineSchema({80  notifications: defineTable({81    userId: v.string(),82    message: v.string(),83    read: v.boolean(),84  }).index("by_user", ["userId"]),85});86```87 88```ts89// convex/components/notifications/lib.ts90import { v } from "convex/values";91import { mutation, query } from "./_generated/server.js";92 93export const send = mutation({94  args: { userId: v.string(), message: v.string() },95  returns: v.id("notifications"),96  handler: async (ctx, args) => {97    return await ctx.db.insert("notifications", {98      userId: args.userId,99      message: args.message,100      read: false,101    });102  },103});104 105export const listUnread = query({106  args: { userId: v.string() },107  returns: v.array(108    v.object({109      _id: v.id("notifications"),110      _creationTime: v.number(),111      userId: v.string(),112      message: v.string(),113      read: v.boolean(),114    }),115  ),116  handler: async (ctx, args) => {117    return await ctx.db118      .query("notifications")119      .withIndex("by_user", (q) => q.eq("userId", args.userId))120      .filter((q) => q.eq(q.field("read"), false))121      .collect();122  },123});124```125 126```ts127// convex/convex.config.ts128import { defineApp } from "convex/server";129import notifications from "./components/notifications/convex.config.js";130 131const app = defineApp();132app.use(notifications);133 134export default app;135```136 137```ts138// convex/notifications.ts  (app-side wrapper)139import { v } from "convex/values";140import { mutation, query } from "./_generated/server";141import { components } from "./_generated/api";142import { getAuthUserId } from "@convex-dev/auth/server";143 144export const sendNotification = mutation({145  args: { message: v.string() },146  returns: v.null(),147  handler: async (ctx, args) => {148    const userId = await getAuthUserId(ctx);149    if (!userId) throw new Error("Not authenticated");150 151    await ctx.runMutation(components.notifications.lib.send, {152      userId,153      message: args.message,154    });155    return null;156  },157});158 159export const myUnread = query({160  args: {},161  handler: async (ctx) => {162    const userId = await getAuthUserId(ctx);163    if (!userId) throw new Error("Not authenticated");164 165    return await ctx.runQuery(components.notifications.lib.listUnread, {166      userId,167    });168  },169});170```171 172Note the reference path shape: a function in `convex/components/notifications/lib.ts` is called as `components.notifications.lib.send` from the app.173 174## Critical Rules175 176- Keep authentication in the app, because `ctx.auth` is not available inside components.177- Keep environment access in the app, because component functions cannot read `process.env`.178- Pass parent app IDs across the boundary as strings, because `Id` types become plain strings in the app-facing `ComponentApi`.179- Do not use `v.id("parentTable")` for app-owned tables inside component args or schema, because the component has no access to the app's table namespace.180- Import `query`, `mutation`, and `action` from the component's own `./_generated/server`, not the app's generated files.181- Do not expose component functions directly to clients. Create app wrappers when client access is needed, because components are internal and need auth/env wiring the app provides.182- If the component defines HTTP handlers, mount the routes in the app's `convex/http.ts`, because components cannot register their own HTTP routes.183- If the component needs pagination, use `paginator` from `convex-helpers` instead of built-in `.paginate()`, because `.paginate()` does not work across the component boundary.184- Add `args` and `returns` validators to all public component functions, because the component boundary requires explicit type contracts.185 186## Patterns187 188### Authentication and environment access189 190```ts191// Bad: component code cannot rely on app auth or env192const identity = await ctx.auth.getUserIdentity();193const apiKey = process.env.OPENAI_API_KEY;194```195 196```ts197// Good: the app resolves auth and env, then passes explicit values198const userId = await getAuthUserId(ctx);199if (!userId) throw new Error("Not authenticated");200 201await ctx.runAction(components.translator.translate, {202  userId,203  apiKey: process.env.OPENAI_API_KEY,204  text: args.text,205});206```207 208### Client-facing API209 210```ts211// Bad: assuming a component function is directly callable by clients212export const send = components.notifications.send;213```214 215```ts216// Good: re-export through an app mutation or query217export const sendNotification = mutation({218  args: { message: v.string() },219  returns: v.null(),220  handler: async (ctx, args) => {221    const userId = await getAuthUserId(ctx);222    if (!userId) throw new Error("Not authenticated");223 224    await ctx.runMutation(components.notifications.lib.send, {225      userId,226      message: args.message,227    });228    return null;229  },230});231```232 233### IDs across the boundary234 235```ts236// Bad: parent app table IDs are not valid component validators237args: {238  userId: v.id("users");239}240```241 242```ts243// Good: treat parent-owned IDs as strings at the boundary244args: {245  userId: v.string();246}247```248 249### Advanced Patterns250 251For additional patterns including function handles for callbacks, deriving validators from schema, static configuration with a globals table, and class-based client wrappers, see `references/advanced-patterns.md`.252 253## Validation254 255Try validation in this order:256 2571. `npx convex codegen --component-dir convex/components/<name>`2582. `npx convex codegen`2593. `npx convex dev`260 261Important:262 263- Fresh repos may fail these commands until `CONVEX_DEPLOYMENT` is configured.264- Until codegen runs, component-local `./_generated/*` imports and app-side `components.<name>...` references will not typecheck.265- If validation blocks on Convex login or deployment setup, stop and ask the user for that exact step instead of guessing.266 267## Reference Files268 269Read exactly one of these after the user confirms the goal:270 271- `references/local-components.md`272- `references/packaged-components.md`273- `references/hybrid-components.md`274 275Official docs: [Authoring Components](https://docs.convex.dev/components/authoring)276 277## Checklist278 279- [ ] Asked the user what they want to build and confirmed the shape280- [ ] Read the matching reference file281- [ ] Confirmed a component is the right abstraction282- [ ] Planned tables, public API, boundaries, and app wrappers283- [ ] Component lives under `convex/components/<name>/` (or package layout if publishing)284- [ ] Component imports from its own `./_generated/server`285- [ ] Auth, env access, and HTTP routes stay in the app286- [ ] Parent app IDs cross the boundary as `v.string()`287- [ ] Public functions have `args` and `returns` validators288- [ ] Ran `npx convex dev` and fixed codegen or type issues