Build your own Copilot Chat Agent

Artificial intelligence is changing the way we develop code and I feel like we have just scratched the surface. For example, Github Copilot is already making waves, but it looks like things are just getting started. Copilot is evolving rapidly, gaining new features every other week. Few weeks ago we had a workshop day for a customer, where I was part of arranging a workshop on how to utilise Copilot and Copilot Chat. Now, a big Copilot release came out and I realised some parts of our workshop are already outdated!

Utilising AI in practical activities is becoming everyday practice for us in solutions for the digital society and smart industry. Small insights and victories are achieved daily, and one example of this are the chat agents of GitHub Copilot. Agents are like specialised experts who can assist you with specific tasks. You can ask for their help by referencing them with @<agent-name> in your chat prompt.

To understand chat agents, let’s look at the two built-in agents: @workspace and @vscode

@workspace

This agent has knowledge of your codebase and it uses a meta prompt to determine what information from the codebase would be relevant and useful for the chat prompt. It then makes the prompt with that additional context. 

In the workshop we had, we faced multiple times the limitation where Copilot chat only referenced our currently open file, therefore not knowing about how to use a class or component from another file. Now, we could use the same prompts, but just add @workspace in front of it, and it would work. This is an excellent example of how Chat agents can give your prompt superpowers!

@vscode

This agent knows about VSCode itself. If you need help with its features and commands, add @vscode to the prompt and get improved results.

Custom Chat Agents

Those built-in agents are cool and useful, but what if you would like to create new ones? Well, it just became possible! In the release notes of VSCode, there is a section on how one can utilise a proposed Agents API to get access to the LLM to use it in Copilot Chat.

Right now it is still in Proposed state and requires jumping through some hoops to try them out, but that’s the nature of this rapid development game! Let’s see what we can build with the API.

Double Agent

All the good spy movies have double agents, so why not create one for us! Copilot typically answers in a neutral manner, not knowing anything about you, if you don’t give any info about you in the prompt. Our agent, called @me, will answer like you would – with your preferences in mind!

Best way to start is to checkout the example agent: https://github.com/microsoft/vscode-extension-samples/tree/main/chat-agent-sample

Let’s modify it for our use case. The magic happens in extension.ts activate function. First thing I did was to remove things that we don’t need for this proof of concept. Main thing to do then is to add the additional context to the messages array. Let’s first define the context:

const personalContext = `Answer as you were me. Here is info about me:

My name is Juha. I live in Helsinki, Finland. I'm an experienced Mobile Developer.

Tools I like to use:
- React Native
- TypeScript
- React
- React Navigation
- Styled components for styling react components
- Jotai for state management
- Android Java/Kotlin
- iOS Objective-C/Swift
`

For POC purposes having the context in a variable is okay, in actual extension we probably would extend configurations so the user could set it in the settings.

Now let’s add it to the messages array:

    	const messages = [
   		 {
   			 role: vscode.ChatMessageRole.System,
   			 content: personalContext,
   		 },
   		 {
   			 role: vscode.ChatMessageRole.User,
   			 content: request.prompt,
   		 },
   	 ];

And last, let’s config the chat agent to our liking:

const agent = vscode.chat.createChatAgent('me', handler);


agent.iconPath = vscode.Uri.joinPath(context.extensionUri, 'agent.png');
agent.description = vscode.l10n.t('Get answers from yourself!');
agent.fullName = vscode.l10n.t('Double Agent');

Results

We can test how this works by running the extension in debug mode.

Here we can see the custom chat agent has been registered successfully and is available.

Here we can see that the additional context is working. Without the context, Copilot Chat would not have known my name (I hope!).

So how about a real life example, while developing. Let’s try to get an example React component and see the difference in responses depending on whether we use our chat agent or not.

Here we can see that without the custom chat agent, the results show a React component with inline styling. However, this is not what I would want. Let’s see the results when it uses our chat agent:

Exactly the same prompt, except our custom agent added the additional personal context, where Copilot chat is able to pick up my preference for using Styled components for React component styling!

Conclusion

We live in exciting times, where we are able to incorporate AI more and more to our developer activities. Copilot Chat custom chat agents offer an easy way to extend its functionality and I look forward to seeing what kind of chat agents will pop up.

What chat agents would you want for your development flow? What would bring the most value for you / your company?

Gofore’s expertise in AI solutions is at your disposal. If you’re curious about AI’s potential or have specific needs, let’s connect. Reach out to us and let’s harness the power of AI together.

---

Unlock the full potential of your organisation’s knowledge work with Generative AI