How its-ansh-jha/infonexvibecode works
1. Overall shape
- This repo is a full-stack TypeScript app with a clear split between a React/Vite frontend (client/) and an Express backend (server/).
- The main product is an AI-driven app-building workspace: users chat with an agent, create projects, edit files, run code, preview apps, and manage billing.
2. Frontend shell and navigation
- The client is a single-page React app (client/src/main.tsx, App.tsx) using Wouter routing, TanStack Query, and a large set of Shadcn UI components.
- The UI is organized around workspace-style pages such as chat, projects, files, terminal, preview, create, features, login, and billing.
- Layout is responsive: desktop sidebar plus mobile bottom navigation, with theme state handled by ThemeContext.
3. Workspace interaction model
- The main user flow is: authenticate → choose or create a project → interact in chat → inspect files/terminal/preview.
- ChatPage, FilesPage, TerminalPage, and PreviewPage form the core operational surface of the product.
- Hooks like useAuth, usePlan, and useAgentBusy coordinate UI state with backend capabilities and plan limits.
4. Backend API boundary
- The server is an Express app (server/index.ts, server/routes.ts) that exposes the app’s API and also serves SSR SEO pages and Vite assets.
- server/middleware/auth.ts protects authenticated routes.
- The backend owns business logic for projects, chat streaming, file storage, billing, and AI/tool orchestration.
5. Data model and persistence
- PostgreSQL is the primary database, accessed through Drizzle (drizzle.config.ts, shared/schema.ts, server/db.ts).
- shared/schema.ts acts as the contract between client and server for core entities such as plans, subscriptions, payments, projects, and messages.
- The shared/models/ folder suggests additional shared domain types for chat workflows.
6. Authentication and identity
- Firebase Authentication is used on the client, with server-side verification through server/lib/firebaseAdmin.ts.
- The auth boundary is important: the frontend handles sign-in UX, while the backend trusts only verified Firebase identity tokens for protected API access.
- This separation keeps user sessions and data access consistent across chat, projects, billing, and file operations.
7. AI agent and tool orchestration
- The backend integrates with Replit AI / Anthropic via server/lib/gemini.ts and related AI tooling, using structured tool calls rather than free-form JSON parsing.
- The agent can call tools for file operations, shell execution, code analysis, search, verification, and project scaffolding.
- server/mcp/server.ts indicates an MCP-compatible tool server layer, which is likely how the AI agent gets access to repo-aware actions.
8. Code execution and live development
- Code runs in isolated E2B sandboxes (server/lib/e2b.ts) rather than on the host machine.
- The platform supports long-running processes, interactive terminal behavior, heartbeat keep-alives, and live preview/hot reload flows.
- This is the main execution boundary: the backend controls sandbox lifecycle, while the client only sees terminal output, preview results, and status.
9. Project/file storage and binary assets
- Source files are stored in PostgreSQL now; the repo includes a migration path from S3 (server/lib/migrateS3ToDb.ts).
- S3 is retained only for binary uploads like images or attachments (server/lib/s3.ts), served back through authenticated routes.
- server/lib/envFile.ts, boilerplate.ts, parseTools.ts, and secretsRequests.ts support project setup, config parsing, and secret handling.
10. Billing and plan enforcement
- Freemium billing is backed by Cashfree (server/lib/cashfree.ts) and persisted in subscriptions and payments tables.
- Plan limits are enforced server-side before AI usage and project creation, not just in the UI.
- The client billing page shows quotas, usage, and payment history; the chat UX also surfaces upgrade prompts when credits are exhausted.
11. SEO and public marketing pages
- The server renders SEO-friendly pages for bots via server/seo/* and server/seo/ssrShell.ts.
- Public content includes landing, about, glossary, and guides, plus robots.txt and sitemap.xml.
- Regular users still get the React app, so this is a hybrid SSR-for-bots / SPA-for-users setup.
12. Supporting integrations and utilities
- server/lib/serper.ts adds web search, while server/lib/bedrock.ts and server/lib/gemini.ts suggest multiple AI provider adapters or helper layers.
- server/lib/viteConfigSync.ts and server/templates/ support generated projects and environment alignment.
- The .agents/skills/mcp-builder/ folder is tooling for building or evaluating MCP skills, not part of the runtime product path, but it reinforces the repo’s tool-driven architecture.
13. Key data flow to diagram
- Browser → authenticated React UI → Express API.
- Express API → PostgreSQL for app state, Firebase Admin for auth verification, Cashfree for billing, E2B for execution, S3/local uploads for binaries, and AI/search services for agent actions.
- AI loop → tool calls → file/terminal/project side effects → streamed back to client via SSE-style real-time responses.
14. Important architectural boundary
- The system’s main trust boundary is the backend: it owns auth verification, credit checks, sandbox control, billing, and all writes.
- The client is a thin interactive shell for workspace actions; it does not directly manipulate core data stores or execution environments.
Main entry points: routes.ts Routes · chat Chat workflow · main.tsx App shell · index.ts API server
Components 22
Client
React/Vite workspace shell and pages
- App shell · Client entry, routing, and top-level composition
client/src/main.tsx - Workspace pages · Chat, projects, files, terminal, preview, create, billing, login, and landing
client/src/pages - Nav chrome · Sidebar, mobile navigation, and workspace framing
client/src/components - Client state · Auth, theme, plan, busy-state, and query coordination
client/src/contexts
Server
Express API, orchestration, SSR, and persistence
- API server · HTTP entrypoint, API hosting, and asset serving
server/index.ts - Routes · Main API surface and request dispatch
server/routes.ts - Auth guard · Authenticated route protection and identity enforcement
server/middleware/auth.ts - Postgres · Primary persistence for app state and workflow data
server/db.ts - Chat workflow · Streaming chat, tool calls, and workspace actions
server/replit_integrations/chat - Project storage · Project files, uploads, and persisted workspace state
server/storage.ts - Billing · Plans, subscriptions, payments, and quota checks
server/lib/cashfree.ts - Sandbox runtime · Isolated code execution, terminals, and previews
server/lib/e2b.ts - AI adapters · Model access, tool parsing, and orchestration helpers
server/lib/gemini.ts - SEO pages · Server-rendered marketing and discovery pages
server/seo/ssrShell.ts - MCP server · Structured tool surface for agent actions
server/mcp/server.ts
Shared
Cross-boundary contracts and domain models
- Data schema · Core entities shared by client and server
shared/schema.ts - Chat models · Additional domain models for chat workflows
shared/models/chat.ts
Integrations
External services and platform adapters
- Firebase client · Browser-side sign-in and identity handling
client/src/lib/firebase.ts - Search tools · External search integration for agent assistance
server/lib/serper.ts - Firebase Admin · Server-side token verification and trusted identity checks
server/lib/firebaseAdmin.ts - Binary assets · Binary uploads and attachment retrieval
server/lib/s3.ts - Cashfree · External billing provider for subscriptions and payments
server/lib/cashfree.ts
Connections 23
- App shell → Workspace pages: routes to · SPA navigation selects workspace and public pages
- App shell → Nav chrome: composes · Top-level app renders navigation chrome
- App shell → Client state: wraps with · App provides auth, theme, and query state
- Client state → Firebase client: uses · Browser auth state comes from Firebase
- Workspace pages → Routes: calls API · Workspace pages fetch projects, chat, files, billing, and previews
- API server → Routes: mounts · Express entry delegates to route handlers
- Routes → Auth guard: protects · Authenticated endpoints verify access
- Routes → Postgres: reads/writes · Business state is persisted in Postgres
- Routes → Data schema: uses contract · API payloads align with shared entities
- Routes → Chat models: uses · Chat workflow types cross the boundary
- Routes → Chat workflow: streams · Chat endpoint drives agent interaction and tool execution
- Routes → Project storage: manages · Project files and uploads are handled by storage layer
- Routes → Billing: enforces · Plan checks and payment state gate premium actions
- Chat workflow → AI adapters: invokes · Agent orchestration uses model and tool helpers
- Chat workflow → Sandbox runtime: runs code in · Tool actions execute inside isolated sandboxes
- Chat workflow → Project storage: mutates files · Agent writes project files and state changes
- Chat workflow → Search tools: searches · Agent can augment responses with web search
- Chat workflow → MCP server: exposes tools · Tool server provides structured repo-aware actions
- Auth guard → Firebase Admin: verifies identity · Protected requests rely on server-side token checks
- Project storage → Binary assets: stores binaries · Images and attachments are kept in object storage
- Billing → Cashfree: charges via · Payments are processed through the billing gateway
- API server → SEO pages: serves · Bots receive SSR marketing and discovery pages
- API server → App shell: serves SPA · Users receive the React app and static assets