GitHub - tomkit/chromium-ai-browser: Build your own AI browser: Chromium fork with an AI side panel powered by React/NextJS

3 min read Original article ↗

Build your own version of OpenAI's Atlas browser or Perplexity's Comet browser.

This fork of Chromium has the C++ plumbing already done for you to render a ReactJS/NextJS app in Chrome's Side Panel (similar to its "Reading Mode"). This allows web app developers, who are more familiar with Typescript/Javascript and HTML, to quickly build AI products natively in the browser. The side panel, called "My Assistant", has access to the main browser's DOM for yoou to use as context to build your AI product.

Screenshot 2

Building Chromium

autoninja -C out/Default chrome

Developing web app (hot reload)

cd chrome/browser/ui/webui/side_panel/my_assistant/resources/my-assistant-react
npm run dev

Go to localhost:3000.

NOTE: You won't have access to the browser's DOM in this mode.

Developing web app with Chromium brower DOM

cd chrome/browser/ui/webui/side_panel/my_assistant/resources/my-assistant-react
npm run build
autoninja -C out/Default chrome

Make sure your OPENAI_API_KEY is in your shell env, then run Chromium:

OPENAI_API_KEY=$OPENAI_API_KEY out/Default/Chromium.app/Contents/MacOS/Chromium

Opening the My Assistant Side Panel

In Chromium, clikc:

  1. Ellipses Menu
  2. More Tools
  3. My Assistant

Screenshot 1

GitHub Copilot Integration in Chromium

This directory provides instructions and prompts for integrating GitHub Copilot with the chromium codebase.

This directory is currently in a prototyping state and may be removed in the future. As we add support for multiple coding IDE/agents, we will likely pull common prompts and instructions into a central directory with stubs for bespoke IDE/agent integration. Please check with your organization before using GitHub Copilot.

Where is copilot-instructions.md?

copilot-intructions.md is typically a single instruction file that contains default instructions for a workspace. These instructions are automatically included in every chat request.

Until the prompt in copilot-intructions.md is generally agreed upon for the chromium repo, this file is intentionally excluded from the repo, and added to the .gitignore for your customization.

For generating your own copilot-intructions.md, type /create_copilot_instructions in GitHub Copilot to get started.

Code Layout

  • .github/instructions: Custom instructions for specific tasks. For example, you can create instruction files for different programming languages, frameworks, or project types. You can attach individual prompt files to a chat request, or you can configure them to be automatically included for specific files or folders with applyTo syntax.
  • .github/prompts: Prompt files can be easily triggered from chat with / and allow you to craft complete prompts in Markdown files. Unlike custom instructions that supplement your chat queries prompts, prompt files are standalone prompts that you can store within your workspace and share with others. With prompt files, you can create reusable templates for common tasks, store domain expertise in the codebase, and standardize AI interactions across your team.
  • .github/resources: Prompt files that are resources for use by other prompts and instructions.

User Specific Prompts

Users can create their own prompts or instructions that match the regex .github/**/user_.md which is captured in the .gitignore.

Contributing Guidelines

Use /git_commit_ghc

  • .github/instructions: Instructions that are automatically picked up using applyTo syntax will have a much higher review bar then those without it.
  • .github/prompts: All prompts should specify a mode and description.
  • .github/resources: All prompt resources should have an active reference or usecase a file in instructions or prompts, and should be cleaned up if their references are modified or removed.