Browser Copilot is a browser extension that allows you to use existing or custom-built AI assistants to help you in everyday web application tasks.
Motivation
The goal is to provide a versatile UI and simple framework to implement and use an ever-increasing set of copilots (AI assistants). These copilots can help in a wide range of tasks by taking advantage of browser extension capabilities.
Here are a few examples of what these copilots can do:
- ๐ค Automatically activate copilots that are relevant to specific web applications. For instance, a Mail Copilot can activate when a Mail web app is loaded in a browser tab.
- ๐ Extract information from the current web application. For example, the copilot could extract current mail content, from a Mail web app, and provide a summarization of the mail, or users may ask questions about the mail contents.
- โ๏ธ Interact with web applications. A copilot could generate mail bodies based on user requests. It could also fill web app form fields with appropriate test data.
- ๐ Use any service API to extract additional information or automate web app processes. For example, the copilot could retrieve valid examples from the web app backend to populate frontend forms.
- ๐ก Many other ideas and capabilities can be explored by combining the browser extension with AI and LLM capabilities.
Usage
- Install the extension in your browser by downloading the latest version from the releases. To install an extension from a zip file you need to go to your browser โManage Extensionโ screen, enable developer mode, and drag and drop the extension zip file.
- Open the extension by clicking on its icon and add a new copilot by providing its base URL. The base URL should correspond to the location of
manifest.jsonandlogo.png, for example:http://localhost:8000if your agent is running locally. - Start a new chat by clicking on a configured copilot, or, if the copilot has automatic activation, just use your browser and the copilot chat will automatically appear when the copilot activates.
- Save your preferred prompts directly from the chat. To quickly access them later, simply type โ/โ in the chat input.
At any point, you can close the copilot to later resume the conversation by the extension icon or right-clicking on the page and selecting Toggle Browser Copilot.
If you donโt know any copilot URLs, this project includes a simple copilot implementation in agent folder. You can start it by copying agent/sample.env to agent/.env, changing the environment variables on it, and running docker-compose up (docker is required for this). Once started, you can configure your extension to use it by adding a copilot with the URL http://localhost:8000.
In the future, we plan to add a catalog of copilots contributed by the community. Therefore, if you create new copilots, please let us know so we can include them in the initial catalog.
Development
Agent Development
To develop a new agent, you can refer to the agent folder for a simple example.
For the development environment, this project uses devbox and direnv.
To install all required dependencies (after installing devbox and direnv), run the following command:
devbox run install
Next, set appropriate environment variables in agent/.env.
To run the agent in dev mode, enabling automatic hot-reloading whenever any changes are detected in the agent source files, execute the following command:
devbox run agent
If you want to debug the agent, you can start the agent with your preferred IDE, pointing to the relevant virtual environment created by devbox, and using IDEโs debugger capabilities to run the main script.
For more details about the agent, please refer to its readme.
Browser Extension Development
If you plan to contribute changes to the browser extension, refer to the browser-extension folder.
To launch a Chrome browser with hot-reload capabilities, use the following command:
devbox run browser
To modify the default browser settings, consult browser-extension/vite.config.ts.
To build the final distribution of the extension, execute the following command:
devbox run build
Contributing
We welcome all kinds of contributions!
- โญ Give this project a star to make it more visible to the entire community. It lets us know that you are interested in this project, motivating us to invest more effort into it.
- ๐ข Spread the word about this project. If you make any publications (tweets, StackOverflow mentions, LinkedIn posts, Medium articles, etc.) about it, please let us know. We plan to add references to such publications in the future.
- ๐ Ask questions and request improvements by creating issues or opening discussions in the repository.
- ๐งโ๐ป If you enjoy coding, you can build new agents, helping us implement browser extension features or general improvements.
