Copilot Agent Toolkit is a VS Code extension for designing and customizing Microsoft Copilot agent interfaces
– The extension generates complete styleOptions for Microsoft Bot Framework WebChat
– Has Bot Framework WebChat CDN integration
– Provides DirectLine token endpoint configuration
– Method works for non-authenticated chatbots only
Link to Download: https://marketplace.visualstudio.com/items?itemName=RamakrishnanR.copilot-agent-tools
Copilot Agent Toolkit allows you to design UI Theme for your agent / copilot and the components that can be configured using this tool is listed below:
– autoscroll
– avatar (user / bot)
– bubble
– emojiset
– font
– hideuploadbutton
– padding
– sendbox
– spinner
– suggested Action
– typing Animation
Copilot Agent Toolkit is a VS Code extension for designing and customizing Microsoft Copilot Studio agent interfaces or any bot built using the Bot Agent Framework
Sample customized agent using Copilot Agent Toolkit is shown below:
THEME GALLERY
There are several out of the box theme that are pre-configured for quick selection for your agents. Modern Purple, Dark Professional, Light minimal, Teams Inspired and Ocean blue theme are available for you to use for your agents. Additionally, you can also customise an existing theme to suit as per your brand template or organisational brand template. If mock DirectLine is enabled, then you will be able to view the output for any change you make to the theme
AVATAR BUBBLE
The Avatar for the chat window can be configured for size, border radius, bot avatar background color, bot image url and bot initials. The same settings can also be configured for User avatar. The bubble radius, height, user background color, text color, border color corresponding to bot and user avatar can also be configured
FONT SEND BOX
You can configure primary font, monospace font, height and width, accent and background color for Send Box.
Additionally, you can also configure Background color, Button color, Text color and placeholder color for the send box. You can also configure an option to Hide he Upload button.
SUGGESTED ACTIONS
Allows you to configure colors, border radius, border width and layout for suggested actions.
Additionally, you can configure font size, message box width and show / hide emoji set
