Exploring Github Copilot in the web by building a simple Q&A page

Dec 15, 2024

AI-powered programming assistants are on everyone’s mind. They are already altering the workflow of developers, and in the future, they could completely redefine the way we code, making it unrecognizable compared to today. Many companies are working in this field, but Github, with its Github Copilot, has been a pioneer in integrating AI into the development process. Will it fall behind? Will it regain leadership in this field? Only time will tell.

In this article, we will explore Github Copilot by creating a simple trivia web application using only pure HTML, CSS, and JavaScript, avoiding frameworks and libraries to keep the example straightforward. Github Copilot offers multiple ways to use it: from plugins for popular IDEs like Visual Studio Code and Jetbrains to its web version, which, still in preview mode, allows you to ask generic questions, index repository code to consult specific aspects of the project, and even explore features of Github’s own interface, like creating a new repository, making a Pull Request, or configuring repository options. In this case, we will use the web version, directly integrated into Github.

To use this version, it is necessary to be enrolled in the preview program and have an active subscription to Github Copilot. Once these requirements are met, simply access github.com, create a new repository or select an existing one. You will find the Copilot icon in the bottom right corner. Clicking on it will open an integrated chat directly within Github’s interface, similar to the plugin available in IDEs but designed to work directly from the browser.

Github interface showing a repository called 'simple-trivia', with a list of files in the main branch and a Copilot chat panel open in the bottom right corner, indicating that it is indexing the repository.

To start interacting with Copilot, we first define the list of tasks to be completed, which we then provide as instructions for Copilot to assist us. We will build a simple web application from scratch that allows users to answer questions stored in a JSON file. Feel free to try Copilot by interacting with the simple-trivia repository we created for this example. Once the repository is set up, the interaction with Copilot begins to create the project.

It is clear that the tool is still in beta; while it can occasionally modify files directly, most of the time it simply provides changes through the chat. It would be ideal if future versions included the ability to make modifications directly via Pull Requests, a feature that is likely under development. For now, modifications must be made manually, which can be somewhat tedious, especially considering that Github’s user interface and workflow are not the most convenient for this purpose.

The defined tasks are as follows:

• Create the project structure with the necessary source files for a simple trivia web application, where the user can visually see a question and three possible answers, only one of which is correct.
• Retrieve the questions and possible answers from a local JSON file with some default examples.
• Design the background with a full-screen gradient transitioning from deep blue to light blue.
• Use the Roboto font for the question text, styled in dark gray (#212121) to improve readability.
• Design buttons with a base background color in primary green (#4CAF50). Include hover effects where the background transitions to a lighter green (#66BB6A), with rounded corners, subtle shadows, and a glowing border effect using a soft green glow (#A5D6A7) when selected.
• Create a responsive design to ensure the visual structure adapts to devices of different screen sizes, making the content readable and accessible on all devices.
• Add a fade-in animation for the container with the questions and answers when loaded.
• Create a README file with clear instructions on how to download the source code and run the application in the browser.

Once the tasks are defined, we simply tell Copilot what we need, and it provides the necessary changes. As mentioned earlier, sometimes it makes the changes directly, while other times it provides the code needed to complete the task. It’s worth noting that some tasks were not fully completed to achieve the final result, especially those related to design, which tends to be more challenging for Copilot. For example, the buttons did not include the glow effect as initially requested. In such situations, it’s important to refine the task descriptions to help Copilot better understand what we want and execute it correctly.

Trivia game interface showing a card with the question 'What is the capital of France?' along with three answer buttons: 'Berlin,' 'Madrid,' and 'Paris,' displayed over a light blue gradient background.

The current state of Github Copilot is very promising, although it still has a long way to go. Compared to its IDE version, it feels quite limited, but its potential is evident if it continues to improve with new features and capabilities. One of the main shortcomings, as mentioned earlier, is the inability to directly modify the code in the repository, something that would be extremely useful. For now, it resembles more of a ChatGPT integrated into a browser tab, aimed at answering queries rather than being a full-fledged development tool. However, this could change in the future. With 2025 just around the corner, it’s highly likely that Github will introduce exciting new updates over the coming year.

It’s also worth noting that the project indexing feature, which allows Copilot to access the repository’s source code and provide more accurate suggestions, is limited to a specific number of repositories per user. This means that if you have multiple projects in your Github account, you may not be able to use this feature for all of them. To activate it, each repository must be indexed manually using the specific option provided by Copilot.

Github interface showing a repository called 'particle-painter,' with a directory and file structure. In the bottom right corner, the Copilot panel suggests indexing the repository to improve natural language search.

In summary, Github Copilot is a fascinating tool that, although still in its early stages of development, holds great potential for the future. While its current limitations make it less powerful than its IDE-integrated version, it remains a very useful option for obtaining quick and accurate suggestions directly from Github, without the need to install additional software.

If you’re interested in trying it out, you can check the source code entirely generated by Copilot and experiment with it yourself in the browser through this link. And remember, always Happy Coding! Although, this time, with less coding and more happy thanks to Github Copilot. 😉