Get the FREE Ultimate OpenClaw Setup Guide →

convex-components

Scanned
npx machina-cli add skill PolarCoding85/convex-agent-skillz/convex-components-skill --openclaw
Files (1)
SKILL.md
5.5 KB

Convex Components

Components are sandboxed packages with their own database tables, functions, and isolated execution.

Universal Installation Pattern

All components follow the same installation pattern:

npm install @convex-dev/<component-name>
// convex/convex.config.ts
import { defineApp } from 'convex/server';
import componentName from '@convex-dev/<component-name>/convex.config';

const app = defineApp();
app.use(componentName);

// Multiple instances with different names
app.use(componentName, { name: 'instance2' });

export default app;

Run npx convex dev to generate code.

Accessing Components

import { components } from './_generated/api';

// Default instance
const instance = new ComponentClass(components.componentName, {
  /* config */
});

// Named instance
const instance2 = new ComponentClass(components.instance2, {
  /* config */
});

Transaction Semantics

Component mutations participate in the parent transaction:

export const doWork = mutation({
  handler: async (ctx) => {
    await ctx.db.insert('myTable', { data: 'value' });
    await component.doSomething(ctx); // Same transaction

    // If mutation throws, BOTH writes roll back
  }
});

Component exceptions can be caught:

try {
  await rateLimiter.limit(ctx, 'myLimit', { throws: true });
} catch (e) {
  // Only component's writes roll back
  // Parent mutation can continue
}

Available Components

Durable Functions

  • Workflow - Long-running, durable code flows with retries
  • Workpool - Queue actions with parallelism limits
  • Action Retrier - Retry failed actions with backoff

Backend Utilities

Payments

  • Stripe - Payments, subscriptions, and billing

Integrations

  • ProseMirror Sync - Collaborative text editing (Tiptap/BlockNote)
  • Resend - Transactional email with queuing and webhooks

AI Components

  • Agent - AI agents with persistent threads (separate skill)

Quick Reference

ComponentPackagePrimary Use
Rate Limiter@convex-dev/rate-limiterControl action frequency
Aggregate@convex-dev/aggregateFast count/sum queries
Sharded Counter@convex-dev/sharded-counterHigh-throughput counting
Presence@convex-dev/presenceReal-time user tracking
Action Cache@convex-dev/action-cacheCache expensive results
Migrations@convex-dev/migrationsOnline data migrations
Workpool@convex-dev/workpoolQueue work with limits
Workflow@convex-dev/workflowDurable multi-step flows
Action Retrier@convex-dev/action-retrierRetry failed actions
ProseMirror Sync@convex-dev/prosemirror-syncCollaborative text editing
Resend@convex-dev/resendTransactional email
Stripe@convex-dev/stripePayments & subscriptions
Agent@convex-dev/agentAI chat with history

Common Patterns

Component + Triggers

Auto-sync components with table changes using convex-helpers triggers:

import { Triggers } from 'convex-helpers/server/triggers';
import {
  customCtx,
  customMutation
} from 'convex-helpers/server/customFunctions';

const triggers = new Triggers<DataModel>();

// Register component trigger
triggers.register('myTable', aggregate.trigger());

// Wrap mutation to use triggers
const mutation = customMutation(mutationRaw, customCtx(triggers.wrapDB));

Testing Components

import componentTest from '@convex-dev/<component>/test';
import { convexTest } from 'convex-test';

function initTest() {
  const t = convexTest();
  componentTest.register(t);
  return t;
}

test('component test', async () => {
  const t = initTest();
  await t.run(async (ctx) => {
    // Test with component
  });
});

Dashboard Access

View component data in dashboard via component dropdown. Each component has isolated tables.

Best Practices

  1. Name instances descriptively - emailWorkpool, scrapeWorkpool vs generic workpool1
  2. Configure once - Set options when creating instance, not per-call
  3. Use triggers for sync - Keep aggregates in sync automatically
  4. Handle component errors - Catch and handle gracefully when appropriate
  5. Check limits - Respect parallelism limits on free tier (20 concurrent functions)

Source

git clone https://github.com/PolarCoding85/convex-agent-skillz/blob/main/.claude/skills/convex-components-skill/SKILL.mdView on GitHub

Overview

Convex Components are sandboxed packages with their own database tables, functions, and isolated execution. This skill codifies universal installation, configuration, and usage patterns for any Convex component—from Rate Limiter to Workflow—so you can rapidly add, configure, and reuse components across the ecosystem.

How This Skill Works

Install a component with npm install @convex-dev/<component-name> and wire it into convex.config.ts using app.use(componentName). You can create multiple named instances by passing options, e.g., app.use(componentName, { name: 'instance2' }). Run npx convex dev to generate code and access the generated API.

When to Use It

  • Setting up a new Convex component in your app (Rate Limiter, Aggregate, Workpool, Workflow, etc.)
  • Running multiple named instances to isolate configurations
  • Mutations that mutate component state inside a parent transaction
  • Catching component exceptions without aborting the parent mutation
  • Maintaining a catalog of available Convex components and choosing the right one

Quick Start

  1. Step 1: npm install @convex-dev/<component-name>
  2. Step 2: Wire into convex.config.ts with app.use(componentName) and an optional name, e.g., { name: 'instance2' }
  3. Step 3: Run npx convex dev to generate code and access via the generated API (components.*)

Best Practices

  • Follow the universal installation pattern: npm install @convex-dev/<component-name>
  • Mount components with app.use and meaningful instance names
  • Leverage transactions: component mutations participate in the parent transaction
  • Handle component errors gracefully; catch exceptions to avoid unnecessary rollbacks
  • Consult the reference docs under references/ for each component

Example Use Cases

  • Install and configure Rate Limiter to throttle API calls
  • Use Aggregate for fast COUNT/SUM queries across large datasets
  • Orchestrate a durable Workflow with Workpool for parallel tasks
  • Persisted presence tracking with Presence for real-time user status
  • Retry failed actions with Action Retrier using backoff

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers