How to vibe codeAnimam.ai

Prerequisites

• Node.jsfree

  Required runtime for Next.js 16 and backend TypeScript services

• GitHubfree

  Source control and seamless deployment integration

• Anthropic API KeyPay-as-you-go (~$10-20/mo)

  Provides Claude model access for agent responses and tool calling

AI coding tools

• Claude Code

  Best-in-class multi-file terminal agent for scaffolding complex full-stack apps and MCP servers

• Cursor

  Ideal for iterative UI work on the chat widget, dashboard components, and inline diff reviews

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js 16 project with Tailwind CSS and configure Turso with libSQL for relational tables and vector embeddings.

   Scaffold a new Next.js 16 application using App Router, TypeScript, and Tailwind CSS. Set up Drizzle ORM connected to a Turso libSQL database. Create database migrations and schema definitions for: `tenants` (id, slug, name, url, settings), `corpus_entries` (id, tenant_id, content, embedding vector), `conversations` (id, tenant_id, visitor_email, status, summary), and `messages` (id, conversation_id, role, content, tool_executions). Ensure all tables include proper foreign keys, indexing on tenant slugs, and timestamp fields. Add a seed script with mock tenant data to verify local connectivity.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02URL Scraping & Corpus Ingestion Pipeline

   Build an ingestion engine that accepts a public URL, scrapes its content using Firecrawl, chunks the text, generates vector embeddings, and stores them in the corpus.

   Implement a backend service in `lib/ingest.ts` that takes a target URL and a tenant ID. Integrate Firecrawl API (or a robust fetch-and-turndown fallback) to scrape public web pages, extract clean markdown, chunk the text into 500-character segments, generate vector embeddings using Anthropic or local lightweight models, and insert them into the `corpus_entries` table. Expose a POST `/api/tenants/[slug]/corpus` endpoint that triggers this ingestion pipeline and returns the count of ingested corpus entries.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Chatbot Core Loop & Server-Side Quote Engine

   Implement the conversational chat endpoint with RAG retrieval over the corpus and strict server-side arithmetic guards for quote calculation.

   Build the chat execution engine at POST `/api/tenants/[slug]/chat`. The endpoint must receive a visitor message, perform a vector similarity search against `corpus_entries` to retrieve relevant context, and prompt Claude Haiku with system instructions defining the bot's persona. Implement tool-calling for quotes where the LLM only outputs quote parameters (e.g., item quantities, tier selections), while a deterministic backend math function in `lib/pricing.ts` executes the arithmetic against the tenant's price grid. Return a structured JSON envelope containing the message, toolExecutions array, and token usage statistics.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Embeddable Widget & Frontend Chat UI

   Create a lightweight, embeddable chat widget script and React component that can be dropped onto any external website via a single script tag.

   Create an embeddable chat widget component in React that communicates with the chat API via Server-Sent Events or streaming JSON responses. Build an entry point script bundle (`public/widget.js`) that injects a floating chat bubble iframe into host websites, passing the tenant slug via data attributes. Style the widget with a clean, responsive Tailwind UI supporting dark/light mode, lead capture forms (email/name), meeting booking widgets, and Stripe payment link rendering inside the conversation flow.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Model Context Protocol (MCP) Server Endpoint

   Expose a public Model Context Protocol (MCP) Streamable HTTP server endpoint so AI coding assistants can programmatically query and manage agents.

   Implement an MCP Streamable HTTP server endpoint at `/api/mcp` supporting tools: `try_on_site(url)`, `chat_with_demo(slug, message)`, `get_plans()`, `create_corpus(slug, content)`, and `list_conversations(slug)`. Ensure the endpoint adheres strictly to the Model Context Protocol specification over HTTP without requiring initial authentication for public demo actions, while returning structured JSON-RPC responses that AI agents like Claude or Cursor can execute autonomously.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Fleet Management & Verified Actions Webhooks

   Add multi-tenant fleet propagation for agencies and secure backend webhooks with SSRF guards for verified actions.

   Implement agency fleet management features allowing parent accounts to define tools and propagate them across child tenant bots with cascade reporting (created, updated, skipped, detached). Build the verified action webhook dispatcher in `lib/actions.ts`: before posting visitor data and verified emails to a tenant's registered endpoint, perform rigorous URL validation (resolving DNS, rejecting private IP ranges and internal network loops) and encrypt stored secrets at rest using AES-256.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Animam.ai