Inspiration
The idea for Liftoff originated from Rokkit200 co-founder Gareth Kropman and a very ordinary problem he was facing: a small-business owner losing an hour a day stitching together tools he already had. Custom GPTs knew his sales pipeline, product frameworks, and pricing logic. Other bots produced LinkedIn content and banner art. Gmail nudged him about follow-ups. Everything worked, but nothing was connected, nothing cohesive. Every day he had to remember to copy content out of one system and paste it into another, and every day client calls interrupted him mid-post.
He tried the "real" answer: Microsoft Dynamics 365 lasted a day or two before he gave up. The pattern he suspected is that most small businesses either abandon a serious CRM or fall back to a spreadsheet-shaped one, and neither option turns marketing into sales without human glue. He wanted to "click one button." No Hermes setup, no admin panel, no state-machine diagramming session with a consultant. Just a chat with something that knows the business, and a pipeline that runs itself between conversations.
That framing became Liftoff: an AI-powered CRM you talk to, not one you configure.
What it does
Liftoff is a chat-first CRM for small businesses. Instead of just a settings surface, the user has a conversation with an AI assistant that runs their sales and marketing pipeline end-to-end.
Core surfaces built
- AI-guided onboarding: the user's first interaction is a chat that discovers target audience, channels, cadence, and brand voice, then writes it back to the business profile.
- Chat panel, everywhere: a persistent AI Elements assistant lives inside the app shell. Every screen has the same assistant, powered by streaming markdown, with approval-gated tools for anything that mutates data.
- Leads pipeline with drag-and-drop swimlanes: a Kanban board over the lead state machine, wired to real server actions.
- Campaigns and campaign assets, with dedicated compose-and-author tools per channel: Instagram, Facebook, LinkedIn, WhatsApp, and Email. Each renders as its own confirmation card in the chat, respecting the character-count and formatting quirks of the target platform.
- Actions: the assistant can propose actions (reminders, follow-ups, next steps) that a user approves or dismisses from either the chat or the Actions screen.
- Offers, dashboard, business profile: all rendered from live data, all editable by tools.
- Paystack billing: full subscription lifecycle, including schema, sync foundation, webhook + replay + fixtures, client wrapper, server actions, auth gate, callbacks, pricing page, and renewal handling with atomic conditional updates.
- AI usage tracking: every inference call is metered against a per-workspace budget with cost fields and rate tracking for controlling margin.
The whole product uses two identities in tension by design. Clerk holds the client-visible identity; Supabase holds a surrogate UUID the client never sees. Right-to-be-forgotten works because nothing on the browser side ever holds the real primary key.
How we built it
Stack
- Next.js 16 App Router, React 19, TypeScript strict
- Tailwind v4 CSS-first
- shadcn on @base-ui/react
- Clerk for identity, Supabase (Postgres) + Drizzle ORM for data, RLS as the security boundary
- AI SDK v7 (ai, @ai-sdk/react) with Google Vertex as the inference backend, Streamdown for streaming markdown
- TanStack Query on the client, dnd-kit for the pipeline board
- Paystack for billing, Cloudflare (opennext) for deploy
- Vendored components/ai-elements/ treated like components/ui/ and edited in place
Timeline
- 2026-06-18: first commit, "Adding shadcn base with nova"
- 2026-06-24 → 30: design system, service scaffolding, Clerk + Supabase wiring, initial prototype
- 2026-07-07 → 09: AI SDK chat streaming with tool approvals, DB schema, Cloudflare deployment
- 2026-07-10 → 22: server actions across every domain (actions, offers, campaigns, campaign assets, pipeline, leads, global, dashboard, AI) rolled out in a single feature blitz, Paystack schema + webhooks landed in parallel
- 2026-07-23 → 31: the tool layer: Ask Questions, date/time, leads, campaigns, campaign assets, offers, actions, then platform-specific asset composers for Instagram, Facebook, LinkedIn, WhatsApp
- 2026-08-04 → 12: polish and integration bugs (sidebar counters, escape-character rendering, pipeline drop-back, Actions tab counts), then pricing page + FAQ, then dev→main release
Delivery cadence: 65 merged PRs across ~8 weeks, four human contributors, with GitHub Copilot as an assistant reviewer.
Working method
The Kanban board was the source of truth. Tickets were written in enough detail to feed directly into Claude Code, and Claude did the drafting. Nicole and Danielle's canonical moment: they took a Figma design output, fed it straight to the AI, and got a working implementation with mock data on the first pass. The team's CLAUDE.md and AGENTS.md codified the non-obvious rules (Next.js 16 breaking changes, the Clerk-id-vs-uuid boundary, Drizzle snapshot drift, middleware.ts not proxy.ts) so the AI would stop rediscovering them each session.
Challenges we ran into
The PR bottleneck
Reviews were the single biggest source of friction. Back-and-forth caused merge conflicts, PRs stacked on unseen dependencies, and Copilot's inline comments sometimes arrived slowly enough that a whole cycle stalled. We experimented with AI-generated risk labels (high/critical) but they created confusion about who was supposed to review. Eventually we dropped the strictness.
Duplicate confirmation cards
Approval-gated tools were streaming into brand-new assistant messages instead of merging back into the existing one, producing a duplicate card next to the original. The bug only surfaced after a tool approval, so it was invisible on fresh turns. The fix (passing originalMessages to createUIMessageStream) was called out in AGENTS.md so no future caller reintroduces it.
Definition of done was implicit, not explicit
Ticket wording implied acceptance criteria, but "implied" wasn't tight enough for AI-assisted implementation; Claude/Copilot would technically complete a ticket and still miss the intent. The team's retro conclusion was to make definition-of-done explicit and to trim the template that felt overwrought.
Token limits, not model quality
Once the accelerated dev pattern hit stride, output quality was rarely the bottleneck; context window was. Long agent runs were more likely to run out of tokens than to produce bad code.
Cloudflare + Next.js 16
Deployment succeeded and the free preview links were a genuine boon, but Next.js 16 on Cloudflare isn't quite first-class yet: for compatibility with opennext, we had to keep the routing convention at middleware.ts even though Next 16 renamed it. That's the kind of decision that only shows up when you try to ship, and it took tedious trial and error to resolve.
Accomplishments we're proud of
A working, chat-first CRM in ~8 weeks
Well over 100 completed Kanban cards, 65 chunky PRs merged, full auth, billing, RLS, streaming AI, five platform-specific asset composers, and a live Cloudflare deploy, all on an unfamiliar frontier.
A defensible identity boundary
No workspace UUID ever crosses to the client. Cache keys use the Clerk id, requireWorkspace() gates every domain action server-side, and RLS in Postgres is the actual security boundary, not app code.
AI-accelerated development that actually accelerated
Nicole and Danielle's Figma-to-implementation demo, tickets that fed directly into Claude, and reusable AGENTS.md files that let the team solve a domain once and then move fast.
Approval-gated tools done properly
The full AI SDK v7 flow with sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses, correctly-threaded message ids, and per-channel compose tools that respect Instagram's character limits, WhatsApp's markdown rules, and LinkedIn's formatting.
What we learned
- Nestable agent files are a compounding asset. Solve a domain once, document it clearly in an AGENTS.md, and every future AI session in that area gets faster and more correct. This is the single practice we're carrying into everything we build next.
- Kanban-first works with AI. When the ticket is detailed enough, Claude can implement it. When it isn't, the AI produces something plausible that misses the point and leads to thrash. The rate-limiting resource on an AI-native team isn't just AI; it's also ticket clarity.
- PR review order matters. The team's forward plan is to have Copilot review first and resolve all low-hanging comments before human review, so humans aren't double-commenting on the same lint-shaped issues or letting Copilot comments drag.
- Domain isolation reduces friction. Assigning one domain per developer would have cut merge conflicts and stacked PRs. The tradeoff is less cross-stack exposure: a real cost, but a manageable one.
- Some auth choices are worth revisiting. Clerk did the job, but we flagged Auth0 as potentially swappable if we hit a wall on customization or pricing.
- Design-to-code is now genuinely fast. The Figma → AI → working screen loop is short enough that it changes how much upfront design matters, potentially even cutting out Figma, with Claude Design/OpenDesign becoming more and more capable.
What's next
The MVP proves the loop; the roadmap is about making the pipeline genuinely run itself.
Delivering the core promise
- Connections at scale: solving the "connections" problem Gareth flagged in the original conversation, with OAuth to LinkedIn, Facebook, Instagram, and WhatsApp, so users don't have to hand over credentials or file uploads. Until then, the MVP fallback (output copy, images, and HTML for manual posting) is a real user-facing feature, not a shortcoming.
- Two-way channel sync: once OAuth lands, ingest replies, DMs, and comments back into the pipeline so an inbound message auto-creates or advances a lead, closing the loop from post to conversation to sale.
- Between-session autonomy: the assistant does real work while the user is away, drafting the week's content, queuing follow-ups, and flagging stalled leads, then handing it back as a digest to approve. This is the tagline made literal.
- Proactive insights: turn the pipeline and AI-usage data we already meter into recommendations ("your LinkedIn posts convert 3× better than Instagram. Want to shift cadence?"), so the assistant advises rather than only executing.
Expanding the product
- Content calendar and scheduling: plan and schedule a week across channels at once instead of one post at a time, so client calls stop interrupting the work mid-post.
- Lead enrichment: pull public company and role context to personalise outreach automatically.
- Vertical onboarding templates: preloaded playbooks for coaches, agencies, real-estate agents, and the like, so the onboarding chat starts from a warmer default.
Scaling the platform
- Team workspaces: move beyond org-of-one to multi-user workspaces with roles; the RLS boundary is already in place, so this is a natural next step.
- Broader billing: expand past ZAR-only to more currencies (and, if needed, a second processor) to open markets beyond South Africa.
- Agent eval and tracing: an evaluation and observability layer to keep long agent runs reliable as features grow, a direct response to the "token limits, not model quality" lesson.
Hardening the prototype
- Smooth the rough edges of the rapid hackathon prototype.
- Dogfood Liftoff on Rokkit200's own sales pipeline.
Built With
- ai-elements
- ai-sdk
- base44
- claude
- claude-design
- clerk
- cloudflare
- coda
- copilot
- drizzle
- figma
- github
- google-vertex
- next.js
- paystack
- postgresql
- postman
- react
- shadcn
- sql
- supabase
- superhumandocs
- tanstack
- typescript
Log in or sign up for Devpost to join the conversation.