Copilot Basics: Models & Modes

Copilot Basics: Models & Modes

In this section, we’ll introduce core Copilot concepts by vibe-coding a game! Feel free to follow along in your own editor and build something fun.

Alright, now let's actually start using Copilot. We're going to work in VS Code, which is the best environment for this. Make sure you have the GitHub Copilot extension installed.

Once it's installed, you'll see a little chat bubble icon at the top of VS Code. Click that to open the Copilot chat window. From here, the recommended setup is:

  • Left panel: your file system / project

  • Middle panel: open files

  • Right panel: the Copilot chat window

Copilot has access to whatever project you have open, so it can read and work with your files directly from the chat.

Picking a Model

The first thing to know about is the model picker at the bottom of the chat window. This defaults to Auto, which means Copilot will just choose a model for you — that's totally fine and comes with a small cost discount.

But if you want to choose manually, you can click the model picker and select from models made by Anthropic (Claude), OpenAI (GPT/Codex), Google (Gemini), xAI (Grok), and others. The lineup changes over time, so just know the options will vary.

A quick note on cost. Most Copilot plans come with a set number of premium requests per billing period. Each model has a multiplier that determines how many premium requests each message uses:

  • Free models — unlimited, doesn't touch your budget

  • 1x models — one premium request per message

  • Fractional models — cheaper than one request per message

  • Higher-end models — can be 3x, 7x, even 10x per message

The multiplier is a decent signal for how capable the model is. More expensive usually means more powerful. You can check your usage by clicking the Copilot icon at the bottom of the chat.

Some models also have a thinking effort toggle (low / medium / high) which controls how much reasoning the model does before responding.

A good starting point is just a 1x model or Auto. We can get into strategy around model selection as we go.

Ask Mode — Designing the Game

Now let's look at the different modes Copilot can run in. There's a mode dropdown at the bottom of the chat window, and by default there are three options: Ask, Plan, and Agent. We're going to work through all three.

Let's start with Ask mode. This is the simplest mode — it's basically just chatting back and forth with Copilot, like you would with ChatGPT or Claude on the web. In this mode, Copilot isn't going to edit any files or run any commands. It's purely conversation.

For our demo, we're going to vibe-code a little game. So let's switch into Ask mode and send Copilot a message asking it to help us brainstorm some game ideas. Once it responds with some options, we'll pick one and follow up to flesh out the concept and the game mechanics.

This is exactly what Ask mode is for — talking through ideas, making decisions, building up a shared understanding with Copilot before any code gets written. And importantly, every message you send includes the full conversation history, so Copilot remembers everything you've discussed. The more you flesh things out here, the better it'll be able to implement things later.

Choose a game

 

Flesh out the game mechanics in the chat

 

We're going to go with a Neon Snake game. Feel free to pick whatever sounds fun to you.

Using Tools — Searching the Web

Now that we have our game concept, let's say we want to look up a nice neon color palette online. This is a good excuse to talk about tools.

Tools are what allow Copilot to actually go out and do things beyond just chatting. You can see all the available tools by clicking the tools icon at the bottom-right of the chat window. The tools that are available depend on which mode you're in — in Ask mode, you get a limited set.

Open the tools menu by clicking the icon

 

Explore and toggle Built-in tools

One of the tools available in Ask mode is the fetch tool, which lets Copilot browse the web. To use a specific tool, you can reference it with a # — for example, type #fetch in your message. Copilot can also figure out which tool to use on its own, but being explicit is more reliable.

So let's ask Copilot to use the fetch tool to find us a good neon color palette for the game.

When Copilot tries to fetch something from the web, it'll ask for your approval first — you'll see a little prompt pop up. This is by design: anytime Copilot wants to do something that has potential side effects (fetching a URL, editing a file, running a command), it checks in with you first if the action seems risky.

 

You can control this behavior with the approvals dropdown at the bottom of the chat:

  • Default — Copilot decides when to ask

  • Bypass — auto-approves everything

  • Autopilot — runs continuously and makes decisions on your behalf without checking in

Go ahead and approve the fetch request, and Copilot will go off, read through some pages, and come back with a color palette we can use.

Color pallet Copilot found using #fetch

Plan Mode — Planning the Implementation

At this point we've got our game concept and our color palette. Now before we write any code, we're going to make a plan. This is important — AI agents work best when they have a clear, step-by-step plan to follow.

Switch over to Plan mode using the mode dropdown. This mode is specifically optimized for creating implementation plans. It has its own set of tools and instructions tuned for this kind of work.

Pro tip: this is a good time to switch to a more powerful model.

The planning phase involves a lot of reasoning and research — getting the plan right is the most important part of the whole process. Once the plan is done, you can switch back to a cheaper model for the actual implementation.

 

Go ahead and ask Copilot to write an implementation plan for the game. It'll break the work down into phases — it might also do some research on any existing code you have, and it'll map out exactly what needs to be built.

The plan gets added directly to the chat, so every message you send after this will include it as context. If you want, you can also ask Copilot to write the plan out to a spec file in your project so you can review and edit it manually.

 

Once the plan is ready, Copilot will give you some options — you can start the implementation, open the plan in the editor, etc.

Agent Mode — Writing the Code

Now we're ready to actually build the thing. Switch over to Agent mode (and feel free to switch back to a less expensive model now that the plan is in place).

Agent mode is full-power mode. Copilot has access to all of its tools here — it can edit files, run commands, run tests, start servers, do research, you name it. Just tell it to start the implementation.

Once you kick it off, you'll see Copilot do one or more of the following:

  1. Create a to-do list to track its own progress

  1. Start creating and editing files — these show up highlighted in green, and you can accept or reject each change individually

  1. Ask for approval before running commands like tests or starting a server

  1. Run your tests directly in an embedded terminal and show you the output

  1. Spin up a local server so you can preview the app in the browser

Note: that your experience here may vary, for example if you don't ask it to write tests or spin up a web server it probably won't.

By the end of it, we should have a working Neon Snake game. Pretty cool.

 

Adding Context

Once we have some code, we can make targeted changes using a few different techniques. Here's how to add context to your Copilot chat:

  • Ghost text — as you type in the editor, Copilot suggests completions inline. Just start typing (like the word function) and it'll suggest what comes next. Press Tab to accept.

  • Highlighting code — select lines in the editor and they'll automatically be pinned as context in the chat window. Then just ask Copilot to refactor, explain, or modify that specific code.

  • Drag and drop files — you can drag files from your file system directly into the chat to add them as context. This works for code files and images too. For example, drag in an image and ask Copilot to match the game's background colors to it.

Drag & drop any file from the file explorer

 

  • The + button — another way to attach files or images to the chat without drag-and-drop.

The more targeted and specific the context you give Copilot, the more precise its edits will be.

History & Checkpoints

Every edit Copilot makes during a chat session is tracked as a checkpoint. If things go sideways or you want to undo a bunch of changes at once, you can go back to an earlier message in the chat and click the Restore Checkpoint button. This will roll back all file changes made after that point.

In this case we've asked Copilot to change the background of the game. We can undo this by restoring the checkpoint right before Copilot made the change.

You can also click on any past message and edit it directly — Copilot will undo everything that happened after that message and re-run from there.

Other Things to Know

A few more UI features worth being aware of:

  • Context window indicator (bottom-right of chat) — shows how full Copilot's memory is. When it gets too full, Copilot will start to compact the conversation, or you should just open a new chat.

Open a new chat if this get’s too full
  • Local/environment dropdown (bottom-left) — lets you switch between running Copilot locally, from the cloud, or via CLI. You probably won't need this much but it's good to know it's there.

  • Start a new chat often — this is a good habit. Whenever you finish a task or have been going for a while, open a fresh chat. Too much accumulated context can cause Copilot to lose focus.

 

Key Takeaway:

When you're using Copilot, always have these three questions in the back of your mind:

  1. Which mode am I in?

  2. Which model am I using?

  3. Which tools are available to me right now?

Next Steps

Time to put it all together. In the next section, you'll run through the full Ask → Plan → Agent workflow on your own codebase.

https://wiki.at.bitovi.com/wiki/spaces/AIEnabledDevelopment/pages/2180677710