Skip to content

Instantly share code, notes, and snippets.

@itproto

itproto/copilot.md

Last active September 11, 2025 15:40
Show Gist options
  • Save itproto/7dcad10de9a2ad1992a8e1be57b190e6 to your computer and use it in GitHub Desktop.
Save itproto/7dcad10de9a2ad1992a8e1be57b190e6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
copilot.md

💬 My Take on Codex-tools (LLM-based dev tools)

  • Similar to JavaScript → cool/strange/simple at the beginning
  • Evolution of tools/practices for defining context/prompts/LLMs

3 months usage of passive use at SCB

1.1 Day-to-Day:

  • Generating tests
  • Explaining code
  • Simple refactoring
  • Code generation
  • Reading errors/extracting values

🔍 Observations

  • Slow generation
  • Settings disabled by admin (model, scopes)

2. Copilot J+History

Jun 2021: GitHub (Microsoft) released Copilot based on Codex (OpenAI GPT-3)

  • Uses FIM (fill-in-the-middle) - new LLM approach for capuring context
  • GPT-3.5 Turbo - first success
  • Introduced system to block risky patterns/exploits

🔧 Settings

🔗 https://github.com/settings/copilot

  1. Subscription:

    • Individual
    • Business
    • Enterprise (learns codebase, COBOL, scans PRs for the best practices)

  2. Models:

    • GPT-4.0, D3
    • Anthropic Claude 3.7
    • Gemini 2.0 Flash

2.1 Internals

NLP, ML

  1. Input Preprocess – prepare for model context and prompt (code related) → processed_prompt
  2. LM Analysis – neural network analyzes processed_prompt (large body of text)
  3. Generation – LM generates code/suggestion
  4. Output Format – indent/highlight

3. Stats

  • AMD 2023: Specific HDL Language – generated code better aligned with standards.
  • Shopify: Out of 2,000 developers, 75% used Copilot, with 26% accepting suggestions.
  • Accenture: Out of 500 developers, 35% accepted suggestions.
  • General Satisfaction: 75% of users are satisfied with Copilot.

Competitors:

  • Amazon CodeWhisperer
  • Cursor VSCode Fork
  • Claude Code (recent impressive results)

4. Features:

  1. Completion → VSCode (ghost text)
  2. Smart Actions:
  • Explain
  • Fix
  • GenTest
  • GenDocs
  1. Cmd+I → change/refactor
    3.2 Cmd+I in terminal
    3.3 QuickChat
  2. Commits summary - auto-generated
    • PR summary → GitHub interface disabled
    • GitHub VSCode_workspaces_workflow → cloud-hosted dev.env

4.1 Keyboard/Settings

  • Cmd+I → Invoke Copilot
  • Cmd+Shift+I → Chat window
  • Cmd+Alt+Shift+L → Open Copilot settings
  • Tab/Ctrl+Enter → Accept suggestion
  • Esc → Dismiss suggestion
  • Ctrl+Enter → Show all suggestions
  • Alt+][ → Next suggestion
  • Cmd+/ → Add to context

5. Prompts

3S:

  1. Short (CONCISE) – LLM chatterbox, order of sentences sort list|ascending vs. "can you be so kind…" (can have typos and incomplete)
  2. Simple (no multi-tasking) – break down complex tasks
  3. Specific (CONTEXT) – use #tags/@agents

5.1 Context (Working set)

/help

@AGENTS

  • @workspace
  • @vscode
  • @terminal
  • @directory/@file

/SLASH Shortcuts

  • /new - scaffold
  • /generate
  • /fix
  • /tests /doc
  • /explain

#Tags Contexts

#file, #editor, #codebase, #sym

6. Limits

  • Limited Scope → Check GitHub for the types of projects/languages supported. No latest documentation for openfin/esp.js
  • Bias → Can reproduce some bad practices and common errors.
  • Security → Potential risk of leaking client data (Copilot takes care of it).
  • Public Code → Stochastic machine, can produce public code (license issues, vulnerabilities).
  • Inaccurate → Copilot is not a linting tool or compiler (doesn’t fully understand code). Needs human oversight.
  • Codex-Only → not a ChatGPT to answer any questions (code/context related)

7. Demo Time:

  1. Create 3 slides revealJs about Copilot in md format
  2. As FXO team PM, create a project plan to create FXO tile screen
  3. // function that generates random prices for 5 major currency pairs
  4. function generateStock()
  5. extract common code
  6. generate tests right_click
  7. Q/A comments
// Q: what does rxjs stand for? 
// A:
  1. #terminalLastCommand, #codebase
  2. Generator → Create simple Next.js app
    10 @workspace - I want to document how to run this project so that other developers can get started quickly by reading the README.md file

8. Q/A

Resources

🔗 https://learn.microsoft.com/en-us/training/browse/?terms=github%20copilot

@itproto
Copy link
Author

itproto commented Jun 10, 2025

image

@itproto
Copy link
Author

itproto commented Jun 11, 2025

image

@itproto
Copy link
Author

itproto commented Sep 11, 2025 

import React, { useState } from "react";
import {
  DragDropContext,
  Droppable,
  Draggable,
  DropResult,
} from "react-beautiful-dnd";

type PairSelectorProps = {
  availablePairs: string[];
  selectedPairs: string[];
  onChange: (pairs: string[]) => void;
};

const PairSelector: React.FC<PairSelectorProps> = ({
  availablePairs,
  selectedPairs,
  onChange,
}) => {
  const [searchAvailable, setSearchAvailable] = useState("");
  const [searchSelected, setSearchSelected] = useState("");

  const filteredAvailable = availablePairs.filter(
    (p) =>
      p.toLowerCase().includes(searchAvailable.toLowerCase()) &&
      !selectedPairs.includes(p)
  );

  const filteredSelected = selectedPairs.filter((p) =>
    p.toLowerCase().includes(searchSelected.toLowerCase())
  );

  const onDragEnd = (result: DropResult) => {
    const { source, destination } = result;
    if (!destination) return;

    if (source.droppableId === "available" && destination.droppableId === "selected") {
      const moved = filteredAvailable[source.index];
      if (moved) onChange([...selectedPairs, moved]);
    }

    if (source.droppableId === "selected" && destination.droppableId === "available") {
      const moved = filteredSelected[source.index];
      if (moved) onChange(selectedPairs.filter((p) => p !== moved));
    }

    if (source.droppableId === "selected" && destination.droppableId === "selected") {
      const updated = Array.from(selectedPairs);
      const [removed] = updated.splice(source.index, 1);
      updated.splice(destination.index, 0, removed);
      onChange(updated);
    }
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <div className="flex gap-6">
        <div className="flex-1">
          <label className="block text-sm font-medium mb-1">Available Pairs</label>
          <input
            type="text"
            placeholder="Search"
            className="w-full rounded-md border px-2 py-1 mb-2 text-sm"
            value={searchAvailable}
            onChange={(e) => setSearchAvailable(e.target.value)}
          />
          <Droppable droppableId="available">
            {(provided) => (
              <ul
                ref={provided.innerRef}
                {...provided.droppableProps}
                className="h-64 overflow-y-auto border rounded-md p-2 space-y-1 text-sm"
              >
                {filteredAvailable.map((pair, index) => (
                  <Draggable key={pair} draggableId={pair} index={index}>
                    {(prov) => (
                      <li
                        ref={prov.innerRef}
                        {...prov.draggableProps}
                        {...prov.dragHandleProps}
                        className="bg-white border rounded px-2 py-1 hover:bg-gray-50 cursor-move"
                      >
                        {pair}
                      </li>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </ul>
            )}
          </Droppable>
        </div>

        <div className="flex-1">
          <label className="block text-sm font-medium mb-1">Selected Pairs</label>
          <input
            type="text"
            placeholder="Search"
            className="w-full rounded-md border px-2 py-1 mb-2 text-sm"
            value={searchSelected}
            onChange={(e) => setSearchSelected(e.target.value)}
          />
          <Droppable droppableId="selected">
            {(provided) => (
              <ul
                ref={provided.innerRef}
                {...provided.droppableProps}
                className="h-64 overflow-y-auto border rounded-md p-2 space-y-1 text-sm"
              >
                {filteredSelected.map((pair, index) => (
                  <Draggable key={pair} draggableId={pair} index={index}>
                    {(prov) => (
                      <li
                        ref={prov.innerRef}
                        {...prov.draggableProps}
                        {...prov.dragHandleProps}
                        className="bg-white border rounded px-2 py-1 hover:bg-gray-50 cursor-move"
                      >
                        {pair}
                      </li>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </ul>
            )}
          </Droppable>
        </div>
      </div>
    </DragDropContext>
  );
};

const PairFamilyForm: React.FC = () => {
  const allPairs = [
    "AUD/CAD",
    "AUD/CHF",
    "AUD/JPY",
    "AUD/NZD",
    "AUD/USD",
    "CAD/CHF",
    "CAD/JPY",
    "CHF/JPY",
    "EUR/AUD",
    "EUR/JPY",
    "EUR/USD",
    "NZD/USD",
  ];

  const [familyName, setFamilyName] = useState("");
  const [selectedPairs, setSelectedPairs] = useState<string[]>([]);

  const handleSubmit = () => {
    console.log("Family:", familyName, "Pairs:", selectedPairs);
  };

  return (
    <div className="max-w-3xl mx-auto p-6 bg-white rounded-lg shadow-md space-y-4">
      <div>
        <label className="block text-sm font-medium mb-1">Family Name</label>
        <input
          type="text"
          placeholder="Enter a name"
          className="w-full rounded-md border px-3 py-2"
          value={familyName}
          onChange={(e) => setFamilyName(e.target.value)}
        />
      </div>

      <PairSelector
        availablePairs={allPairs}
        selectedPairs={selectedPairs}
        onChange={setSelectedPairs}
      />

      <div className="flex justify-between pt-4">
        <button
          onClick={() => {
            setFamilyName("");
            setSelectedPairs([]);
          }}
          className="px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300"
        >
          Clear
        </button>
        <button
          onClick={handleSubmit}
          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
        >
          OK
        </button>
      </div>
    </div>
  );
};

export default PairFamilyForm;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment