1 / 13
AI-Powered Development

The AI-Powered Developer

Strategic Prompting, Agentic Workflows & Tooling

Practical approaches, templates, and decisions for frontend delivery

OpenAI
Gemini
Claude
Grok
Mistral
Kimi
Meta
Deepseek

Agenda

What we'll cover today

01 Interactive: How would you approach a task?
02 Prompt template families & provider resources
03 LLM platforms & interactive leaderboard poll
04 Modes, MCP & Connectors overview
05 LLM versions & benchmarks with SWE-Bench
06 AI code editors poll & my pick
07 Risks, precautions & closing thoughts
🎯 Interactive Discussion

How would you approach these challenges?

Common Developer Scenarios

🔬 R&D / Research ⚡ Rapid Prototyping 🔗 API Integration 🚀 MVP Generation 🧪 Testing & QA
A

Design First

Create mock → hand off to dev

Best for: Complex UX, team collaboration
Challenge: Slow iteration, design-dev gap
B

Code First

Prototype directly in code

Best for: Fast feedback, developer-led
Challenge: Technical debt, missing design
C

AI-Assisted

Prompt LLM to generate component + tests

Best for: Speed, boilerplate, exploration
Challenge: Hallucinations, review overhead

💬 Let's discuss: Which approach fits your current project? What challenges do you face with each?

Prompt Template Families

Common patterns across all providers

📋

System + User

Separate role/context from user input

🎯

Zero-Shot

Single clear instruction

📚

Few-Shot

Include input→output examples

🧠

Chain-of-Thought

Step-by-step reasoning

📦

JSON Schema

Structured output templates

🔧

Tool/Agent

External API call scaffolds

📖 Provider Documentation

OpenAI OpenAI Guide Anthropic Claude Templates Google Vertex AI M Mistral Docs 🤗 HuggingFace 🔗 LangChain

LLM Platforms & Your Preference

Click to vote for your preferred LLM!

Anthropic

Claude (Anthropic)

Best agentic reasoning

0 votes
OpenAI

GPT (OpenAI)

Reliable, wide ecosystem

0 votes
Gemini

Gemini (Google)

All-around champion

0 votes
Grok

Grok (xAI)

Strong reasoning

0 votes
Mistral

Mistral

Large context, efficient

0 votes
Kimi

Kimi K2

99.1% non-agentic coding

0 votes
Kimi

DeepSeek V3

Open-source, popular

0 votes

Other / Local

Ollama, Llama, custom

0 votes
🏆 View Live LLM Arena Leaderboard →

Modes, MCP & Connectors

Enable these for maximum productivity

🔍

Research Mode

Gather references, docs, constraints

📄 Documentation search 🔗 API discovery 📚 Best practices
🎨

Canvas Mode

Create visual/interactive mockups

🖼️ UI/UX design 📊 Diagrams 🎯 Wireframes
🎓 Experts Talk →
🧠

Thinking Mode

Let model plan (CoT) before coding

🔄 Complex logic 🧩 Problem decomposition 📋 Planning

🔌 MCP (Model Context Protocol) & Connectors

What is MCP?

Standard protocol for AI models to connect with external tools, databases, and APIs

Connectors Enable

  • 🗄️ Database access (read-only recommended!)
  • 🌐 Web browsing & scraping
  • 📁 File system operations
  • 🔧 Custom tool integration

LLM Benchmark Comparison (2025)

SWE-Bench Agentic Scores & Recommended Use Cases

Model Key Strength Score Best For
Anthropic
Claude Sonnet 4.5
Best for real-world agents, 30hr+ autonomous tasks 82% Autonomous bug resolution, agent orchestration
Anthropic
Claude Opus 4.5
Complex reasoning, 200K context 80.9% Architectural planning, deep code review
OpenAI
GPT 5.1
Reliable code gen, wide ecosystem 76.3% API gen, high-volume code completion
Gemini
Gemini 3 Pro
Highest overall, Z-Score 1.38 76.2% General dev, multimodal apps
Grok
Grok 4
Strong reasoning, complex problem-solving 75% Code planning, robustness-critical tasks
Gemini
Gemini 2.5 Pro
All-around champion, highest Z-score Z: 1.38 Reliable general-purpose dev
Kimi
Kimi K2 Thinking
Non-agentic coding expert 99.1%* Specialized non-agentic tasks
Mistral
Mistral Large 3
Top-tier reasoning, 32K context Top-Tier Multilingual, function calling
Anthropic
Claude 3.5 Sonnet
Versatile, speed + cost optimized High Enterprise, cost-optimized agents
DeepSeek
DeepSeek V3
Open-source, popular foundation N/A Code gen, fine-tuning

* Non-agentic benchmark score

📊 Key Benchmarks & Leaderboards

🎯 SWE-Bench Agentic coding 🏆 LLM Arena Community 📈 Vellum AI Full comparison
🗳️ Interactive Poll

Which AI code editor do you use?

Click to vote! Multiple votes allowed.

VS Code
VS Code + Copilot
0 votes
Cursor
Cursor
0 votes
Antigravity
Antigravity
0 votes
Windsurf
Windsurf
0 votes
Kiro
Kiro (AWS)
0 votes
Qoder
Qoder
0 votes

📊 Free Tier Comparison

Editor Free Tier Type Models Available Limitation
VS Code + Copilot Quota-based GPT-4.1, GPT-4o mini, Claude 3.5 Monthly chat cap
Cursor Quota + promo DeepSeek v3, GPT-4o mini, Grok 3 Daily/monthly limits
Antigravity Preview freemium Gemini 3 Pro, Claude 3.5, GPT-OSS Preview may end
Windsurf Hybrid freemium SWE-1 Lite, Claude/Gemini credits Credit exhaustion
Kiro (AWS) Credit-based Sonnet 4.0/4.5, Haiku, Opus 4.5 Credit depletion
Qoder Public preview Alibaba Qwen3-Coder Preview closure

My Pick

The IDE I use for agentic development

Antigravity

Antigravity

AI-First Agentic IDE
🤖 Built-in agent manager for complex tasks
🧪 Integrated testing & browser automation
🔄 Multi-model support (switch providers)
📁 VS Code based — familiar environment
💰 Freemium model — try before you commit
🎬 LIVE DEMO

Demo Time

Let me show you what AI-assisted development looks like in practice

💻

Application demonstration in progress...

⚠️ Critical Awareness

Real AI Editor Incidents

Why precautions matter — these actually happened

💥

Entire Drive Deleted

AI deleted user's entire D:\ drive instead of a cache folder. Irreversible data loss.

🗄️

Production DB Wiped

Replit AI Agent wiped live production codebase & database despite explicit instructions not to.

🔓

30+ IDE Vulnerabilities

"IDESaster" research found critical security flaws in Cursor, Copilot, Windsurf, Zed...

💸

Costly Outages

Untested AI-generated code pushed to production — hundreds of thousands in damages.

🎯

AI editors are no longer just assistants — they are operators. Without strict permission boundaries, they cause damage at machine speed.

Precautions & Best Practices

Protect yourself and your team

🔒

Never Give DB Write Access

Use read-only connections. No direct production access for AI agents.

👁️

Always Review Output

Never auto-deploy AI-generated code. Human review is mandatory.

🧪

Sandbox & Test

Run AI operations in isolated environments. Test before production.

⚡

Disable Auto-Run

Turn off autonomous command execution. Require confirmation for destructive actions.

💾

Backup Everything

Regular backups before AI operations. Version control is your friend.

📋

Scope Limitations

Define clear boundaries. Limit file system and network access.

Thank You!

🧠

Don't Make It a Habit

AI is a powerful tool, but don't let it replace your thinking. Always brainstorm the logical flow yourself first.

🔄

Stay Critical

Review, test, and validate. The human in the loop is what keeps everything safe.

📈

Keep Learning

The landscape changes fast. Stay updated on best practices and new risks.

Questions? Let's discuss!

← → or Space to navigate