How he built iOS apps that PRINT with Cursor + Claude

Key Concepts

• Native iOS app development with Cursor
• AI-assisted coding workflow
• Open Router for LLM management
• Prompt engineering for AI models
• Tool/Function calling for AI agents
• Asset generation with GPT-4o
• Security considerations for AI-powered apps

Main Topics and Key Points

Introduction

• Chris Baroque is building a portfolio of native iOS mobile apps using AI and Cursor.
• The goal is to reveal his process, techniques, agent integration, Open Router usage, and asset generation.
• Native iOS app development is presented as a significant opportunity.

Chris's Background and Tooling

• Chris has built four robust productivity apps, including a daily planning app ("Ellie") with thousands of monthly active users and paid subscribers.
• He uses AI to supercharge his workflow, enabling him to build complex applications as a solo developer.
• Primary Tools:
  • Cursor: Preferred IDE for AI-assisted coding, even for native iOS development.
  • ChatGPT (GPT-4o): For asset generation, achieving consistent and high-quality results.
  • Claude 3.7: Preferred LLM for native iOS development due to its effectiveness.
  • Open Router: A service that integrates with over 300 models, allowing easy switching between LLMs with a single line of code.

Native iOS Development Workflow with Cursor

• Process:
  1. Open the Xcode project file directly in Cursor.
  2. Make edits using Cursor's chat feature.
  3. Switch back to Xcode to build and run the application.
• Key Insight: This iterative process, while seemingly "janky," is faster than constantly pasting code between Claude and Xcode.
• Caveats:
  • Do not use Cursor to set up the Xcode project initially. Manual setup in Xcode is required for project settings, framework embedding, and enabling outgoing network requests.
  • Cursor struggles with certain Xcode-specific configurations.

Building an AI Feature into an Existing iOS App

• Goal: Add an AI chat feature to the budgeting app "Luna" that allows users to ask questions about their spending.
• Step-by-Step Process:
  1. UI Creation:
     • Prompt Cursor to create a new tab for the AI chat, following the existing app's UI style.
     • Use dummy data for initial UI development.
     • Example Prompt: "I want you to create a new tab for an AI chat. Can you make the UI for this? Try to follow the similar UI as other parts of the app. You can just hardcode the chat, just use dummy data."
     • Tag the entire codebase to provide context.
  2. UI Refinement:
     • Address UI issues (e.g., message area hidden behind the tab bar) through iterative prompts and screenshots.
     • Feed screenshots into Cursor to guide UI adjustments.
  3. LLM Integration with Open Router:
     • Integrate Open Router to enable swapping between different LLMs.
     • Add a setting to toggle between models (e.g., GPT, Claude).
     • Use the last 3 months of transactions as context for questions.
     • Example Prompt: "Can you make this functional and not hardcoded? Can you use Open Router so I can swap out the chat model quickly? Can you put a setting at the top right so we can toggle between the models? When you ask questions, can you use the last 3 months of transactions as context?"
     • Feed Open Router documentation into Cursor using the @docs command to provide API context.
  4. Prompt Optimization:
     • Improve the base prompt for better response quality.
     • Use Claude to generate a well-structured prompt in XML format.
     • Example Prompt (to Claude): "I have a budgeting app. I want to add an AI chat to it. Can you give me a very good prompt in XML format so it can follow the instructions? Make it so the answers are very concise, like a friend answering it for you. Don't show your work unless asked, and just answer the question."
     • Incorporate the Claude-generated prompt into Cursor.
  5. Mock Data Enhancement:
     • Use AI to generate realistic mock data for testing.
     • Example Prompt: "Can you make the mock data less generic? I want you to add restaurants and places that look way more realistic for a 28-year-old male in Dallas."
  6. Tool/Function Calling Implementation:
     • Implement tool calling to enable the LLM to access specific functions (e.g., get transactions for a date range, get current budget).
     • Create local tools to avoid external API calls.
     • Example Prompt: "Can you create a new tool function that the LLM is able to call? I want to use function calling from Open Router. Can you create a few tools, so maybe a tool to get the transactions for a specific date range, and then just for fun, let's also feed in a tool to maybe get the current budget."
     • Define the tools with parameters and descriptions for the LLM.
     • Implement a looping mechanism for the LLM to determine if it has enough context to answer the question.
  7. Cost Tracking:
     • Modify the chat interface to display the total tokens used and the cost of each interaction.
     • Utilize Open Router's API to retrieve cost and token information.
  8. Model Selection:
     • Pull available models from Open Router to display their context window and cost.
     • Hardcode a list of models that support tool and function calling.

Asset Generation with GPT-4o

• Use GPT-4o to generate high-quality assets for the app.
• Start with a base asset (e.g., a mascot) and generate variations for different use cases (e.g., loading screens, empty states).
• Example Prompts:
  • "Can you give it wired glasses and put it in front of a laptop?"
  • "I want you to make the background purple, and I want a little thing underneath it so it looks like it's floating. Can you do the same style but with a coffee cup?"
  • "Can you make the dog look more like my dog?"
• Feed existing assets into GPT-4o for modification and variation.

Security Considerations

• Avoid hardcoding API keys and sensitive information in the front end of the app.
• Implement proper security measures to protect against unauthorized access and usage.
• Be cautious when using AI tools, as they can introduce security vulnerabilities.

Notable Quotes

• "I'm hoping that they get um a little bit more of uh behind the scenes of an advanced cursor workflow." - Chris
• "I think I'm hoping that they get um a little bit more of uh behind the scenes of an advanced cursor workflow." - Chris
• "Formatting an in XML formatting in XML actually has a higher chance I've seen of producing really good results for the from the LLM" - Chris
• "If you can create a great prompt the UX ultimately becomes way better and if the UX comes better you know all your metrics are going to go up" - Greg
• "The people that are going to benefit the most from this AI tooling it is probably going to be like really good developers" - Chris

Technical Terms and Concepts

• LLM (Large Language Model): A type of AI model that can understand and generate human language.
• Open Router: A service that provides a unified API for accessing multiple LLMs.
• Tool/Function Calling: A feature that allows LLMs to access and use external functions or tools.
• Prompt Engineering: The process of designing and refining prompts to elicit desired responses from AI models.
• XML (Extensible Markup Language): A markup language used for encoding documents in a format that is both human-readable and machine-readable.
• API (Application Programming Interface): A set of rules and specifications that software programs can follow to communicate with each other.
• Context Window: The amount of text that an LLM can process at one time.
• Token: A unit of text used by LLMs for processing language.
• Hallucination: When an AI model generates incorrect or nonsensical information.

Logical Connections

• The video progresses from introducing Chris's background and tooling to demonstrating a specific use case: adding an AI chat feature to an existing iOS app.
• Each step in the process (UI creation, LLM integration, prompt optimization, etc.) builds upon the previous one, creating a logical flow.
• The discussion of tool calling and asset generation expands upon the core concept of AI-assisted app development, showcasing more advanced techniques.
• The security considerations section provides a crucial reminder of the potential risks associated with AI-powered apps.

Synthesis/Conclusion

The video provides a detailed walkthrough of how to leverage AI and Cursor to build native iOS mobile apps, focusing on practical techniques and actionable insights. Chris's workflow, combined with the use of Open Router, prompt engineering, tool calling, and GPT-4o for asset generation, demonstrates a powerful approach to AI-assisted app development. The video also highlights the importance of security considerations and the potential benefits for both experienced developers and non-technical individuals willing to learn the fundamentals of programming.