AI Coding Assistants

A crash course 🚀

June 2021

GitHub, in collaboration with OpenAI, launched GitHub Copilot, an AI-powered code completion tool that assists developers by autocompleting code snippets and providing suggestions within integrated development environments (IDEs).

November 2022

OpenAI released ChatGPT, a conversational AI model capable of understanding and generating human-like text, which developers began utilizing for code generation and debugging through natural language prompts.

March 2023

GitHub announced Copilot X, an evolution of Copilot integrating OpenAI's GPT-4, introducing features like chat and voice interfaces, pull request support, and context-aware conversations to enhance coding assistance.

The past few years…

October 2024

GitHub expanded Copilot's capabilities by introducing multi-model support, allowing developers to choose AI models from providers like Anthropic, Google, and OpenAI, thereby enhancing flexibility and performance in code generation.

 

November 2023

OpenAI launched GPT-4 Turbo, offering improved performance and cost-effectiveness, which further advanced the capabilities of AI coding assistants integrated with this model.

 

September 2023

Cursor AI emerged as an AI-enabled IDE, providing features such as code generation, debugging assistance, and contextual code explanations, thereby streamlining the development process within a single environment.

The Model

If you squint hard enough, anything starts to look like a brilliant idea.

ChatGPT 4o

Services

Providers

  • Anthropic Claude
  • OpenAI ChatGPT
  • Meta Llama
  • Google Gemini

Proxies / Partners

  • OpenRouter
  • Groq

Open Models

  • Facebook Llama
  • Microsoft Phi
  • Google Gemma
  • Alibaba Qwen
  • Mistral Mixtral

Hosting

  • HuggingFace

Local

  • LMStudio
  • Ollama

Prompting Techniques

Learn effective prompting strategies to enhance AI responses and productivity.

Basic Prompt

Create a web application that lets the user start a Pomodoro timer!
  • Low effort
  • Good for brainstorming ideas

 

  • Your mileage may vary

Structured Prompt

<goal>
  Create a web application that lets the user start a Pomodoro timer.
</goal>

<instructions>
  <instruction>Let the user set how many pomodoros they want before a break.</instruction>
  <instruction>Let the user customize how long their pomodoros are.</instruction>
  <instruction>Let the user customize how long their break is.</instruction>
  <instruction>Allow the user to start the pomodoro timer after configuration.</instruction>
  <instruction>Allow the user to cancel the timer if needed.</instruction>
  <instruction>
    Allow the user to start the break once they've completed the specified number of pomodoros.
  </instruction>
</instructions>
  • More context → better aligned results.
  • ⬆️ Effort
  • Requires more knowledge about the underlying model

Including Examples

<goal>...</goal>
<instructions>...</instructions>
<examples>
  <example>
  	<goal>Create a stop watch component in HTML/Javascript</goal>
    <file>
    <content>
    <![CDATA[<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Stopwatch</title>
      <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <div class="stopwatch">
        <div id="display">00:00:00</div>
        <div class="controls">
          <button id="start">Start</button>
          <button id="stop">Stop</button>
          <button id="reset">Reset</button>
        </div>
      </div>
      <script src="script.js"></script>
    </body>
    </html>
    ]]>
	</content>
    </file>
  </example>
</examples>
  • Influence the model output
  • Requires existing code
  • Need to find relevant examples for the prompt

Templating

<goal>
  {{ GOAL }}
</goal>

<instructions>
  {{ INSTRUCTIONS }}
</instructions>

<examples>
  {{ EXAMPLES }}
</examples>
  • Prompts can be generated dynamically
  • Requires orchestration

Editors & Assistants

Visual Studio Code

Cursor

Windsurf

Aider

GitHub Copilot

Zed

Cline

JetBrains

Continue

Just pick one

Write the code for me, thanks!

  • Works well* with established code bases.
    • Supplement with developer documentation.
  • Create separate conversations or edit responses to combat context pollution.
  • Multi-modal to support images can be convenient.
  • Experiment with different models and assistants for different tasks.

Model Context Protocol

  • Client / Server
    architecture
  • Receive notifications
    when data sources
    are updated.
  • Enables more agentic
    workflows?
Made with Slides.com