OctoBrowser - GitLite

KO | EN

gitlite — search

#javascript #python #react #typescript #llm #golang #android #machine-learning #nodejs #java #awesome #awesome-list #openai #open-source

OctoBrowser

(★ 169)

Built for the Copilot SDK Weekend Contest as a fun project.

파일 탐색기

최종 버전 다운로드 (.zip)

- - build.yml
- github-copilot-icon.svg
- icon.svg
- Screenshot 2026-01-23 222411.png
- Screenshot 2026-01-23 222438.png
- Screenshot 2026-01-23 222525.png
- Screenshot 2026-01-23 222547.png
- - copilot-service.js
  - copilot-service.ts
  - history-store.ts
  - main.js
  - main.ts
  - settings-store.js
  - settings-store.ts
  - tab-manager.js
  - tab-manager.ts
- - preload.js
  - preload.ts
- - app.js
  - index.html
  - styles.css
.gitattributes
.gitignore
LICENSE
package-lock.json
package.json
README.md
scrollbar.txt
tsconfig.json
tsconfig.main.json
tsconfig.preload.json

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/HoppouAI/OctoBrowser

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd OctoBrowser

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

npm run dev

개발/실행 서버를 켭니다.

npm run build

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

npm run package

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# OctoBrowser

<p align="center">
  <img src="assets/github-copilot-icon.svg" alt="OctoBrowser Logo" width="128" height="128">
</p>

<h3 align="center">AI-Powered Web Browser with GitHub Copilot SDK</h3>

<p align="center">
  <strong>Built for the GitHub Copilot SDK Weekend Contest</strong>
</p>

---

## Overview

OctoBrowser is a modern, Chromium-based web browser with GitHub Copilot SDK built right in. It features an integrated AI sidebar that can help you browse the web, summarize pages, search for information, and answer questions about the content you're viewing.

## Features

- **Chromium-Based Browser** - Full web browsing capabilities powered by Electron
- **GitHub Copilot SDK Integration** - AI assistant built directly into the browser
- **Smart Page Summarization** - Ask Copilot to summarize any webpage you're viewing
- **Web Search Tools** - AI can search the web and navigate to pages for you
- **Multiple AI Models** - Choose from GPT-4.1, GPT-5-Mini, Claude Haiku 4.5, and more (can be enabled in the code)
- **GitHub-Themed Design** - Beautiful UI inspired by GitHub's design system
- **Dark/Light Mode** - Automatic theme switching with manual override
- **Tab Management** - Multi-tab browsing with keyboard shortcuts
- **Streaming Responses** - Real-time AI responses with streaming support

## Screenshots

### Light Mode
![Light Mode](https://raw.githubusercontent.com/HoppouAI/OctoBrowser/main/assets/Screenshot%202026-01-23%20222438.png)

### Dark Mode
![Dark Mode](https://raw.githubusercontent.com/HoppouAI/OctoBrowser/main/assets/Screenshot%202026-01-23%20222411.png)

### Settings
![Settings](https://raw.githubusercontent.com/HoppouAI/OctoBrowser/main/assets/Screenshot%202026-01-23%20222525.png)

### Chat History
![Chat History](https://raw.githubusercontent.com/HoppouAI/OctoBrowser/main/assets/Screenshot%202026-01-23%20222547.png)

## Prerequisites

1. **Node.js** (v18 or later)
2. **GitHub Copilot CLI** - Install from [GitHub Copilot CLI](https://docs.github.com/en/copilot/how-tos/set-up/install-copilot-cli)
  3. ~~**GitHub Copilot Subscription** - Required for API access~~
  A Copilot subscription is not required but you are limited to 50 chat requests.

## Installation

```bash
# Clone the repository
git clone https://github.com/HoppouAI/OctoBrowser.git
cd OctoBrowser

# Install dependencies
npm install

# Build and run
npm start
```

## Development

```bash
# Run in development mode with hot reload
npm run dev

# Build only
npm run build

# Package for distribution
npm run package
```

## Usage

### Basic Browsing
- Enter URLs in the address bar or search terms to use Google
- Use keyboard shortcuts: `Ctrl+T` (new tab), `Ctrl+W` (close tab), `Ctrl+L` (focus URL)

### AI Assistant
- Click the Hamburger menu icon in the toolbar to toggle the AI sidebar (or press ctrl+shift+i)
- Type your question in the chat input
- Click the book icon to include the current page content in your question
- Select different AI models from the dropdown

### Example Prompts
- "Summarize this page for me"
- "What are the key points in this article?"
- "Search for the latest news about AI"
- "Help me find documentation for React hooks"

## Technologies

- **Electron** - Cross-platform desktop framework
- **Chromium** - Web rendering engine
- **GitHub Copilot SDK** - AI integration
- **TypeScript** - Type-safe development
- **CSS Custom Properties** - Theming system

## Keyboard Shortcuts

| Shortcut | Action |
|----------|--------|
| `Ctrl+T` | New Tab |
| `Ctrl+W` | Close Tab |
| `Ctrl+L` | Focus URL Bar |
| `Ctrl+R` | Reload Page |
| `Ctrl+Shift+I` | Toggle Copilot Sidebar |
| `Enter` | Navigate/Send Message |

## Configuration

Settings are automatically saved and include:
- Window size and position
- Selected AI model
- Theme preference
- Sidebar visibility

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Edit: Changed this back to normal as we may keep the project open source and available to do Future updates!

## License

MIT License - See [LICENSE](LICENSE) for details.

## Credits

Built with ❤️ for the GitHub Copilot SDK Weekend Contest using Various Models in GitHub Copilot.
Models Used to build this:
- Gemini 3 Pro
- Raptor Mini
- Claude Opus 4.5
and some of our own brain...

## Known Issues
- Sometimes when clearing all chat historys, you may not be able to type a new prompt, click out of the app and then back in to fix it.
- It may sometimes click the wrong links but i believe this is due to the computer/browser use knowladge of the Models, It happens more with GPT 4.1 and GPT 5 Mini than it does with Claude Haiku 4.5
- When the model uses the screenshot tool it has to take the screenshot, cancel the current chat flow and send the image as a new prompt to continue as the Copilot SDK doesn't have a way to send images as tool responces as far as i could find, Meaning it WILL use a PREMIUM request each time a screenshot is taken, So i advise using the 0x models rather than the 0.33x one (Haiku 4.5) to save your premium requests. (maybe someone from GitHub can clarify if there is a way or update the SDK to allow this in the future?)

## Acknowledgements
- [GitHub Copilot SDK](https://github.com/github/copilot-sdk)
- [Electron](https://www.electronjs.org/)
- [GitHub Primer Design](https://primer.style/)
- [Scroll Bar](https://codepen.io/DevSkyler/pen/QWqOdmp)
- [UBlock Origin Addon](https://github.com/gorhill/uBlock)
---

<p align="center">
  <sub>OctoBrowser is not affiliated with GitHub. GitHub and Copilot are trademarks of GitHub, Inc.</sub>
  
  <sub>HoppouAI/OctoBrowser is also not affiliated with OctoBrowser (https://octobrowser.net/) in anyway whatsoever.</sub>
</p>