Key Concepts
Cloud Code, Cursor, AI Agents, CRM, Hooks, Commands, Prompts, Sub Agents, Context Engineering, Text Stack, Codebase Structure, Versel AI SDK, Enthropic API, Perplexity, Playwright MCP, Debugging, Version Control, GitHub, Prompt Engineering, Web Search, Internal Documentation, 10x Developer.
Cloud Code: Building Anything with AI
Introduction
The video introduces Cloud Code as a powerful coding agent capable of building various applications, including mobile apps, AI agents, websites, and 3D animations. David Andre, with over 300 hours of experience using Cloud Code and leading a team that spends over $1,000 monthly on it, shares his expertise on how to effectively use the tool.
Four Pillars of Cloud Code Success
David outlines four key pillars for successful Cloud Code development:
- Cloud Code Setup: Customizing hooks, commands, prompts, and sub-agents to enhance speed, power, and reliability.
- Clear Idea: Having a well-defined project goal. The more clarity, the better the outcome.
- Skill: Possessing strong software development skills and a solid understanding of computer science.
- Prompting and Context Engineering Knowledge: Effectively guiding AI tools to achieve desired results.
Becoming a 10x Cloud Code Developer
Initial Setup and Project Description
The video demonstrates building a web-based CRM powered by AI using Cloud Code. The first step involves creating a project_description.md file to define the project's main idea: "Build a simple web-based CRM powered by AI, like Cursor but for CRM, with a chatbot on the left and CRM data on the right."
Leveraging Cursor and Plan Mode
The presenter uses Cursor's predictive text feature to save time while context engineering. He then switches to Cloud Code's plan mode (using Shift+Tab) and instructs the AI to "read project description.md" and "help me think through what the ideal text stack should be." He emphasizes ending prompts with "think hard answer in short" to improve the AI's reasoning.
Custom Cloud Code Setup
David utilizes his optimized Cloud Code setup, copying it from his main repository. This setup includes hooks, commands, and sub-agents designed for efficiency, reliability, and consistency. He mentions a special offer in August for the New Society, where members receive personalized Cloud Code setups tailored to their specific use cases.
Text Stack Decision
The AI suggests a text stack consisting of Next.js, Tailwind CSS, Supabase, OpenAI (for the model), and Vercel AI SDK. David approves the suggestion, noting its synergy with Next.js and suitability for a quick prototype. He instructs Cloud Code to document the text stack decision in the project_description.md file.
Codebase Structure Design
The presenter switches back to plan mode and prompts the AI to "help me design the ideal codebase structure for this project." He uses a custom hook (-d) to append "think harder, answer in short, keep it simple" to the prompt, further refining the AI's reasoning.
Addressing Errors and Utilizing Cursor
An error occurs due to spaces in the directory name. David demonstrates using Cursor to fix the settings.json and settings.local.json files. He uses Gemini 2.5 Pro for this task, highlighting its underrated capabilities.
Simplifying the Codebase
The AI suggests a codebase structure with app, components, lib, hooks, store, and types folders. David requests simplification using the -d hook. The AI then generates a simplified structure, which he approves and switches to auto-accept mode.
Setting up Next.js App
Cloud Code proceeds to create a Next.js app, prompting for permission to run commands like creating new directories. David explains how to grant permanent permissions to safe commands by using "yes, and don't ask."
Essential Cloud Code Commands
David explains two essential commands:
/clear: Resets the conversation history and frees up the context window./compact: Summarizes the conversation history to reduce token usage.
He notes that Cloud Code automatically runs /autocompact when the token limit is reached.
AI Module Design and Superbase Setup
Cloud Code designs the AI module, database (using Supabase.js), and sets up Shadcn for UI components. The Next.js project is also set up.
Enthropic API Key and Switching to Anthropic API
David demonstrates how to obtain an Anthropic API key from the Anthropic console. He then instructs Cloud Code to create an .env file and prefill it with the Anthropic API key. He decides to switch all AI functionality to use only the Anthropic API.
Utilizing Perplexity for Documentation
David uses Perplexity to research the latest documentation on using the Anthropic API with the Vercel AI SDK. He copies the output and instructs Cloud Code to verify if the code is following the documentation.
Creating Custom Commands
David explains how to create custom commands in Cloud Code by creating markdown files in the commands subfolder. These commands can automate repetitive actions or series of prompts.
Switching to SQLite
David decides to switch from Supabase to SQLite for simplicity. He uses Perplexity to research the latest documentation on integrating SQLite packages into a full-stack AI web app.
Verifying Implementation with Documentation
David uses Perplexity to double-check if the implementation is following the official documentation for the SQLite packages. He emphasizes the importance of identifying serious issues rather than overthinking minor details.
Testing the App and Debugging
David attempts to test the app by running npm run dev. He encounters an error and introduces MCP server, a tool for front-end testing.
Installing Playwright MCP
David installs Playwright MCP globally using the command npx @playwright/mcp@latest. He explains that Playwright is an open-source framework from Microsoft for testing front-end end-to-end tests.
Debugging with Playwright MCP
David uses the /mcp command to open Playwright MCP within Cloud Code. He demonstrates how Cloud Code can interact with the front end, test it, send prompts, click buttons, and debug issues automatically.
Addressing Module Not Found Error
David encounters a "module not found" error and uses a custom hook (-e) to explain the error trace. He then instructs Cloud Code to fix the import path.
Debugging Front End with Playwright MCP
Cloud Code uses Playwright MCP to navigate the URL, type in a prompt, click the send button, and list network requests. It identifies an issue where no API call is being made.
Adding Debug Log Statements
David instructs Cloud Code to add debug log statements to strategically isolate the problem. He emphasizes the importance of proceeding like a senior developer by adding debug statements in the most important pieces of code.
Addressing Typescript Error
Cloud Code encounters a Typescript error and attempts to fix it. David reverts the changes made after npm run build due to a Next.js bug.
Creating a Global Cloud MD File
David creates a cloud.md file in the root folder to provide instructions about the project and control how Cloud Code behaves. He adds a rule to never run npm run build unless explicitly asked.
Testing the AI Agent
David tests the AI agent by sending the prompt "create new contact." He observes that the AI is not responding and the CRM is not saving the contact.
Deep Research on CRM Features
David launches a deep research using Perplexity to identify the essential features and core functionalities of a CRM app. He emphasizes the importance of understanding the target avatar, their problems, and the V1 and V2 features.
Identifying Essential CRM Features
The deep research identifies essential CRM features such as contact management, lead management, task management, sales pipeline, reporting, and integration. David adds these features to the project_description.md file.
Addressing Enthropic Client Error
Cloud Code encounters an error related to the Enthropic client. David identifies that the wrong model is being used and instructs Cloud Code to use Sonnet or Opus.
Creating a Docs Folder
David instructs Cloud Code to create a /docs folder to store important documentation for the app. He creates a versel-sdk.md file and populates it with the Perplexity research output.
Preventing Server Starts
Cloud Code starts a server unnecessarily. David adds a rule to the cloud.md file to prevent Cloud Code from starting servers unless explicitly asked.
Debugging with Playwright MCP (Continued)
Cloud Code uses Playwright MCP to debug the front end, but it runs into loops. David decides to change the approach and debug manually.
Asking Dumb Questions
David emphasizes the benefit of using AI to ask dumb questions without feeling shame.
Addressing Console Reset Issue
David observes that the console resets when a prompt is sent. He uses Cursor with Gemini 2.5 Pro to analyze the files and identify the cause of the issue.
Addressing Input Value Undefined Error
David encounters an "input value undefined" error and uses a custom hook (-e) to explain the error trace.
Addressing Version Mismatch
Cloud Code identifies a version mismatch between the code and the documentation. David runs npm list to check the package versions.
Correcting Documentation with Perplexity
David uses Perplexity to correct the documentation for the version mismatch. He instructs Cloud Code to document the version information in the project_description.md file.
Implementing the Fix
David instructs Cloud Code to implement the fix for the version mismatch.
Creating a Sub Agent for Web Research
David creates a sub-agent for web research to automate the process of checking documentation and best practices. He uses deep research to improve the system prompt of the sub-agent.
Explaining Hooks, Commands, and Sub Agents
David explains the differences between hooks, commands, and sub-agents:
- Sub Agents: For specialized AI tasks requiring multiple actions.
- Hooks: For deterministic automation.
- Commands: For shortcuts or sets of actions that don't require a sub-agent.
Addressing Git Repository Issues
Cloud Code initializes a separate Git repository inside the CRM app. David instructs Cloud Code to delete that Git file and run git status to confirm all is good.
Pushing to GitHub
Cloud Code pushes the project to a new GitHub repository.
Addressing License Issues
David observes that the project does not have a license. He instructs Cloud Code to create an MIT license and push it to GitHub.
Addressing V5 Issues
David performs a new research to learn everything about V5 of the Versel AI SDK. He creates a new doc file named v5 versel sdk.md to document the findings.
Addressing UI Message Error
Cloud Code encounters a "UI message" error. David instructs Cloud Code to read the V5 file and propose a simple and targeted fix.
Creating a Dedicated Cloud MD File for API Folder
David creates a dedicated cloud.md file in the API folder to provide specific instructions and knowledge about the API.
Addressing Require Schema Error
Cloud Code encounters a "require schema" error. David instructs Cloud Code to explain what is going on.
Addressing Token Stream Issue
David observes that the app is getting the token stream, but the UI is not properly rendering the user message or the AI message.
Fixing the Streaming and Saving Contacts
David fixes the streaming issue and enables the app to save contacts in the CRM.
Conclusion
David emphasizes the importance of continuous learning, upskilling, and improving Cloud Code workflows to become a 10x Cloud Code developer. He reiterates the offer for a custom Cloud Code setup for New Society members during August. He encourages viewers to be "all in" about AI and leverage its power to automate tasks and increase productivity.
AI summaries can miss context or contain errors. Check important details against the original video.