A claw for your users

Let your users build entire features

A ⌘K command bar that lets anyone create full-stack React features with natural language. Real components. Real data. Written to your actual codebase. Not a toy.

$npm install onclaw

$npx onclaw init

Find on GitHub See How It Works

⌘KOnClaw

Describe any feature in plain English...

The Story

Stop building features for users. Let them build their own.

Salesforce didn't become a $300 billion company because of CRM. CRM existed before Salesforce. It became a $300B company because every customer got their own version. Custom objects. Custom fields. Custom workflows. Custom reports. All without writing code. The platform was the product, not the CRM.

That created insane stickiness. Your Salesforce instance is YOUR Salesforce. It has your workflows, your fields, your automations. Switching cost is astronomical because you'd lose all of that. It also created an entire ecosystem — 500,000+ certified Salesforce admins became a career. Because the customization layer was so deep, it needed specialists.

But there was always a bottleneck. Every customization required an admin. A specialist. Weeks of configuration. The sales rep who needed a custom report couldn't just build one — they had to file a request and wait.

OnClaw collapses this entirely. Instead of admin spends weeks configuring, deploys to org, users consume — it's any user describes what they need and gets it instantly. The admin bottleneck disappears. You don't need a specialist to build a custom report. The sales rep who needs it just... asks for it. And gets it. With their real data.

Think about what happens over time. User A builds a deal velocity tracker. User B builds a custom lead scoring view. User C builds a pipeline forecast widget. After three months, every user has a completely different app tailored to how they work.

Now try switching to a competitor. You'd lose all of that. Not because of data lock-in — because of workflow lock-in. Your tools work the way your brain works. That's way stickier than data export.

The most valuable SaaS companies aren't selling software. They're selling a platform that becomes your software. Salesforce. Notion. Airtable. Figma. The next wave does this with AI. Every user gets their own version. That's the whole idea.

Every user gets their own version.

Why OnClaw

Your users build features. You set the boundaries.

Anyone Can Build Features

Sales wants a pipeline view? Support needs a ticket dashboard? They build it themselves with ⌘K. No tickets, no sprints, no waiting.

Connected to Real Data

Generated features query your actual database via the Context Bridge. Revenue charts show real revenue. User lists show real users.

Real Code, Not Templates

OnClaw generates production React components — not drag-and-drop widgets. Real code, written to your actual source files, in your repo.

Full-Stack Generation

Components can read data AND trigger actions. Create records, send emails, update statuses — all from a feature described in plain English.

Developer Guardrails

You define what data and actions are available. Users build freely within your boundaries. Slot architecture keeps the rest of your app untouched.

Instant Preview, Persistent Results

Users see their feature instantly via streaming preview. When they're happy, it's saved to disk. Real code in your repo, not ephemeral state.

How It Works

Three steps to user-built features

Define the boundaries

Wrap feature areas in <Slot> components and wire up your Context Bridge — the data and actions users can access.

Users describe what they need

Anyone on your team presses ⌘K and describes the feature they want in plain English. No training required.

⌘K → "Show a breakdown of support tickets by priority with a resolve button"

A real feature appears

OnClaw generates a full-stack component — querying real data, wired to real actions — previews it live, and saves it to your codebase.

✓ Component generated ✓ Querying real database ✓ Actions wired up ✓ Saved to source files

Zero-Config Setup

An AI agent sets up everything for you

No boilerplate. No config files. Run one command and an AI agent analyzes your codebase, generates your Context Bridge, and drops Slots into your UI — fully customized to your stack.

Terminal
$ npx onclaw init
◆Scanning project structure...
Found Next.js 15 + App Router
Found Prisma with 12 models
Found 34 React components
Found 8 API routes
◆Generating Context Bridge...
→ 12 queries from Prisma models
→ 5 actions from API routes
→ Type-safe bindings generated
◆Placing Slots in your UI...
→ Dashboard → 3 slots (metrics, chart, feed)
→ Sidebar → 1 slot (navigation)
→ Settings → 2 slots (profile, preferences)
◆Configuring guardrails...
→ Read-only by default for sensitive models
→ Admin actions gated behind role check
Ready!6 slots · 12 queries · 5 actions
Your users can now press ⌘K to build features.

Scans your codebase

The agent reads your project structure, components, data models, and API routes to understand your stack.

Generates your Context Bridge

Automatically creates typed queries and actions from your existing data layer — Prisma, Drizzle, REST, GraphQL, whatever you use.

Places Slots in your UI

Identifies the best locations for customizable slots — dashboards, sidebars, panels — and inserts them with sensible defaults.

Configures guardrails

Sets up permissions, access controls, and safety boundaries so users can only build within the scope you're comfortable with.

💡

Works with any stack

Next.js, Remix, Vite, Express — Prisma, Drizzle, raw SQL, REST, GraphQL. The agent adapts to your project, not the other way around.

Not Just UI — Full Features

Features that talk to your real backend

This isn't a UI skin generator. OnClaw connects to your actual database and APIs via the Context Bridge.

User

⌘K

Component

Context Bridge

Database

Query Real Data

Generated components access your actual data through typed queries.

ctx.queries.getUsers()
ctx.queries.getOrders()

Trigger Real Actions

Not just read — write. Components can create records, send emails, trigger workflows.

ctx.actions.sendEmail()
ctx.actions.createRecord(data)

Server-Side Persistence

Generated code is written to actual files in your repo — not ephemeral client state.

context-bridge.ts

// Define what your components can access
const context = {
  queries: {
    getRevenue: () =>
      db.select().from(orders),

    getUsers: () =>
      db.select().from(users),

    getMonthlyStats: () =>
      db.select({
        month: orders.month,
        total: sum(orders.amount),
      }).from(orders).groupBy(orders.month),
  },

  actions: {
    createInvoice: (data) =>
      db.insert(invoices).values(data),

    sendEmail: (to, subject, body) =>
      mailer.send({ to, subject, body }),
  }
};

See it in action

A non-technical user makes a real, data-connected component

User types

⌘KOnClaw Command Bar

"Show me a chart of monthly revenue for 2024"

OnClaw generates

// Auto-generated, queries real data

const data = ctx.queries.getMonthlyStats()

return <BarChart data={data} />

Live data from your database

Integration

Add to your app in minutes

app/layout.tsx

import { OnClawProvider } from 'onclaw/next'

export default function Layout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <OnClawProvider
      apiKey={process.env.ONCLAW_KEY!}
      queries={{
        user: () => getCurrentUser(),
        theme: () => getThemePrefs(),
      }}
    >
      {children}
    </OnClawProvider>
  )
}

components/Dashboard.tsx

import { Slot } from 'onclaw'

export default function Dashboard() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <Slot id="metrics-panel">
        <DefaultMetrics />
      </Slot>

      <Slot id="chart-section">
        <DefaultChart />
      </Slot>

      <Slot id="activity-feed">
        <DefaultFeed />
      </Slot>
    </div>
  )
}

Start building with OnClaw

Let your users build the features they need. Set up once, empower forever.

$npm install onclaw

GitHub Read the Docs