What if your users could build their own features?

See it in action

Two real demos. Just ⌘K and plain English to complete feature.

The thesis

Setup

OnClaw works in two modes: server-side with a Next.js API route (full power — auth, rate limiting, context API), or client-only for quick prototyping with just a provider and an API key.

The init command

This is the interesting part. npx onclaw init doesn’t ask you a bunch of config questions. It uses Claude to actually read your codebase — your schema files, your ORM, your auth setup, your page components — and generates a complete integration. It writes three files:

• .onclaw/project.json — a manifest describing your schema, relations, and UI patterns. This gets injected into every LLM prompt so generated components understand your data model.
• src/onclaw/context.ts — typed query and action functions that act as the security boundary. Generated components can only call what you expose here.
• An API route wired to your auth with rate limiting.

The AI scans for Drizzle, Prisma, Mongoose, raw SQL, in-memory stores — whatever you’re using. It finds your auth (NextAuth, Clerk, Supabase, custom JWT) and wires it in. It even reads your page components to figure out where to place slots. You can edit everything it generates — it’s just regular TypeScript.

$ npx onclaw init

  ◆ Scanning project...
  │ Found: Next.js 15, Drizzle ORM, PostgreSQL, NextAuth
  │ Schema: 6 tables (users, deals, contacts, activities, teams, notes)
  │ Auth: NextAuth with Google + credentials
  │ Pages: /dashboard, /deals/[id], /contacts, /settings
  │
  ◆ Generating integration...
  │ Created .onclaw/project.json (manifest)
  │ Created src/onclaw/context.ts (12 queries, 4 actions)
  │ Created app/api/onclaw/[...onclaw]/route.ts
  │
  ◆ Done. Press ⌘K in your app to start building.

Server-side mode (recommended)

The init command generates this for you, but here’s what it looks like. The API route handles auth, rate limiting, and proxies LLM calls so no API keys touch the client:

// app/api/onclaw/[...onclaw]/route.ts
import { createOnClawHandler } from "onclaw/next";
import { createContext } from "@/onclaw/context";

export const { GET, POST } = createOnClawHandler({
  provider: "anthropic",
  apiKey: process.env.ANTHROPIC_API_KEY!,
  context: createContext(),
  auth: async (req) => {
    const session = await getServerSession(req);
    if (!session?.user) throw new Error("Unauthorized");
    return { userId: session.user.id };
  },
  rateLimit: { maxGenerations: 20, windowMs: 3600000 },
});

The context API is where you control what generated components can access. This is the security boundary — no raw SQL, no arbitrary imports:

// src/onclaw/context.ts
export function createContext() {
  return {
    queries: {
      getDeals: (filters) => db.select().from(deals).where(filters),
      getContacts: (search) => db.select().from(contacts),
      getRevenue: (period) => db.select().from(revenue).where({ period }),
    },
    actions: {
      updateDealStage: (id, stage) =>
        db.update(deals).set({ stage }).where(eq(deals.id, id)),
    },
  };
}

Then wrap your page and drop in slots:

import { OnClawProvider, Slot } from "onclaw";

export default function Dashboard() {
  return (
    <OnClawProvider userId={session.user.id}>
      <h1>Dashboard</h1>
      <div className="grid grid-cols-2 gap-4">
        <Slot id="metrics" />
        <Slot id="chart" />
      </div>
      <Slot id="table" />
    </OnClawProvider>
  );
}

Client-only mode

If you just want to try it without setting up a server route — maybe you’re prototyping, or you’re not on Next.js — you can pass the API key directly. No server route, no context API. Components generate against a static schema you provide:

import { OnClawProvider, Slot } from "onclaw";

export default function App() {
  return (
    <OnClawProvider
      apiKey={process.env.NEXT_PUBLIC_ANTHROPIC_KEY}
      userId="user-123"
      schema={{
        tables: ["deals", "contacts", "revenue"],
        descriptions: { deals: "Sales pipeline deals with stage, value, owner" },
      }}
    >
      <Slot id="main" />
    </OnClawProvider>
  );
}

Client-only mode exposes the API key to the browser. Fine for prototyping, not for production. Use server-side mode for anything real.

What gets generated

When a user types “show me a revenue chart by month” into ⌘K, OnClaw generates a real .tsx file. Not a template. Not a mock. A React component that calls your context API with your actual data:

// onclaw-generated/revenue-chart.tsx (auto-generated)
export default function RevenueChart({ ctx }) {
  const [data, setData] = useState([]);

  useEffect(() => {
    ctx.queries.getRevenue({ period: "monthly" }).then(setData);
  }, []);

  return (
    <div>
      <h3>Revenue by Month</h3>
      <BarChart data={data} x="month" y="revenue" />
    </div>
  );
}

The file is saved to disk. You can inspect it, edit it, commit it. It’s your code now — OnClaw just wrote the first draft.