# How to Vibe Code Your Own Featurebase (and Stop Paying for It)

> Modern customer support & feedback platform

- Site: https://featurebase.app
- Category: SaaS / Customer Support & Feedback
- Verdict: **Solid side project** (62/100 vibecodeable)
- Estimated effort: 3-4 weeks of focused development

## Verdict

You can build a functional personal clone of Featurebase's core modules, but the omnichannel inbox synchronization and AI RAG pipeline require rigorous multi-system wiring.

Featurebase combines five distinct products into one suite: a help desk, a feedback board, a roadmap, a changelog, and a help center. While building each CRUD module individually is straightforward with AI coding tools, orchestrating the real-time websocket chat streams, configuring robust RAG vector search for the AI agent, and embedding cross-origin widgets without layout shifts will expose painful edge cases in state management and security headers.

### What you can't replicate

- The proprietary customer install base of embeddable widgets across third-party apps
- Native mobile apps with real-time APNs push notification infrastructure
- Certified SOC 2 and GDPR enterprise compliance posture

## What it does

All-in-one customer support and product feedback platform consolidating omnichannel support, AI agents, feedback portals, roadmaps, and changelogs.

### Core features

- Omnichannel support inbox (live chat, email parsing)
- AI support agent (RAG-powered knowledge base lookup)
- Feedback portal with voting and comments
- Visual product roadmap synced with development boards
- Public changelog and in-app release notes widget
- Help Center with AI search answers and Notion-like editor

## The business

### Pricing

- Free: Free — For individuals to get started
- Growth: $29/seat/month — For fast-growing startups
- Professional: $59/seat/month — For scaling & multi-team orgs
- Enterprise: $99/seat/month — For large organizations

Founded 2020.
Team size: Small lean team (~3 founders).

## The hard parts

- Synchronizing real-time bi-directional messaging streams (chat widgets, email threads, live socket connections)
- Building a reliable RAG pipeline for the AI support agent over dynamic knowledge base articles with accurate prompt context
- Developing a lightweight, secure cross-origin embeddable JavaScript widget that renders cleanly in third-party web apps without style leaks

## How to vibe code Featurebase

### Prerequisites

- Node.js (free): Required runtime for modern full-stack TypeScript frameworks.
- GitHub (free): Repository hosting and version control for AI coding workflows.
- Cursor (Free tier / $20/mo): AI-native code editor for reviewing and refining multi-file UI components.

### Recommended AI tools

- Claude Code: Best-in-class terminal agent for scaffolding complex multi-table schemas and backend services.
- Cursor: Ideal for iterative frontend component development and reviewing UI diffs.

### Stack

- Frontend: Next.js with Tailwind CSS and shadcn/ui
- Backend: Next.js App Router API routes & Server Actions
- Database: Neon (Serverless Postgres with pgvector)
- Auth: better-auth
- Payments: None (Personal clone)
- Other: Resend for transactional emails, Anthropic API for Fibi AI support agent

### Hosting

- Vercel (Hosting the Next.js frontend, API routes, and embeddable widgets): $0-20/mo
- Neon (Serverless Postgres database storing support tickets, feedback, and vector embeddings): $0/mo

### Build guide

1. **Database Schema & Authentication Setup** — Initialize a Next.js project with Tailwind CSS, configure better-auth with Postgres via Neon, and set up the core relational schema for users, workspaces, tickets, feedback posts, roadmap columns, and help articles.

```
Create a new Next.js TypeScript project with Tailwind CSS. Set up better-auth connected to a Neon Postgres database using Drizzle ORM. Define database schemas for: workspaces, users, tickets (with status, priority, channel), feedback_posts (with vote count and category), roadmap_items (linked to feedback), help_articles (with markdown content and vector embedding column for RAG), and changelogs. Implement secure multi-tenant isolation by workspace ID across all tables.
```

2. **Omnichannel Unified Support Inbox** — Build the support agent dashboard with real-time ticket triage, conversation threading, internal notes, status assignment, and filtering by customer revenue or priority.

```
Build the support agent inbox interface using Tailwind CSS and shadcn/ui. Create a master-detail layout listing tickets with filters for status (open, pending, resolved), assignee, and priority. Implement real-time conversation threading with message bubbles for user queries and agent replies, support for internal private notes visible only to team members, and a sidebar showing mock customer metadata and lifetime value.
```

3. **AI Support Agent & Knowledge Base RAG Pipeline** — Implement the RAG-powered AI agent ('Fibi AI') that searches help center articles using pgvector embeddings and automatically drafts or resolves customer inquiries.

```
Implement an AI support agent API route using the Anthropic API and pgvector in Neon. When a customer submits a new ticket or live chat message, generate an embedding of the query, perform a similarity search against help_articles table chunks, and prompt Claude to generate an accurate response grounded strictly in the documentation. Include a confidence score and human-hand-off trigger if the confidence is low.
```

4. **Feedback Portal & Voting System** — Build the public feedback board where users can submit feature requests, upvote ideas, add comments, and filter by status.

```
Create a feedback portal module allowing authenticated users to submit feature requests with a title, description, and category tag. Implement an upvoting mechanism with optimistic UI updates that prevents duplicate votes per user. Add sorting options for trending, top-voted, and most recent ideas, along with a comment thread section for each post.
```

5. **Visual Product Roadmaps & Changelog Publishing** — Build a kanban-style roadmap board synchronized with feedback statuses and a changelog publishing interface for release notes.

```
Build a visual kanban product roadmap board with columns for 'Planned', 'In Progress', and 'Complete' that syncs directly with feedback posts and roadmap items. Build a companion changelog publishing tool with a rich-text editor that allows admins to publish release notes to a public feed and trigger automated email notifications to upvoted users.
```

6. **Embeddable Widget SDK** — Develop a lightweight, embeddable JavaScript widget script that mounts a chat launcher, help center search bar, and feedback tab on external sites.

```
Build a standalone embeddable JavaScript widget bundle using React and iframe encapsulation that third-party sites can load via a single script tag. The widget must render a floating launcher button in the bottom right corner, opening a modal drawer with tabs for live chat, instant help center search, and quick feature request submission, communicating securely via postMessage with the main Next.js backend.
```

### Cost vs paying

**Starting costs (one-time):**

- Domain registration: $12/yr
- Total: ~$12 one-time

**Ongoing costs (monthly):**

- Vercel Hobby / Pro: $0-20/mo
- Neon Postgres: $0/mo
- Anthropic API usage: ~$5/mo
- Total: ~$10-25/mo

- Paying for the SaaS instead: $59/seat/mo (Professional)
- Build time: 45-60 hours
- AI tool credits: $20/mo (Cursor/Claude)
- Break-even: Instant if replacing multiple support and feedback subscriptions for personal projects

## Sources

- [Featurebase Homepage](https://featurebase.app)
- [Featurebase Pricing](https://featurebase.app/pricing)
- [Featurebase Support Features](https://featurebase.app/features/support)