Slide 1

Slide 1 text

Code smarter, not harder How to AI Coding tools boost your productivity Daniel Sogl @sogldaniel Software architect

Slide 2

Slide 2 text

How to AI Coding tools boost your productivity Code smarter, not harder

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 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 How to AI Coding tools boost your productivity Code smarter, not harder

Slide 5

Slide 5 text

Choosing the Right AI Tools for Your Development Workflow AI Tools for Developers: Prototyping vs. Coding How to AI Coding tools boost your productivity Code smarter, not harder

Slide 6

Slide 6 text

How AI can help you try out ideas in minutes • Try out ideas with simple prompts • Incorporate existing design systems using Figma or screenshots • Create full-stack applications with backend functionality like authentication, storage, and serverless functions • Export generated code to GitHub or deploy it directly Agentic Prototyping: AI-Driven PoC’s How to AI Coding tools boost your productivity Code smarter, not harder

Slide 7

Slide 7 text

I want to create a web app that helps me generate social media posts. I should be able to authenticate myself to securely access my account. Once I’m logged in, I want to enter a topic into a free-text field. The app should then fetch current sources related to that topic using the Perplexity API. Based on these sources, it should use the ChatGPT API to generate relevant, engaging, and reach-optimized social media posts. All generated posts should be persistently saved in a database and linked to my authenticated user account. How to AI Coding tools boost your productivity Code smarter, not harder

Slide 8

Slide 8 text

In 10 minutes How to AI Coding tools boost your productivity Code smarter, not harder

Slide 9

Slide 9 text

Full-stack applications with a user-friendly approach • User friendly interface for nontechnical users • Uses React • Chat mode to plan before act • Strong Supabase integration for authentication and databases • 3rd Party integrations like Stripe, Resend or OpenAI • Optimized for team collaboration with GitHub- first workflows Tool Spotlight: Lovable.dev How to AI Coding tools boost your productivity Code smarter, not harder

Slide 10

Slide 10 text

How to AI Coding tools boost your productivity Code smarter, not harder

Slide 11

Slide 11 text

Code smarter, not harder How to AI Coding tools boost your productivity

Slide 12

Slide 12 text

Self hosted full-stack application prototyping • Based on bolt.new • Runs locally on your device using Docker • In browser Visual Studio Code environment • Can connect to any LLM provider or local running LLMs with Ollama • Supports any web framework or Node based backends Tool Spotlight: bolt.diy How to AI Coding tools boost your productivity Code smarter, not harder

Slide 13

Slide 13 text

The Benefits and Limitations of AI-Assisted Development • Fast PoC development – Reduces time from idea to prototype • No Local Setup Needed – Tolls running in the browser • Immediate Visual Feedback – preview UI changes in real-time • Supabase Integration – Strong backend setup in Lovable • 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 – code can be shared between tools • Limited framework support (mostly React) AI-Driven Prototyping: Pros & Cons Pros Cons How to AI Coding tools boost your productivity Code smarter, not harder

Slide 14

Slide 14 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 • Add external context using MCP-Servers • 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 How to AI Coding tools boost your productivity Code smarter, not harder

Slide 15

Slide 15 text

The all-inclusive AI Coding toll • Can be used accross multiple IDEs (VS-Code, IntelliJ, Xcode etc.) • Free to use / 10$ per month for the pro version • Provides ask, edit and agent mode • Inline autocompletion, code reviews and test generation • Povides different LLMs (GPT, Gemini, Sonnet, etc.) • MCP (Model Context Protocol) support Tool Spotlight: GitHub Copilot – Edit/Agent Mode How to AI Coding tools boost your productivity Code smarter, not harder

Slide 16

Slide 16 text

A short overview • Open-source protocol developed by Anthropic • Provides a consistent way for LLMs to interact with external resources • Works like the USB-C standard • Official servers are available for GitHub, Atlassian, Playwright, Stripe, Databases and more • It’s the key for useful AI-coding setups in complex environments Source: https://www.dailydoseofds.com/p/visual-guide-to-model-context-protocol-mcp/ Code smarter, not harder How to AI Coding tools boost your productivity Model Context Protocol (MCP)

Slide 17

Slide 17 text

Code smarter, not harder How to AI Coding tools boost your productivity

Slide 18

Slide 18 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., o3 for planning, Claude 4 Sonnet for coding) • 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 How to AI Coding tools boost your productivity Code smarter, not harder

Slide 19

Slide 19 text

How to AI Coding tools boost your productivity Code smarter, not harder

Slide 20

Slide 20 text

AI Assisted Coding instead of AI Coding • Developers use AI tools specifically • AI assistants develop requirements incrementally under the supervision of a developer • Junior developers learn new skills faster with the help of AI • AI tools are part of the developer toolbox like Git and modern IDEs today • Efficient prompting and definition of rules as daily workflow Outlook for the future How to AI Coding tools boost your productivity Code smarter, not harder

Slide 21

Slide 21 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.dev for rapid POC’s ▪ 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 How to AI Coding tools boost your productivity Code smarter, not harder

Slide 22

Slide 22 text

Thanks for your attention Daniel Sogl @sogldaniel [email protected]