MY UPGRADED AI Coding Workflow + Free APIs: How I DO AI Coding! (Stitch, Better T3, SuperNinja)

AI Coding Workflow Update: Tools, Frameworks, and Super Agent

Key Concepts: AI coding workflow, UI/UX design, AI code generation, Super Agent, Backend Framework, Model Selection, Cost Optimization.

1. UI/UX Design Tools

• Excalidraw: Used for super basic mockups when detailed UI designs are not required. Helps ensure UI consistency.
• Figma: Used for proper UI designs and more detailed work.
• Stitch: Good for UI component design, which can then be integrated into AI coders. Can be tricky with complex designs.
• Super Design: An alternative tool for UI design.

2. AI Code Generation Tools

• VS Code:
  • Kilo Code: Preferred due to no OpenRouter fees, availability of various models, and free credits for new users with ongoing promotions.
  • Root Code: Used for specific models or settings, utilizing Requesty as the provider for faster performance, lower costs, and prompt overriding capabilities. (Refer to previous workflow video for in-depth coverage).
• Terminal:
  • Open Code: Preferred over Claw Code due to its configurability, model flexibility, speed, and low memory footprint. Used with Kimmy K2 for optimal performance and cost-effectiveness. The speaker recommends trying it.

3. Super Agent: Ninjette AI

• Developed by ex-Google, Meta, and AWS engineers.
• Provides access to 25+ AI models.
• Super Ninja Feature: A central interface for various tasks, including data analysis, code generation, and more.
• Capabilities:
  • Data analysis and visualization (e.g., creating dashboards from Excel sheets).
  • Website, slide, spreadsheet, PDF, and Word document creation.
  • Deep research on any topic.
  • Access to multiple AI models for comparison.
  • Advanced image generation with real-time editing.
  • Prompt library with over 400 curated queries.

4. Backend Framework: Better Tstack

• Frameworks:
  • Next.js: Used for web development.
  • Expo: Used for mobile app development.
  • Both are React-based, which aligns well with AI coding capabilities.
• Better Tstack: A tool for creating custom stacks manually, offering flexibility in choosing specific technologies.
  • Allows selection of frontend (Next.js), backend (Convex - database and backend packaged together), package manager (Bun - faster than npm), and example apps (AI SDK app, to-do list app).
  • Generates a command to create the project with the selected configurations.
  • Provides a good balance between customization and ease of setup.
  • Missing some integrations (e.g., Instant DB), but allows for manual addition.

5. Key Arguments and Perspectives

• Mockups are essential for good UI: Prevents inconsistent or poor UI design.
• Flexibility in model selection is crucial: Avoids being locked into proprietary solutions and allows for task-specific model optimization.
• Cost optimization is a key consideration: Choosing tools and providers that offer competitive pricing and free credits.
• Customization is important: Better Tstack allows for a tailored development stack, avoiding unnecessary components.

6. Notable Quotes

• (Regarding Open Code): "Like, it's really good. It's super fast, has a very low memory footprint..."
• (Regarding Ninjette AI): "You just log in and right away you get this super clean minimalist interface."

7. Technical Terms and Concepts

• OpenRouter: A service that provides access to multiple AI models through a single API.
• Requesty: A provider used with Root Code for faster performance and lower costs.
• Convex: A backend and database solution packaged together, emphasizing speed and open-source nature.
• Bun: A JavaScript runtime and package manager, known for its speed and efficiency.
• T3 Stack: A full-stack web development framework.
• TRPC: A library for building end-to-end typesafe APIs.

8. Logical Connections

• The video starts with UI/UX design tools, progresses to AI code generation tools for both VS Code and the terminal, then introduces a Super Agent for comprehensive AI tasks.
• The discussion of frameworks connects the frontend (Next.js, Expo) with the backend (Convex) through the Better Tstack tool, which facilitates custom stack creation.
• The choice of tools is driven by factors like cost, performance, flexibility, and integration capabilities.

9. Synthesis/Conclusion

The speaker's AI coding workflow emphasizes a combination of specialized tools for UI/UX design, code generation, and comprehensive AI tasks. The workflow prioritizes flexibility, cost-effectiveness, and performance, with a focus on customizable solutions like Better Tstack and Open Code. The use of a Super Agent like Ninjette AI streamlines complex tasks and provides access to a wide range of AI models. The speaker encourages viewers to explore these tools and share their own experiences.