How to vibe codeSmartSuite

Prerequisites

• Node.jsfree

  Required runtime for executing the Next.js and TypeScript project stack.

• GitHubfree

  Version control repository host for tracking iterations and deploying code.

AI coding tools

• Claude Code

  Unmatched agentic capacity for scaffolding complex multi-file full-stack database architectures and debugging relational query trees.

• Cursor

  Exceptional code editor for fine-tuning complex React UI components, grid views, and form field renderers with live diff reviews.

Build guide

1. 01Project Scaffolding & Database Schema Initialization

   Initialize the Next.js project with Tailwind CSS, configure Prisma ORM with Neon Postgres, and establish the foundational database models for Workspaces, Solutions, Tables, Fields, and Records.

   Create a new Next.js project using the App Router, TypeScript, and Tailwind CSS. Initialize Prisma with a Neon PostgreSQL connection string. Design a robust relational schema for a Work OS clone: Workspace (id, name), Solution (id, workspaceId, name), TableModel (id, solutionId, name), FieldDefinition (id, tableId, name, type [text, number, select, date, relation], options [JSON]), and Record (id, tableId, data [JSON holding key-value pairs of field IDs to values]). Include proper foreign key constraints, indexes on tableId and workspaceId, and seed a default workspace with sample tables via a migration script. Ensure clean separation of concerns across lib and components directories.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Workspace Management Setup

   Implement authentication using better-auth, connecting user sessions to the database and ensuring users can create and manage distinct workspaces.

   Integrate better-auth into the Next.js application supporting email/password and session cookie management. Create user and member tables in Prisma matching better-auth specifications. Build an onboarding and workspace selection flow that automatically provisions a default personal workspace upon first login. Add middleware to protect dashboard routes and inject the active workspace context into request headers. Create clean login, registration, and account settings screens styled with Tailwind and shadcn/ui components.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Dynamic Grid View & Relational Record Editor

   Build an interactive spreadsheet-style grid view supporting dynamic column types, inline cell editing, sorting, filtering, and pagination.

   Develop a feature-rich Grid View component in React that renders records dynamically based on table FieldDefinitions. Implement virtualized or paginated table rendering supporting text, number, select badges, and date picker inputs. Add inline editing capabilities that update record JSON data via Server Actions with optimistic UI updates. Include sorting by column header, filtering by field values, and a modal for creating new records with custom-rendered inputs according to field types.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Kanban, Card Views, and Dashboard Widgets

   Implement alternative layout views including a Kanban board grouped by status select fields and summary dashboard metric widgets.

   Build a Kanban View component that allows users to group records by any 'select' or 'status' field type. Implement drag-and-drop or status-dropdown updates to move cards between columns, triggering immediate backend updates. Create a Dashboard view featuring customizable metric widgets (record counts, sum totals, progress trackers) querying solution data in real time. Ensure seamless switching between Grid View and Kanban View within any solution table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Workflow Automation Engine

   Create a visual and backend execution engine for simple trigger-action workflow automations within solutions.

   Build a workflow automation engine supporting event triggers (e.g., 'When Record Created' or 'When Status Changes to X') and execution actions (e.g., 'Send Email' or 'Update Field'). Create database models for Automations (id, solutionId, triggerType, conditions [JSON], actionType, actionConfig [JSON]). Implement a background execution handler called via API routes or Server Actions whenever a record is modified, evaluating conditions and executing the configured action using Resend for email notifications and Prisma for record updates.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06AI Field Copilot & Natural Language Assistant

   Integrate the Vercel AI SDK and Anthropic API to provide AI field summarization and natural language record generation helpers.

   Integrate the Vercel AI SDK into the application using Anthropic Claude models. Build an API route for an 'AI Field Assistant' that can summarize text record fields, classify incoming request descriptions, or generate draft responses based on record context. Add a floating AI Copilot chat drawer to the solution interface that can answer questions about the current table records, filter rows via natural language prompts, and execute database queries safely.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for SmartSuite