How I made a REAL Full Stack Chat App in 2hr with Cursor

Key Concepts

• AI Code Editor (Cursor): An AI-powered tool used for building full-stack applications.
• T3 Chat Cloneathon: A challenge to clone the T3 Chat application.
• Full-Stack Application: An application with both front-end (UI) and back-end (server, database) components.
• AI Provider Abstraction: A layer that allows users to select from different AI models from various providers.
• Create Vololo App: An open-source command-line tool for scaffolding full-stack applications with database and authentication.
• Cloudflare Workers: A serverless platform for deploying back-end code.
• R2: Cloudflare's object storage service, similar to AWS S3.
• Base64 Encoding: A method for representing binary data (like images) as text.
• Streaming: Sending data in real-time, chunk by chunk, instead of waiting for the entire response.
• Markdown Rendering: Converting Markdown-formatted text into visually appealing HTML.

Building a T3 Chat Clone with Cursor: A Step-by-Step Guide

1. Project Setup with Create Vololo App

• Objective: Quickly set up the basic structure of a full-stack application.
• Process:
  • Use the command npx create-volo to generate a Vololo app.
  • This creates a front-end, API back-end, Firebase authentication (emulator initially), and a local PostgreSQL database.
  • Connect to real Firebase and PostgreSQL instances using pnpm connect firebase and pnpm connect database.
• Benefits: Avoids time-consuming setup of database, authentication, and basic UI.
• Example: The command creates a functional app with a login page and basic user schema.

2. Planning and Feature Definition

• Objective: Define a clear plan before starting to code, improving AI agent effectiveness.
• Process:
  • Research T3 Chat to identify core features and bonus features.
  • Use Cursor to create a plan.md file outlining the necessary features.
  • Refine the plan into a development_plan.md with two phases: MVP and additional features.
  • Separate work into front-end and back-end development for parallel execution.
• Key Point: Solidifying a plan before coding leads to better results from AI agents.
• Example: The plan includes AI provider abstraction, model management, real-time model switching, and user authentication.

3. Parallel Development with AI Agents

• Objective: Utilize multiple AI agents to work on different parts of the application simultaneously.
• Process:
  • Open two new chats in Cursor, one for front-end and one for back-end development.
  • Tag the development_plan.md in each chat.
  • Instruct the agents to implement the Phase 1 requirements for their respective areas.
• Benefits: Accelerates development by allowing parallel work on UI and server-side logic.
• Example: One agent creates data structures for conversations, messages, and files on the back end, while the other adds UI components using Shadcn UI.

4. Database Integration and Schema Management

• Objective: Set up and manage the database schema for storing chat data.
• Process:
  • Run pnpm db push to update the database schema based on the code changes.
  • Encountered an error due to a local database setup.
  • Upgraded to Neon, a serverless PostgreSQL database, using pnpm connect database.
  • Configured API keys for AI services in the .env file.
• Technical Terms:
  • Database Schema: The structure of the database, including tables and their columns.
  • Neon: A serverless PostgreSQL database service.
• Example: The database schema includes tables for conversations, files, and messages.

5. Code Review and Status Reporting

• Objective: Ensure code quality and identify potential issues before running the application.
• Process:
  • Ask each AI agent to review their completed work and create a status report (frontend_status.md and backend_status.md).
  • The reports document what has been done, what remains to be done, and any potential issues.
• Benefits: Provides a starting point for troubleshooting and ensures that the code aligns with the original plan.
• Example: The front-end status report notes missing Shadcn UI components and potential import path deviations.

6. Cloudflare Workers Deployment

• Objective: Deploy the back-end API to Cloudflare Workers for scalability and ease of deployment.
• Process:
  • Run pnpm connect deploy to set up Cloudflare Workers and Pages.
  • Move environmental variables to the wrangler.toml file.
  • Encountered issues with the initial Cloudflare Workers setup.
• Technical Terms:
  • Cloudflare Workers: A serverless platform for deploying back-end code.
  • Wrangler: Cloudflare's command-line tool for managing Workers.
  • wrangler.toml: Configuration file for Cloudflare Workers.

7. UI and Server Integration

• Objective: Connect the front-end UI with the back-end API.
• Process:
  • Create a server_com.ts file to define API calls and wrappers.
  • Implement the integration between the UI and the server using this file.
  • Address issues related to different runtimes (Node.js vs. Cloudflare Workers).
• Key Point: Explicitly defining API endpoints and using a standard REST API provides clarity and reusability.

8. Troubleshooting and Bug Fixing

• Objective: Identify and resolve issues that arise during the integration and testing phases.
• Process:
  • Address errors related to Firebase project ID and unauthorized access.
  • Fix issues with data type mismatches and incorrect API responses.
  • Troubleshoot and resolve problems with the Cloudflare Workers environment.
• Key Point: Expect issues and be prepared to work through them iteratively.

9. Implementing Streaming

• Objective: Implement real-time streaming of AI responses for a better user experience.
• Process:
  • Investigate the logic for streaming and implement the necessary changes.
  • Address issues with WebSocket connections and SSE events.
  • Implement HTTP streaming as an alternative approach.
• Benefits: Provides a more engaging and responsive user experience.

10. File Uploads and R2 Integration

• Objective: Enable users to upload images and integrate with Cloudflare R2 for file storage.
• Process:
  • Implement the necessary code to integrate with R2 for file hosting.
  • Address issues with image processing and metadata mismatches.
  • Ensure that files are stored privately and not exposed publicly.
• Technical Terms:
  • R2: Cloudflare's object storage service.
  • Base64 Encoding: A method for representing binary data as text.

11. UI Enhancements and Refinements

• Objective: Improve the aesthetic and usability of the chat interface.
• Process:
  • Use a proper Markdown rendering tool to display chat content.
  • Improve the layout and styling of the chat messages.
  • Address issues with the title generation logic.
• Benefits: Creates a more visually appealing and user-friendly application.

12. Final Testing and Refinements

• Objective: Ensure that all features are working correctly and that the application is stable.
• Process:
  • Test the image processing and file uploads with different AI providers.
  • Address any remaining issues with the UI and user experience.
  • Verify that the application is performing well and that there are no performance bottlenecks.

13. Conclusion

• Main Takeaway: The video demonstrates a new way of developing software using AI code editors like Cursor. By combining careful planning, parallel development with AI agents, and iterative testing and refinement, it is possible to build complex full-stack applications with minimal manual coding.
• Key Point: While AI can automate much of the coding process, it is still essential to have a solid understanding of fundamental programming concepts and to be able to troubleshoot and debug issues as they arise.
• Final Result: A fully functional multi-model AI chat application with conversation history, image uploads, and real-time streaming.