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

“We believe that, in 2025, we may see the first AI agents join the workforce” Sam Altman, CEO OpenAI “AI agents are going to get deployed. I think this year we're going to see it take off” Jensen Huang, CEO NVIDIA “AI will write most software soon” Mark Zuckerberg, CEO Meta

Slide 3

Slide 3 text

Daniel Sogl • Software architect @ Thinktecture AG • Freelancing Angular Trainer @ Angular Architects • Focus: Angular, Capacitor and DX • Socials: https://linktr.ee/daniel_sogl About me

Slide 4

Slide 4 text

An AI agent is an autonomous system designed to perform tasks, make decisions, and adapt based on data and user feedback. It operates independently, automating processes in various fields like software development. What is an Agent?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 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 7

Slide 7 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, potential vendor lock- in, limited backend maturity Tool Spotlight: v0 by Vercel

Slide 8

Slide 8 text

Full-stack development in a browser-based environment • Instant front-end and back-end prototyping • Supports multiple frameworks, including React, Angular, and Vue • Real-time debugging and cloud deployments • Supabase integration for backend services Trade-offs: Performance limitations for large projects Tool Spotlight: Bolt.new by StackBlitz

Slide 9

Slide 9 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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 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

Slide 12

Slide 12 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 • Select 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 13

Slide 13 text

System-level AI assistance with deep IDE integration • Integrated as VS Code plugin • 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 • Integrates with terminal commands and runtime debugging • Provides a checkpoint system beyond Git for state management • Can use rules as context • MCP (Model Context Protocol) support for browser and tooling integration Trade-offs: Requires careful cost management and learning curve for beginners 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.) • Agent mode aka. Composer Trade-offs: Costs 20$ per month minimum + extra costs for more messages against expensive LLMs like o1 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://cursor.directory • 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.5 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

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 ▪ Start with AI prototyping – v0, Bolt, or Lovable for rapid MVPs ▪ Optimize with coding agents – Cline, Cursor, or Copilot for better results ▪ 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