Update Documentation (#2)

Update Documentation

Author: tysonthomas9

README.md

@@ -1,14 +1,23 @@
-# Chrome DevTools frontend with Agentic Framework (Browser Operator)
+# Browser Operator [Chrome DevTools with Agentic Framework]
 
 This version provides an user interface to run multi-agent workflows directly on the browser using a stateful, orchestration framework.
 
-### Demos
+## Key Capabilities
+
+* Built in Agent Framework for running tasks / workflows.
+* Ability to perform actions such as: Navigate URLs, Perform Actions (Clicks, Fill Form, Scroll).
+* Access to rendered web page with ability to summarize content.
+* Integrates with LLM Models (OpenAI GPT-4.1 and O4-Mini Models).
+* Customize workflows or agent behavior with config changes.
+
+![Architecture Flow](front_end/panels/ai_chat/docs/ArchitectureFlow.png)
+
+## Demos
 
 Watch Browser Operator in action with our demo videos:
 
 #### Overview Demo
 See how Browser Operator transforms your browser into an intelligent agentic platform.
-[Watch Demo](https://player.vimeo.com/video/1081705645)
 
 https://github.com/user-attachments/assets/d6ffc034-ca38-4afa-861e-c65b3ec79906
 
@@ -44,26 +53,30 @@ https://github.com/user-attachments/assets/90150f0e-e8c8-4b53-b6a6-c739f143f4a0
 
 ### Steps to run project
 
-1. Follow this instructions to [set up](chromium.googlesource.com) devtools
-2. Update the code to this fork implementation
-3. Use this to run the [code](https://github.com/tysonthomas9/browser-operator-devtools-frontend/blob/main/front_end/panels/ai_chat/Readme.md)
+[Download the pre-built Chromium Browser for MacOS](front_end/panels/ai_chat/docs/PreBuilt.md)
+
+Or
 
-### Source code and documentation
+[Set up the dev tools on your system](front_end/panels/ai_chat/Readme.md)
 
-The frontend is available on [chromium.googlesource.com]. Check out the [Chromium DevTools
-documentation] for instructions to [set up], use, and maintain a DevTools front-end checkout,
-as well as design guidelines, and architectural documentation.
 
-#### Agentic Framework Documentation
+### DevTools Documentation
+
+- [Agentic Framework Documentation](front_end/panels/ai_chat/Readme.md)
+- [Chromium Devtools Original Documentation](https://chromium.googlesource.com/devtools/devtools-frontend/+/main/docs/README.md)
+
+### Agentic Framework Documentation
 
 *   [`front_end/panels/ai_chat/core/Readme.md`](front_end/panels/ai_chat/core/Readme.md): Explains how to customize the `BaseOrchestratorAgent` to add new top-level agent types and UI buttons, and details its graph-based workflow.
 *   [`front_end/panels/ai_chat/agent_framework/Readme.md`](front_end/panels/ai_chat/agent_framework/Readme.md): Describes the AI Agent Framework, its core components (`ConfigurableAgentTool`, `AgentRunner`, `ToolRegistry`), and how to create, configure, and register new custom agents, including agent handoff mechanisms.
 
-#### General DevTools Documentation
+### Contributing
 
-- DevTools user documentation: [devtools.chrome.com](https://devtools.chrome.com)
+Found a bug 🐛 or have a feature idea ✨? Please create issues [here](https://github.com/tysonthomas9/browser-operator-devtools-frontend/issues)
 
 ### Join Us
 
+If you like this project, don't hesitate to ⭐ star this repository. For those who'd like to contribute code or just hang out with the community please join our Discord.
+
 [![Discord](https://img.shields.io/badge/Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/JKYuuubr)
 [![X (Twitter)](https://img.shields.io/badge/X_(Twitter)-000000?style=for-the-badge&logo=x&logoColor=white)](https://x.com/BrowserOperator)

front_end/panels/ai_chat/Readme.md

@@ -2,6 +2,47 @@
 
 This panel is a Multi-Agent Framework that allows a user to connect an existing LLM with the chromium browser.
 
+### Steps to run project
+
+1. Setup the depot_tools to fetch the chromium dev tools using the instructions provided [here](https://www.chromium.org/developers/how-tos/get-the-code/)
+```sh
+git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
+export PATH="$PATH:/path/to/depot_tools"
+```
+2. Follow this instructions to [set up](https://chromium.googlesource.com/devtools/devtools-frontend/+/main/docs/get_the_code.md) dev tools
+
+```sh
+# fetching code
+mkdir devtools
+cd devtools
+fetch devtools-frontend
+
+# Build steps
+cd devtools-frontend
+gclient sync
+npm run build
+```
+
+3. Update the code to this fork implementation
+```sh
+git remote add upstream git@github.com:tysonthomas9/browser-operator-devtools-frontend.git
+git checkout upstream/main
+```
+
+4. Use this to run the [code](https://github.com/tysonthomas9/browser-operator-devtools-frontend/blob/main/front_end/panels/ai_chat/Readme.md)
+```sh
+npm run build
+python -m http.server
+```
+
+5. Run Chrome or Chromium Browser instance
+```sh
+<path-to-devtools-frontend>/third_party/chrome/chrome-<platform>/chrome --disable-infobars --custom-devtools-frontend=http://localhost:8000/
+
+# MacOS Example
+/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --custom-devtools-frontend=http://localhost:8000/
+```
+
 ### Setup and Development
 
 1. Build the project and use watch mode
@@ -32,29 +73,5 @@ The AI Chat Panel uses the multi-agent framework with the following components:
 2. **Tools**: Provides capabilities for DOM inspection, network analysis, and code execution
 3. **Workflow**: Defines the agent's reasoning process and decision-making flow
 
-### Implementation Details
-
-The agent implementation is located in `front_end/panels/ai_chat/agent/` and consists of:
-
-- `AgentService.ts`: Main service that interfaces between UI and Graph Workflow
-- `State.ts`: Defines the agent's state schema
-- `Tools.ts`: Implements DevTools-specific tools
-- `Graph.ts`: Defines the agent's workflow and decision-making process
-
-### Usage Example
-
-```typescript
-import { AgentService } from './agent/AgentService.js';
-
-// Initialize the agent service
-const agentService = new AgentService();
-
-// Send a message to the agent
-async function sendMessage(text: string) {
-  const response = await agentService.sendMessage(text);
-  // Update UI with response
-}
-```
-
 ## Reference
 https://chromium.googlesource.com/devtools/devtools-frontend/+/main/docs/get_the_code.md#Standalone-checkout-Checking-out-source

front_end/panels/ai_chat/docs/1.png

@@ -0,0 +1,29 @@
+## Custom Chromium Build for macOS M-Series
+
+### Introduction
+This document guides you through installing a special version of the Chromium browser. This build includes experimental features, such as AI capabilities, that are currently under development.
+
+**Warning:** This build includes experimental AI features. Using these features may involve sending data to external services for processing. For your privacy and security, please avoid entering sensitive personal or work information while using this build.
+
+### Download
+Please download the latest macOS build from the [releases page](https://github.com/tysonthomas9/browser-operator-devtools-frontend/releases).
+
+### Updates
+**Note:** This build does not include the standard Chromium auto-update feature. If you plan to use it regularly, please check the releases page weekly for the latest version. We are working on adding an official auto-update capability in the future.
+
+### Installation Security Workaround
+Because this build is not yet officially verified by Apple, macOS security settings will initially block the installation. Please follow these steps to allow the installation:
+
+1.  Attempt to open the downloaded Chromium application file. You will likely see a warning message.
+![Warning Message](1.png)
+2. Open **System Settings** on your Mac and navigate to **Privacy & Security**.
+![Settings](2.png)
+3. Look for a message in the **Privacy & Security** settings window (usually near the bottom) mentioning that "Chromium" was blocked. Click the **"Open Anyway"** or **"Allow"** button next to this message.
+![Privacy](3.png)
+4. You may need to confirm your intent again. After allowing it, try opening the Chromium application file again to proceed with the installation or first run.
+
+### Using AI Features
+This build contains experimental AI agents. To enable and use these features, you will need an API key from OpenAI. If you do not have one or are unfamiliar with OpenAI API keys, you can learn more and obtain one from the [OpenAI website](https://openai.com/). You will be prompted to enter this key within the browser's AI panel when you first try to use an AI feature.
+
+Note: We plan to support additional operating systems such as linux and windows soon.
+