Inspiration
AI tools are everywhere, but most demos are either “one big app” or a full workflow engine that’s hard to monetize cleanly. We wanted something more modular and realistic: small, reusable AI utilities you can actually sell like products. That led to Handi, a marketplace of individually callable AI blocks, built to showcase real billing, access control, and usage tracking end-to-end.
What it does
Handi is a modular AI block marketplace where users can: • Browse a catalog of AI-powered blocks (Summarize Text, Extract Emails, Classify Input, Rewrite Prompt, Merge PDFs). • Run blocks on demand with simple inputs and instant outputs. • Unlock paid blocks via checkout when they’re “locked.” • See a product-style experience: what’s free vs paid, what’s usage-based vs subscription-based, and what they have access to.
Instead of one monolithic AI app, Handi treats each block as a standalone product with its own monetization logic.
How we built it
• Frontend: Next.js 15 + TypeScript + Tailwind + ReactFlow + Zustand
• Block library UI (browse/run/unlock)
• Dashboard canvas (visual “blocks” experience)
• Profile area for usage/subscription concepts
• Backend: Express + TypeScript
• POST /api/run-block runs the selected block
• Entitlement checks before execution
• Usage recording for usage-priced blocks
• Checkout session creation for locked blocks
• Flowglad integration: Used as the billing + entitlement layer
• Products/prices per block
• checkFeatureAccess() gating
• Usage events for metered blocks
• Checkout sessions for unlocks
• AI: Claude (Anthropic) for the text-based blocks, with fallbacks to mock responses for demo mode
• Shared workspace: A shared package that defines block metadata (featureSlug, priceSlug, usageMeterSlug, inputs/outputs)
Challenges we ran into
Designing a clean “not-a-workflow-engine” experience: ReactFlow makes it easy to imply complex automation, but we had to keep the UX focused on individual callable tools instead of full pipelines. • Getting monetization logic to feel native: We wanted “locked/unlocked” to feel instant, not like a hacky paywall, while still being accurate to entitlement checks. • Coordinating slugs across systems: Feature slugs, price slugs, and usage meter slugs all need to match between code and billing configuration. • Building a strong demo mode: Hackathon demos need to work even without keys or perfect setup, so we created a toggleable path where blocks run without entitlements/usage tracking.
Accomplishments that we're proud of
• Built a real marketplace model for AI utilities, not just a single chatbot.
• Implemented a full “locked → checkout → unlocked → run” flow.
• Structured the project like something that could scale: shared block definitions, clean backend routes, and a clear separation of billing vs execution.
• Used Flowglad across the major surfaces that matter for a real product: products, pricing, entitlements, usage-based billing, checkout, subscriptions, invoices/webhook-ready architecture.
What we learned
• Treating AI features like products forces better product thinking: naming, pricing, access gating, and measurable value.
• “Usage-based” is the most intuitive business model for modular AI tools, but it requires disciplined logging and clear user feedback.
• Centralizing block definitions (inputs/outputs + billing slugs) prevents chaos as the catalog grows.
• Demos are won by reliability: having a clean DEMO_MODE made everything smoother.
What's next for Handi
• More blocks + categories: OCR, document cleaning, spreadsheet extraction, meeting notes, slide summarization, data labeling, etc.
• User-created blocks: let creators publish blocks, set pricing, and earn revenue.
• Better profiles + billing views: usage history per block, invoices, plan comparisons, upgrade paths.
• Teams/org billing: shared subscriptions and pooled usage limits for orgs.
• Production auth + persistence: Supabase auth, saved runs, stored outputs, and true customer identity mapping.
• Block quality loop: analytics to see which blocks convert, where users drop, and which inputs produce the best outputs.
Built With
- css
- flowglad
- javascript
- json
- next.js
- node.js
- react19
- reactflow
- supabase
- typescript
Log in or sign up for Devpost to join the conversation.