Slide 1

Slide 1 text

Code smarter, not harder How AI Coding Tools Boost Your Productivity Daniel Sogl @sogldaniel Software architect

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Daniel Sogl • Software architect @ Thinktecture AG • Focus: Angular, Capacitor and AI-Coding • Creator of https://codingrules.ai • Socials: https://linktr.ee/daniel_sogl About me

Slide 4

Slide 4 text

Choosing the Right AI Tools for Your Development Workflow AI Tools for Developers: Prototyping vs. Coding

Slide 5

Slide 5 text

How AI Can Help You Build Applications in Minutes • Create applications in minutes by typing prompts • Incorporate existing design systems and templates using Figma or screenshots. • Enable backend functionality with Supabase for authentication, storage, and serverless functions • Export generated code to GitHub or deploy it directly Agentic Prototyping: AI-Driven MVPs

Slide 6

Slide 6 text

Rapid UI prototyping and full-stack integration • Generates UI components and backend services • Seamless integration with Next.js, shadcen and Vercel infrastructure • Supports Figma imports for UI consistency • CLI-based installation of generated components Trade-offs: React-centric, limited backend maturity Tool Spotlight: v0 by Vercel

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Full-stack applications with a user-friendly approach • User friendly interface for nontechnical users • Chat mode to plan before act • Strong Supabase integration for authentication and databases • Optimized for team collaboration with GitHub- first workflows Trade-offs: Opinionated architecture and message-based pricing Tool Spotlight: Lovable.dev

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

The Benefits and Limitations of AI-Assisted Development • Fast MVP development – Reduces time from idea to prototype • No Local Setup Needed – Bolt runs fully in the browser • Immediate Visual Feedback – v0 previews UI in real-time • Supabase Integration – Strong backend setup in Lovable and Bolt • Collaboration Features – Lovable integrates well with GitHub • AI costs and token limits – usage is often billed per token or message • AI-generated code requires manual refinement – quality varies depending on prompts and models. • Vendor lock-in (e.g., v0 on Vercel) • Limited framework support (mostly React) – Angular is only supported by bolt AI-Driven Prototyping: Pros & Cons Pros Cons

Slide 11

Slide 11 text

How AI Automates, Refactors, and Optimizes Code • Add tools by plugins or use an AI-Coding IDE • Pretend architecture & tech stack details by providing rules • Use different LLM models and begin prompting • Use images & documentations to add current knowledge • Use the agent mode or the chat to plan or act • Develop features or refine existing code as needed From Prototype to Production: AI Coding Agents in Action

Slide 12

Slide 12 text

The all-inclusive AI Coding toll • Can be used accross multiple IDEs (VS-Code is recommended) • Free to use / 10$ per month for the pro version • Provides ask, edit and agent mode (in preview) • Inline autocompletion • Povides different LLMs (4o, o1-mini, Sonnet, etc.) • MCP (Model Context Protocol) support for browser and tooling integration Trade-offs: Limited external context and model rate limits Tool Spotlight: GitHub Copilot – Edit/Agent Mode

Slide 13

Slide 13 text

System-level AI assistance with deep IDE integration • Integrated as VS Code plugin • On-device processing • Optimizes cost efficiency with model switching (e.g., DeepSeek for planning, Claude 3.5 Sonnet for execution) • Offers Plan/Act modes for controlled AI execution • Provides a checkpoint system beyond Git • Memory-Bank for progress tracking • MCP support Trade-offs: Requires cost management and is unable to provide code completion Tool Spotlight: Cline

Slide 14

Slide 14 text

The AI Code Editor • Vectorizes code base and documentations of any kind for fast AI autocompletion • Generates and improves code snippets contextually • Helps automate boilerplate code and repetitive coding tasks • Provides different LLMs for different purposes (OpenAI, DeepSeek, Sonnet etc.) • Chat, edit and agent mode • MCP support Trade-offs: Costs 20$ per month minimum + extra costs for more messages against expensive LLMs like Sonnet 3.7 Tool Spotlight: Cursor

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Defining Architecture, Tech Stack & Guidelines for AI Tools • Define rules to describe your architecture, tech stack and coding guidelines • Use predefined rulesets e.g., https://codingrules.ai • Add as much context as possible by providing images, documentations or existing code • Choose the right model for the right task (e.g., DeepSeek-r1 for planning and Claude 3.7 Sonnet for coding) • Do not try to solve all problems or features with just one prompt Rules & Context: The Foundation of AI-Assisted Coding

Slide 17

Slide 17 text

Where AI Tools Shine & Their Current Limitations • System-Level AI Assistance – Cline integrates deeply with the development environment, including debugging, refactoring, and testing • Model Agnostic & Cost Optimization – Allows switching between AI models to balance cost, speed, and accuracy • Plan/Act Mode for Task Control – Separates strategic planning from execution, allowing more oversight on critical changes • Model Context Protocol (MCP) Extensibility – Enables integration with custom tools, internal monitoring systems, and security workflows • Eliminates repetitive coding tasks – Quick refactoring & boilerplate generation (e.g., Cursor) • Inconsistent code quality – Well-defined rules improve results • AI model costs & token limits require careful management—long sessions can be expensive • Not Always Beginner-Friendly – Less intuitive than simpler AI coding assistants, making it better suited for experienced engineers • Potential Model Latency – Switching between AI models may introduce slight delays compared to single-provider tools AI Coding: Pros & Cons Pros Cons

Slide 18

Slide 18 text

A Practical Guide to Smarter AI-Assisted Development ▪ Define your goals & tech stack – Set clear objectives and choose the right tools with the help of chat tools like Chat GPT ▪ Start with AI prototyping – v0, Bolt, or Lovable for rapid MVPs ▪ Optimize with coding tools – Cline, Cursor, or Copilot for production ready code ▪ Iterative development – Let the tools refactor the code until it fits your needs ▪ Plan before execution – Use reasoning models for architecture and structured tasks ▪ Balance AI & human oversight – Optimize costs, automate testing, and ensure quality control AI Coding Best Practices Cheat Sheet

Slide 19

Slide 19 text

No content