Copilot Demo Script

script.md

Copilot Demo Script

A few items to be aware of...

1. Press ENTER twice when using instructional comments. Copilot often requires the second line break to pick up on the intent correctly.

Ghost Text

"There are two extension for GitHub Copilot. We'll look at both. The first one is the GitHub Copilot extension itself. You can install that from the extension marketplace. [show extension in marketplace]. Once installed, you'll need to sign-in with your GitHub account. If you don't already have an active Copilot subscription, you'll need to activate one in order to use GitHub Copilot."

"The GitHub Copilot extension powers an experience that we call, 'Ghost Text'"

1. Start writing a function to perform a trivial task

   function helloWorld

   "This is the simplest way to use Copilot. It's called 'Ghost Text'. You just code, and Copilot completes what you are coding. It willo also anticipate your next move and write that code for you."

2. Press ENTER so as to put a blank line between the end of the function. Start creating a main function. Let Copilot complete it. It will call the helloWorld function in the body.

   function main

   "Copilot anticpates that I want to call the Hello World function my main function. And if I keep going..."

3. Press ENTER so as to put a blank line in between the end of the main function, let copilot call the main function.

   "The other way to work with Copilot is to use comments to specify what you want - your intent. For instance, let's say we want a function that sanitizes a string for HTML characters."

4. Write the following comment. Hit ENTER twice. If Copilot does not start writing the function, start typing function and then wait.

   // write a function that removes html characters from a string

   "Copilot creates the function. Just like with all LLM's, the more specific you are with your command, the better the result Copilot can give you."

5. Delete the function created by Copilot. Modify the comment.

   // write a function that sanitizes a string for html. Call it sanitizeString.

   "Now we've been excepting the result that Copilot sends back, but we don't have to settle for that. If we want to see more suggestions, we can press Cmd/Ctrl + ENTER to open up the Copilot suggestion pane."

6. Delete the function and trigger it again by starting to type function under the comment. When the ghost text appears, press Cmd/Ctrl + ENTER.

   "Some additional suggestions are also provided inline."

7. Delete the function and then trigger it again by starting to type function under the comment. When the ghost text appears, hover over it with your mouse. The pop-up menu will appear above the text.

   "This is a reduced set of options - ones that are most similar to each other. A lot of times you'll only get one suggestion here."

Chat

"From here on out, everything we'll look at is powered by the GitHub Copilot Chat extension. You can find this extension in the marketplace as well. If you already have GitHub Copilot installed, you won't need to sign in for chat to work. Once you have installed chat, you'll see a chat icon in the VS Code sidebar."

1. Click on the chat icon in the VS Code sidebar.

   "The chat interface is similar to what you may be used to with ChatGPT. But there are some pretty big differences that matter. Let's ask it "

2. Type "How can I create a webapp using Python". The chat should give you a Flask code snippet.

   "You can see here that we've been given some boilerplate code. We can either copy this to the clipboard using the copy button, insert at the cursor position, or copy into a new file."

3. Click on the "insert into new file" button. Save it as app.py.

   "Now we can ask how we run this."

4. Type "How do i run this" into the chat. You'll likely get back an explanation. If you don't get a code block that says python app.py, retry the command with "give me the exact command".

   "The other option we have is to insert code from the response directly into the terminal."

5. Click on the "insert into terminal" from the elipses menu. Press ENTER. You'll get an error in the terminal.

   "We've gotten an error here. We can just paste this right back into the chat without giving it any other context."

6. Copy the error out of the terminal and paste it directly into the chat box. You'll be instructed to run 'pip install flask'. Run that in the terminal.

7. Run the python app.py command again. View the site in the browser.

"A few more things about the chat experience in the sidebar. You can move it to the editor window if you need more space as the sidebar can feel a tad constrained."

1. Click on the ellipses at the very top of the Copilot panel and select "Open session in editor". This will move the chat session to the editor where it shows up as a tab.

"You can also reload previous chat sessions to pick up where you left off. Note that chat sessions are specific to a workspace, not the entire editor. So if you carried on a chat in another workspace it won't be visible here. That said, you can also export chat sessions and import them. This can be great for importing into a new workspace or sharing with colleagues. Clearing the chat can be done from the clear button at the top."

1. Click on the history icon at the top of the Copilot Panel to show the history picker.

2. Open the Command Palette with F1 (Cmd/Ctrl + Shift + P) and search for "export session". Select the option and save the JSON to a file in the current workspace.

"There are many other ways to use chat outside of the traditional experience. The inline chat puts the chat experience in the editor where you code is. Let's create an index.html file with an h1 and return that on the root route instead of just 'Hello World'".

1. Create a new file called 'index.html'. Put HTML boilerplate in it (press ! at the top of the file and press Tab). Add an h1 to the body that says "Hello World".

2. Highlight the root route in the app.py file. Press Cmd/Ctrl + I to open the inline chat. Type "How do i return an html file?".

   "Inline chat can suggest code changes right inline. When it does this, it gives you a diff view with the suggested changes on the right and your code on the left. If you press escape, none of the suggested changes will be applied. If you press accept or Cmd/Ctrl + Enter the suggestions will be applied directly inline."

3. Copilot may create a second route where it tries to pull from '/static'. If this happens, simply iterate in the inline chat until you get the result that you want, which is a static index file returned on the root route. Restart the app to view the changes.