Build a Local Agent

This repository contains the code to build and run a local AI agent directly in your browser. The agent leverages on-device AI capabilities, allowing it to interact with your local files securely and privately.

Important

This requires Chrome Canary or Edge Dev with the following flags enabled.

Try it here: https://ai.ryanseddon.com/build-local-agent/

Setup Instructions

1. **Install Chrome Canary**: Ensure you have version 141. [Download Chrome Canary](https://google.com/chrome/canary/).
2. Check that you’re on 141.0.7362.0 or above
3. Enable two flags:
   • chrome://flags/#optimization-guide-on-device-model - BypassPerfRequirement
   • chrome://flags/#prompt-api-for-gemini-nano - Enabled
4. Relaunch Chrome
5. Navigate to chrome://components
6. Check that Optimization Guide On Device Model is downloading or force download if not Might take a few minutes for this component to even appear
7. Open dev tools and type `(await LanguageModel.capabilities()).available`, should return "readily" when all good
8. If not you can trigger the download by doing the follow: ```const session = await LanguageModel.create({monitor(m) {m.addEventListener("downloadprogress", e => { console.log(`Downloaded \${e.loaded} of \${e.total} bytes.`); });}});```

This is an attempt to get the How to Build an Agent article working in the browser using the Gemini Nano and Phi-4-mini in Chrome and Edge respectively.

Read the How to build an Agent, On-Device Edition.

Getting Started

1. Prerequisites: You will need a browser that supports the Web AI API, such as a recent version of Google Chrome Canary or Microsoft Edge Dev.

2. Installation:

   npm install

3. Build:

   npm run build

4. Run: Open the index.html file in your browser.

5. Open: Open the devtools console (F12) to see the agent output.

6. Start Agent: Click the "Start Agent" button to begin interacting with the agent.

7. Grant Access: Click the "grant access to a directory" button when prompted by the agent.