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

> The AI workspace that thinks with you

- Site: https://fabric.so
- Category: Productivity & AI Workspace
- Platforms: Web app, iOS app, Android app, Browser extension, CLI
- Verdict: **Serious undertaking** (38/100 vibecodeable)
- Estimated effort: 6-8 weeks of intense development

## Verdict

You can build a personal markdown workspace with vector search and AI chat in a few weeks, but replicating its 50+ enterprise integrations, infinite canvas, and background agent infrastructure is a massive engineering undertaking.

Fabric is an ambitious aggregation layer combining an infinite canvas, a vector memory engine, real-time collaboration, a Model Context Protocol server, and over 50 deep third-party OAuth connectors. While an AI coding agent can scaffold the Next.js frontend, Postgres database, and basic vector search via pgvector in a weekend, you will hit severe walls implementing reliable bi-directional API syncs for external services, real-time canvas conflict resolution, and autonomous scheduled agent runners. If your goal is a personal second brain, buy the subscription or build a severely stripped-down local markdown vault with OpenAI search. If you are building this for the challenge, expect weeks of wrestling with unglamorous OAuth token refreshes and background worker queues.

### What you can't replicate

- The full ecosystem of 50+ maintained bi-directional third-party API connectors
- Native enterprise security certifications (CASA Tier 2 compliance)
- Pooled institutional knowledge graph across active team workspaces

## What it does

Fabric is an AI-powered personal and team workspace that aggregates files, notes, web bookmarks, code snippets, and meeting recordings into a centralized platform connected via a semantic knowledge graph.

### Core features

- Cross-modal semantic search (text, video transcripts, images, color palettes)
- Infinite canvas and collaborative markdown editor
- Multi-model AI aggregator (switching between OpenAI, Anthropic, Gemini, etc.)
- Multi-source ingestion and background sync connectors
- Autonomous background AI agents and scheduled jobs
- Meeting recorder with automatic speech-to-text transcription
- Model Context Protocol (MCP) server for external AI coding tools
- Web clipper browser extension for instant annotation and bookmarking

## The business

### Pricing

- Plus: $8/mo
- Pro: $18/mo
- Max: $54/mo
- Teams: $16/user/mo

Founded 2023.
Team size: 11-50.

## The hard parts

- Building robust bi-directional OAuth sync queues for 50+ third-party APIs without hitting severe rate limits
- Cross-modal vector embedding pipeline handling audio, images, and documents with visual/color resemblance indexing
- Real-time collaborative markdown editor and infinite canvas synchronization
- Model Context Protocol (MCP) security layer and persistent execution environment for scheduled AI agents

## How to vibe code Fabric

### Prerequisites

- Node.js (free): Required runtime for running the Next.js full-stack application and build tools.
- GitHub (free): Source code repository and CI/CD deployment pipeline.
- Anthropic API Key (Pay-as-you-go): Required for powering the AI assistant, document synthesis, and semantic extraction features.

### Recommended AI tools

- Claude Code: Best-in-class terminal coding agent for scaffolding multi-file Next.js apps, writing vector search pipelines, and debugging backend sync queues.
- Cursor: Ideal for fine-tuning the UI components, markdown editor interactions, and tailwind styling with inline diff reviews.

### Stack

- Frontend: Next.js with Tailwind CSS and shadcn/ui
- Backend: Next.js Server Actions and API Routes
- Database: Supabase (Postgres + pgvector for semantic search)
- Auth: better-auth
- Payments: Stripe
- Other: Liveblocks for collaborative canvas and presence, OpenRouter for multi-model AI routing, Resend for transactional emails

### Hosting

- Vercel (Hosting the Next.js frontend, server actions, and API endpoints with zero-config deploys from GitHub.): $0-20/mo
- Supabase (Managed Postgres database, vector storage using pgvector, and user authentication tables.): $0-25/mo

### Build guide

1. **Project Scaffolding & Database Schema** — Initialize the Next.js project with Tailwind CSS, TypeScript, and set up the Supabase Postgres database with pgvector extensions for storing documents and vector embeddings.

```
Create a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up a Supabase client connection and write SQL migration scripts to create tables for `documents` (id, user_id, title, content, type, metadata, created_at), `embeddings` (id, document_id, vector vector(1536)), and `tags`. Ensure pgvector extension is enabled in Supabase and create an IVFFlat or HNSW index on the embeddings table for fast similarity search.
```

2. **Authentication & User Management** — Implement authentication using better-auth integrated with the Supabase PostgreSQL database.

```
Configure better-auth in the Next.js application using the Supabase Postgres adapter. Set up email/password sign-in, Google OAuth provider, and protected route middleware to secure dashboard views. Create a user profile onboarding flow that writes user records to the database upon first login.
```

3. **Document Ingestion & Vector Pipeline** — Build file upload and URL clipping capabilities that chunk content, generate embeddings via OpenAI/Anthropic APIs, and store them for semantic search.

```
Implement a document ingestion API route in Next.js that accepts uploaded PDFs, markdown files, or raw URLs. Use an extraction utility to parse text content, split the text into semantic chunks, call the OpenAI embeddings API (`text-embedding-3-small`), and insert both the document record and vector chunks into Supabase. Write a search function that queries vector chunks using cosine distance matching.
```

4. **Semantic Search & AI Assistant Interface** — Build the command bar and chat interface allowing users to search by meaning and query their personal knowledge base using multiple LLM models.

```
Build a command palette and search interface in React that triggers semantic searches across stored documents using the vector search endpoint. Create an AI assistant chat panel that retrieves relevant document chunks via RAG (Retrieval-Augmented Generation), constructs system prompts with user context, and streams responses from OpenRouter or Anthropic APIs.
```

5. **Infinite Canvas & Markdown Editor** — Integrate a minimal markdown editor and a canvas surface for visual note organization.

```
Implement a rich markdown editor component using TipTap or Milkdown within a draggable infinite canvas workspace. Allow users to create floating note cards, connect them with directional links, and persist canvas node positions and bounds to Supabase storage.
```

6. **Background Agents & Scheduled Jobs** — Set up background worker jobs to process recurring summaries and simulated agent routines.

```
Implement background scheduled jobs using Vercel Cron or Inngest to scan user document updates daily, generate automated email summaries (Recaps) using LLMs, and dispatch them via Resend. Create a dashboard UI for configuring custom agent routines.
```

### Cost vs paying

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

- AI Coding Assistant Subscriptions (Claude/Cursor): $40
- Total: ~$40 one-time

**Ongoing costs (monthly):**

- Supabase Pro (Recommended for vector scale): $25/mo
- AI API Usage (Anthropic/OpenAI/OpenRouter): $15/mo
- Total: ~$40/mo

- Paying for the SaaS instead: $18/mo (Pro Plan)
- Build time: 60-80 hours
- AI tool credits: $40 for Claude/Cursor Pro
- Break-even: Never (paying $18/mo for Fabric is far cheaper than spending 80 hours and $40/mo in infrastructure/API fees)

## Sources

- [Fabric Website & Product Pages](https://fabric.so)
- [Medium - Fabric.so: The Small AI Startup Quietly Building a Second Brain](https://medium.com)