Code smarter, not harder Wie AI-Coding-Tools deine Produktivität boosten

No content

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

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?

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

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

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

No content

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: Unstable results and long runtime of commands Tool Spotlight: Bolt.new by StackBlitz

No content

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

No content

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

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

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 chat, edit and agent mode (currently in preview) • Inline autocompletion • Povides different LLMs (4o, o1-mini, Sonnet, etc.) Trade-offs: Unable to use external context or MCP integrations Tool Spotlight: GitHub Copilot – Edit/Agent Mode

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 (Model Context Protocol) support for browser and tooling integration Trade-offs: Requires cost management and is unable to provide code completion Tool Spotlight: Cline

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

No content

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

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

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

No content