Bringing the Power of AI into your Editor with GitHub Copilot

Rate this content
Bookmark

GitHub Copilot is an AI pair programmer tool that puts the collective knowledge of millions of developers right at your fingertips, directly in your IDE.

During the talk, Krzysztof, a core team member behind GitHub Copilot, will demo how Copilot works and discuss the design principles used while creating the project.

He will also dive into some of the project's technical details - how Copilot communicates with its AI, what ""queries"" it uses, how it processes responses, and how it integrates with various IDE to create characteristic Copilot's UX.

This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

GitHub Copilot is a software development productivity tool that functions like an advanced autocomplete, suggesting not only single words but entire blocks of code based on the context of your work. It is powered by the Codex AI model developed by OpenAI.

GitHub Copilot suggests code snippets directly in the editor as you type, adapting to the context and coding style of your project. It can improve coding productivity by suggesting 35% of the newly written code, potentially saving hours of coding time.

While GitHub Copilot was initially available for free during its technical preview, it is planned to become a paid product. However, it will remain free for students and verified open source contributors.

Yes, GitHub Copilot supports multiple code editors. While Visual Studio Code is the primary platform, it also supports all IDEs in the IntelliJ suite, Neovim, and Visual Studio, among others.

Currently, GitHub Copilot focuses on suggesting new code. Although it does not suggest code removal as of now, future enhancements to AI-driven development tooling may include such features.

No, using GitHub Copilot is not considered cheating. It is a tool designed to assist developers by improving productivity and efficiency, much like how other IDE features and tools are intended to aid in software development.

Yes, GitHub Copilot adapts to your personal coding style by analyzing the code in your currently open files and tabs. This personalized approach helps tailor suggestions more closely to your coding preferences.

GitHub Copilot generates suggestions based on a general model and does not share your private code. Changes made to suggestions are analyzed for overall effectiveness, but specific edits are not used to train the model directly.

Krzysztof Cieślak
Krzysztof Cieślak
29 min
16 Jun, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
GitHub Copilot is a software development productivity tool that suggests whole blocks of code based on the collective knowledge of software developers. It has been in technical preview for a year and is used by thousands of developers. Copilot's success has grown over time, and it now supports multiple editors and programming languages. The AI model used in Copilot, called Codex, operates on natural language and doesn't require special encoding. Copilot will become a paid product in the summer but will remain free for students and verified open source contributors.

1. Introduction to GitHub Copilot

Short description:

GitHub Copilot is a software development productivity tool that suggests whole blocks of code based on the collective knowledge of software developers. It uses an AI model trained on billions of lines of publicly available code. The suggestions adapt to the coding style and context, providing a unique user experience. GitHub Copilot has been in technical preview for a year, with thousands of developers using it. 35% of newly written code in files with Copilot enabled is suggested by Copilot, making the development process more productive.

Thank you for listening. Hello, everyone. First of all, I'm really, really glad that you are all here. It's been the last two years were difficult, of course, so thank you all for being here.

Yeah, my name is Krzysztof, and I have some fancy title at GitHub. It doesn't really matter. I've been working for the last year and a half on a project called GitHub Copilot. Hopefully, many of you have heard about GitHub Copilot. It has been a hyped topic on the Internet and the social media, but if you haven't, let me quickly introduce you to GitHub Copilot.

So what it is? Basically, it's a software development productivity tool. You can think about it as a bit more powerful autocomplete. However, unlike traditional autocomplete systems, it's not powered by the semantic information or static code analysis, or anything like that. Instead, it's using codex AI model developed by OpenAI that has been trained on collective knowledge of us all, software developers, in the form of billions of lines of code publicly available on the internet. Thanks to that, GitHub Copilot is not limited to suggesting only single words, like variable names or function names, like in the case of traditional autocomplete systems. Instead, we can try to suggest whole blocks of code, multiline blocks of code, that tries to adapt to the current context, tries to figure out what is your next step, what you're planning to do. Those snippets, those suggestions adapt to the coding style, to using other files, other functions from your project, and much more. And because of that, we had to come up with a bit different user experience for those suggestions. using traditional auto complete widget, which is a list of functions, instead we designed this user experience of having this inline, virtual text that's displayed directly in the editor, and I will talk a bit more about that in a moment.

However if you haven't seen GitHub Copilot yet, I do have a quick video for you to demo it, and I'll be talking while this video is playing. As you can see this grey text thingy, those are suggestions that are suggested by GitHub Copilot. They are updated as you type in your editor, so you don't need to make any additional action to get those suggestions, you just type in your editor code as you would normally code, and we just try to suggest something useful for you that's hopefully helpful. In this particular demo, there are only single-line completions, but we can also suggest multi-line completions in some cases. So, you probably want to ask me, yes, this looks cool at the demo, but is it actually useful and does it actually produce any value to the users, improves your productivity? So, as it was mentioned in the introduction, Copilot has been in technical preview for almost a year. We've released it in late June last year, so it's literally one year right now, and it has been used by thousands and thousands of software developers around the world. I cannot, of course, share any specific numbers on that, however, there is one number that I can share, and this is this number. So, for the users that have Copilot enabled on their file, we see that 35 per cent of the newly written code in this file has been suggested by the GitHub Copilot. I mean, of course, software development is not just typing the code, but imagine if you type code by a couple of hours every day, if that process is 35 per cent more productive, that means that you have maybe two hours more of your time back. That's really amazing. This number has been growing steadily for last year. We haven't started with this number.

2. Technical Details and Success of Copilot

Short description:

We started with a much lower number and it has been growing. Our estimations are high in the next couple of years. When I joined the team, we had a simple architecture using a Visual Studio code extension and communicating directly with AI codecs hosted by Open AI. Copilot has become a successful product with a lot of hype on the internet.

We started with a much lower number. It has been growing given the improvements that we've done to the project for over last year. Also, we are sure that we can bring this number way higher. Our estimations are high in the next couple of years.

So, that was marketing. And now let's go into technical details because I'm a software developer. I'm not really trying to sell you a product. I'm here to talk about what we do. And also, as a note, I'm not a data scientist. I'm not an AI guy. I'm working on this project because I have been a developer tooling expert. I have a lot of experience with Visual Studio code extensions and other developer tools. So, that's my role in the team. So, I'm not going to go too deep into AI or how it works. I just don't really understand that. And that's fine. I imagine that most of us are not AI experts or data scientists. We are just software engineers that try to build useful stuff for our customers.

So, when I joined the team and when Copilot started as a project, we were using really simple architecture. We had Visual Studio code extension written in TypeScript, and then we were just communicating directly with AI codecs hosted on by Open AI. You can do that in your projects right now. You need to access to Open AI for access to the preview or beta program, whatever it's called. And then just send HTTP request to it, and it will respond. Actually, this is the architecture that we started our technical preview with around a year ago. There were some additional calls to the github.com for authentication, but that's boring stuff. In principle, it was as simple as that.

And then, Copilot has become a fairly successful product. There has been a lot of hype on the internet about the product, and people, most common question that people were asking, hey, can I use Copilot in IntelliJ? Can I use Copilot in NeoVim? Can I use Copilot in Visual Studio? Okay. Yeah. No one asked that.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Modern Web Debugging
JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
Watch video: pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
pnpm is a fast and efficient package manager that gained popularity in 2021 and is used by big tech companies like Microsoft and TikTok. It has a unique isolated node module structure that prevents package conflicts and ensures each project only has access to its own dependencies. pnpm also offers superior monorepo support with its node module structure. It solves the disk space usage issue by using a content addressable storage, reducing disk space consumption. pnpm is incredibly fast due to its installation process and deterministic node module structure. It also allows file linking using hardlinks instead of symlinks.
Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React
React Advanced 2021React Advanced 2021
27 min
Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React
Top Content
The Talk discusses optimizing rendering of big tables using Flipper, a new version that is ten times faster with improved user interaction and richer data. It explores optimizing rendering with React, virtualization, filtering, sorting, and windowing techniques. The introduction of the Flipper Datasource packet simplifies handling updates, inserts, and removals. The performance of the Flipper data source package is excellent, even in a debug build of React, with minimal CPU usage. The Q&A session covers incremental sorting, dynamic row height, and the potential for two-dimensional virtualization in the future.
Debugging with Chrome DevTools
JSNation Live 2021JSNation Live 2021
11 min
Debugging with Chrome DevTools
Here are some tips for better utilizing DevTools, including using the run command, customizing keyboard shortcuts, and emulating the focus effect. Learn how to inspect memory, use the network panel for more control over network requests, and take advantage of console utilities. Save frequently used code as snippets and use local overrides for easy editing. Optimize images by using a more optimized format like AVIF and track changes in the network panel to see the reduced data size.
High-Speed Web Applications: Beyond the Basics
JSNation 2022JSNation 2022
30 min
High-Speed Web Applications: Beyond the Basics
This talk covers the latest features in Chrome DevTools, including network tab analysis, performance tab optimization, and user flows. It discusses optimizing HTTP requests with fetch priority to improve loading time. The performance tab provides insights on frame drops, long tasks, and the importance of minimizing total blocking time. The talk also highlights the optimization of page rendering and introduces user flows in Chrome DevTools.

Workshops on related topic

React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Mastering advanced concepts in TypeScript
React Summit US 2023React Summit US 2023
132 min
Mastering advanced concepts in TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript is not just types and interfaces. Join this workshop to master more advanced features of TypeScript that will make your code bullet-proof. We will cover conditional types and infer notation, template strings and how to map over union types and object/array properties. Each topic will be demonstrated on a sample application that was written with basic types or no types at all and we will together improve the code so you get more familiar with each feature and can bring this new knowledge directly into your projects.
You will learn:- - What are conditional types and infer notation- What are template strings- How to map over union types and object/array properties.
Integrating LangChain with JavaScript for Web Developers
React Summit 2024React Summit 2024
92 min
Integrating LangChain with JavaScript for Web Developers
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.
From Todo App to B2B SaaS with Next.js and Clerk
React Summit US 2023React Summit US 2023
153 min
From Todo App to B2B SaaS with Next.js and Clerk
WorkshopFree
Dev Agrawal
Dev Agrawal
If you’re like me, you probably have a million side-project ideas, some that could even make you money as a micro SaaS, or could turn out to be the next billion dollar startup. But how do you know which ones? How do you go from an idea into a functioning product that can be put into the hands of paying customers without quitting your job and sinking all of your time and investment into it? How can your solo side-projects compete with applications built by enormous teams and large enterprise companies?
Building rich SaaS products comes with technical challenges like infrastructure, scaling, availability, security, and complicated subsystems like auth and payments. This is why it’s often the already established tech giants who can reasonably build and operate products like that. However, a new generation of devtools are enabling us developers to easily build complete solutions that take advantage of the best cloud infrastructure available, and offer an experience that allows you to rapidly iterate on your ideas for a low cost of $0. They take all the technical challenges of building and operating software products away from you so that you only have to spend your time building the features that your users want, giving you a reasonable chance to compete against the market by staying incredibly agile and responsive to the needs of users.
In this 3 hour workshop you will start with a simple task management application built with React and Next.js and turn it into a scalable and fully functioning SaaS product by integrating a scalable database (PlanetScale), multi-tenant authentication (Clerk), and subscription based payments (Stripe). You will also learn how the principles of agile software development and domain driven design can help you build products quickly and cost-efficiently, and compete with existing solutions.
Building Pinia From Scratch
Vue.js Live 2024Vue.js Live 2024
70 min
Building Pinia From Scratch
Workshop
Eduardo San Martin Morote
Eduardo San Martin Morote
Let's dive into how Pinia works under the hood by building our own `defineStore()`. During this workshop we will cover some advanced Vue concepts like dependency Injection and effect scopes. It will give you a better understanding of Vue.js Composition API and Pinia. Requirements: experience building applications with Vue and its Composition API.
Mastering 3D Web Development with TresJS ecosystem: A Vue.js Workshop
Vue.js Live 2024Vue.js Live 2024
119 min
Mastering 3D Web Development with TresJS ecosystem: A Vue.js Workshop
Workshop
Alvaro Saburido
Alvaro Saburido
Introducing "Mastering 3D Web Development with TresJS," a specialized workshop crafted for Vue.js developers eager to explore the realm of 3D graphics within their web applications. TresJS, a powerful custom renderer for Vue, is specifically designed to work seamlessly with Vue's reactive system. This workshop offers a deep dive into integrating sophisticated 3D visualizations and interactive experiences directly into Vue applications, leveraging the unique strengths of both Vue and TresJS ecosystems.
This workshop is designed for Vue.js developers looking to expand their skill set into the third dimension, UI/UX designers interested in incorporating 3D elements into web applications, and front-end developers curious about the potential of 3D graphics in enhancing user experiences. You'll need to be familiar with Vue.js to benefit from this workshop fully.
What You Will Learn- Introduction to TresJS: Discover the fundamentals of TresJS and how it integrates with the Vue ecosystem to bring 3D graphics to life.- Creating 3D Scenes with Vue: Learn to construct intricate 3D scenes utilizing Vue components, enhancing your user interfaces with dynamic and immersive visuals.- Interactivity and Animation: Master the techniques to make your 3D scenes interactive, responding to user inputs for a captivating user experience.- Integrating with Vue Features: Explore advanced integration of TresJS with Vue’s reactivity, composables, and the Vuex store to manage state in 3D web applications.- Performance and Best Practices: Gain insights into optimizing your 3D scenes for performance and best practices to maintain smooth, responsive web applications.