mirror of
https://github.com/browseros-ai/BrowserOS.git
synced 2026-05-13 15:46:22 +00:00
chore: update docs
feat: docs v0.1 feat: better ocmponents fix: better cowork docs fix: docs
This commit is contained in:
Felarof
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: "Bring Your Own LLM"
|
||||
title: "LLM Setup"
|
||||
description: "Connect your own AI models to BrowserOS"
|
||||
---
|
||||
|
||||
|
||||
130
docs/features/connect-mcps.mdx
Normal file
130
docs/features/connect-mcps.mdx
Normal file
@@ -0,0 +1,130 @@
|
||||
---
|
||||
title: "Connect Apps (MCPs)"
|
||||
description: "Link your apps to BrowserOS so the assistant can read data and take actions"
|
||||
---
|
||||
|
||||
Connect your favorite apps to BrowserOS so the assistant can read your emails, check your calendar, post to Slack, update Notion, and more — all through natural conversation.
|
||||
|
||||
## What is MCP?
|
||||
|
||||
BrowserOS Connected Apps use the [Model Context Protocol (MCP)](https://modelcontextprotocol.io/), an open standard for connecting AI assistants to external systems. Think of it as a single, consistent way to plug your apps into the assistant.
|
||||
|
||||
## Built-in Apps
|
||||
|
||||
- **Gmail** — Send, read, and search emails
|
||||
- **Google Calendar** — Create events, check your schedule
|
||||
- **Google Docs** — Create and edit documents
|
||||
- **Google Sheets** — Create and edit spreadsheets
|
||||
- **Google Drive** — Upload, download, and manage files
|
||||
- **Slack** — Post messages, manage channels
|
||||
- **Notion** — Create pages, manage databases
|
||||
- **LinkedIn** — Post updates, manage connections
|
||||
|
||||
## Connect a Built-in App
|
||||
|
||||
1. Go to **Settings → Connected Apps**
|
||||
2. Click **Add built-in app** and select the app
|
||||
3. Sign in and authorize BrowserOS
|
||||
|
||||
<Frame caption="Connected apps show a green 'Authenticated' badge">
|
||||
<img src="/images/connect-apps-settings.png" alt="Connected Apps settings page" />
|
||||
</Frame>
|
||||
|
||||
## Use Connected Apps
|
||||
|
||||
Just ask the assistant what you want — it will automatically use the right connected apps.
|
||||
|
||||
<Frame caption="Ask naturally and the assistant uses your connected apps">
|
||||
<img src="/images/connect-apps-query.png" alt="Asking what's on my calendar today" />
|
||||
</Frame>
|
||||
|
||||
## Example Prompts
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="Calendar" icon="calendar">
|
||||
- What's on my calendar today?
|
||||
- Schedule a meeting with Sarah tomorrow at 2pm
|
||||
- When is my next meeting with the marketing team?
|
||||
- Block off Friday afternoon for focus time
|
||||
</Accordion>
|
||||
<Accordion title="Email" icon="envelope">
|
||||
- Show me unread emails from my manager
|
||||
- Draft a reply to the last email from John thanking him for the update
|
||||
- Find emails about the Q4 budget from last week
|
||||
- Send an email to the team with the meeting notes
|
||||
</Accordion>
|
||||
<Accordion title="Slack" icon="hashtag">
|
||||
- Post a message to #general saying I'll be out tomorrow
|
||||
- What's the latest message in #engineering?
|
||||
- Send a DM to Sarah asking if she's free for lunch
|
||||
- Summarize what was discussed in #product today
|
||||
</Accordion>
|
||||
<Accordion title="Notion" icon="cube">
|
||||
- Add "Review Q4 report" to my Notion tasks database
|
||||
- Create a new page in my Projects database for the website redesign
|
||||
- What are my open tasks in Notion?
|
||||
- Update the status of the "Launch campaign" task to complete
|
||||
</Accordion>
|
||||
<Accordion title="Cross-app workflows" icon="diagram-project">
|
||||
- Check my calendar for tomorrow, then draft an email to John summarizing what we're meeting about
|
||||
- Find all emails from last week about the budget and create a summary in Notion
|
||||
- Look at my Slack DMs and add any action items to my Notion tasks
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
## Add a Custom MCP Server
|
||||
|
||||
You can connect any MCP-compatible server that exposes an SSE endpoint.
|
||||
|
||||
1. Go to **Settings → Connected Apps**
|
||||
2. Click **Add custom app**
|
||||
3. Enter your server URL (e.g., `http://localhost:8000/sse`) and give it a name
|
||||
|
||||
Custom servers appear alongside built-in apps and work the same way.
|
||||
|
||||
<Tip>
|
||||
MCP has a growing ecosystem of servers. Browse [MCP servers on GitHub](https://github.com/modelcontextprotocol/servers) to find integrations for databases, APIs, and more.
|
||||
</Tip>
|
||||
|
||||
### Connect to OAuth-Protected Remote Servers
|
||||
|
||||
Some remote MCP servers (like Atlassian Jira, GitHub, etc.) require OAuth authentication. Use [mcp-remote](https://www.npmjs.com/package/mcp-remote) and [supergateway](https://github.com/supercorp-ai/supergateway) to handle the OAuth flow locally:
|
||||
|
||||
```bash
|
||||
npx -y supergateway --stdio "npx -y mcp-remote https://mcp.atlassian.com/v1/sse" --port 8000
|
||||
```
|
||||
|
||||
A browser window will open to sign in. Once authenticated, add `http://localhost:8000/sse` as a custom MCP in BrowserOS.
|
||||
|
||||
<Note>
|
||||
Keep the terminal running while you use BrowserOS. The local server handles authentication and proxies requests to the remote MCP server.
|
||||
</Note>
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="Example: Atlassian Jira" icon="jira" iconType="brands">
|
||||
```bash
|
||||
npx -y supergateway --stdio "npx -y mcp-remote https://mcp.atlassian.com/v1/sse" --port 8000
|
||||
```
|
||||
Then add `http://localhost:8000/sse` as a custom MCP.
|
||||
</Accordion>
|
||||
<Accordion title="Example: GitHub" icon="github" iconType="brands">
|
||||
```bash
|
||||
npx -y supergateway --stdio "npx -y mcp-remote https://api.githubcopilot.com/mcp/sse" --port 8001
|
||||
```
|
||||
Then add `http://localhost:8001/sse` as a custom MCP.
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
## Privacy & Security
|
||||
|
||||
<Columns cols={3}>
|
||||
<Card title="Your data stays local" icon="lock">
|
||||
BrowserOS connects directly to your accounts. Credentials are stored locally on your machine.
|
||||
</Card>
|
||||
<Card title="You control access" icon="toggle-on">
|
||||
Connect or disconnect apps anytime in Settings.
|
||||
</Card>
|
||||
<Card title="Secure OAuth" icon="shield-check">
|
||||
Built-in apps use OAuth flows — BrowserOS never sees your passwords.
|
||||
</Card>
|
||||
</Columns>
|
||||
@@ -1,68 +1,112 @@
|
||||
---
|
||||
title: "Cowork"
|
||||
description: "Describe an outcome, step away, and come back to finished work—browser automation meets local file operations"
|
||||
title: "Filesystem Access"
|
||||
description: "Give the assistant controlled access to local files and commands"
|
||||
---
|
||||
|
||||
Cowork lets you describe complex tasks and let the agent handle them end-to-end. Combine browser automation with local file operations—research on the web, then save reports directly to your folder.
|
||||
Filesystem Access lets you describe complex tasks and let the agent handle them end-to-end. Combine browser automation with local file operations — research on the web, then save reports directly to your folder.
|
||||
|
||||
## Why Cowork?
|
||||
## Why Filesystem Access?
|
||||
|
||||
Without Cowork, the agent can only interact with browser tabs. With Cowork enabled, it can:
|
||||
Without Filesystem Access, the agent can only interact with browser tabs. With Filesystem Access enabled, it gains full access to a folder on your machine:
|
||||
|
||||
- **Read files** from your selected folder
|
||||
- **Write files** like reports, spreadsheets, or markdown
|
||||
- **Run shell commands** within the folder
|
||||
<Columns cols={3}>
|
||||
<Card title="Read files" icon="file-import">
|
||||
Access documents, data files, and more from your selected folder
|
||||
</Card>
|
||||
<Card title="Write files" icon="file-export">
|
||||
Save reports, spreadsheets, markdown, HTML, and other outputs
|
||||
</Card>
|
||||
<Card title="Run commands" icon="terminal">
|
||||
Execute shell commands within the folder
|
||||
</Card>
|
||||
</Columns>
|
||||
|
||||
The real power: do both browser automation AND file operations in a single task. Describe what you want, step away, and come back to finished work.
|
||||
|
||||
## Setting Up Cowork
|
||||
## Setting Up Filesystem Access
|
||||
|
||||
<img src="/features/cowork/cowork-selector.png" alt="Select a folder for the agent to operate in" />
|
||||
<Steps>
|
||||
<Step title="Open the Filesystem Access selector">
|
||||
Click the **Filesystem Access** dropdown next to the prompt input
|
||||
</Step>
|
||||
<Step title="Choose a folder">
|
||||
Select a recent folder or click **Choose a different folder**
|
||||
</Step>
|
||||
<Step title="Grant access">
|
||||
Allow BrowserOS to access that folder when prompted
|
||||
</Step>
|
||||
</Steps>
|
||||
|
||||
1. Click the Cowork dropdown (next to the prompt input)
|
||||
2. Select a recent folder or click **Choose a different folder**
|
||||
3. Grant BrowserOS access to that folder when prompted
|
||||
<Frame caption="Select a folder for the agent to operate in">
|
||||
<img src="/features/cowork/cowork-selector.png" alt="Select a folder for the agent to operate in" />
|
||||
</Frame>
|
||||
|
||||
The agent is sandboxed to your selected folder—it cannot access files outside of it.
|
||||
The agent is sandboxed to your selected folder — it cannot access files outside of it.
|
||||
|
||||
<Tip>
|
||||
To disable file access, select **No folder** and the agent will work with browser tabs only.
|
||||
</Tip>
|
||||
|
||||
## Try It: Research and Create a Report
|
||||
|
||||
With Cowork enabled, try this prompt:
|
||||
With Filesystem Access enabled, try this prompt:
|
||||
|
||||
```
|
||||
Read the top 3 stories on Hacker News, read the comments too, and write an HTML report.
|
||||
```
|
||||
|
||||
The agent will:
|
||||
1. Navigate to Hacker News
|
||||
2. Read each top story and its comments
|
||||
3. Generate an HTML report summarizing the findings
|
||||
4. Save the report to your selected folder
|
||||
|
||||
<img src="/features/cowork/cowork-research-example.png" alt="Agent researching Hacker News and generating an HTML report" />
|
||||
<Steps>
|
||||
<Step title="Navigate to Hacker News">
|
||||
Opens the site and identifies top stories
|
||||
</Step>
|
||||
<Step title="Read stories and comments">
|
||||
Clicks into each story and reads discussion threads
|
||||
</Step>
|
||||
<Step title="Generate report">
|
||||
Creates an HTML report summarizing the findings
|
||||
</Step>
|
||||
<Step title="Save to folder">
|
||||
Writes the report to your selected folder
|
||||
</Step>
|
||||
</Steps>
|
||||
|
||||
<Frame caption="Agent researching Hacker News and generating an HTML report">
|
||||
<img src="/features/cowork/cowork-research-example.png" alt="Agent researching Hacker News and generating an HTML report" />
|
||||
</Frame>
|
||||
|
||||
## Example Use Cases
|
||||
|
||||
**Organize your downloads**
|
||||
> Go through my Downloads folder and organize files by type—documents, images, videos, archives.
|
||||
|
||||
**Competitive research report**
|
||||
> Research key trends about [topic] on Reddit, Twitter, and LinkedIn. Create an HTML report with your findings.
|
||||
|
||||
**Web scraping to files**
|
||||
> Visit these 10 product pages, extract the name, price, and description, and save the results as a markdown file.
|
||||
|
||||
**Content aggregation**
|
||||
> Find the top posts from these 5 subreddits today and compile them into a daily digest document.
|
||||
<AccordionGroup>
|
||||
<Accordion title="Organize your downloads" icon="folder-tree">
|
||||
> Go through my Downloads folder and organize files by type — documents, images, videos, archives.
|
||||
</Accordion>
|
||||
<Accordion title="Competitive research report" icon="magnifying-glass-chart">
|
||||
> Research key trends about [topic] on Reddit, Twitter, and LinkedIn. Create an HTML report with your findings.
|
||||
</Accordion>
|
||||
<Accordion title="Web scraping to files" icon="spider-web">
|
||||
> Visit these 10 product pages, extract the name, price, and description, and save the results as a markdown file.
|
||||
</Accordion>
|
||||
<Accordion title="Content aggregation" icon="newspaper">
|
||||
> Find the top posts from these 5 subreddits today and compile them into a daily digest document.
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
## Security
|
||||
|
||||
- The agent can **only** access the folder you select—no parent directories or other locations
|
||||
- You can revoke access anytime by selecting **No folder**
|
||||
- All file operations happen locally on your machine
|
||||
<Columns cols={3}>
|
||||
<Card title="Sandboxed access" icon="box">
|
||||
The agent can only access the folder you select — no parent directories or other locations
|
||||
</Card>
|
||||
<Card title="Revoke anytime" icon="ban">
|
||||
Select **No folder** to instantly disable file access
|
||||
</Card>
|
||||
<Card title="Local only" icon="house-laptop">
|
||||
All file operations happen locally on your machine
|
||||
</Card>
|
||||
</Columns>
|
||||
|
||||
## Feedback
|
||||
|
||||
Cowork is a new feature. If you have feedback or feature requests, [open a GitHub issue](https://github.com/browseros-ai/BrowserOS/issues).
|
||||
Filesystem Access is a new feature. If you have feedback or feature requests, [open a GitHub issue](https://github.com/browseros-ai/BrowserOS/issues).
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: "LLM Chat & Hub"
|
||||
title: "Chat & Hub"
|
||||
description: "Access ChatGPT, Claude, and Gemini from any webpage with one click"
|
||||
---
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: "Use BrowserOS with Claude Code"
|
||||
title: "MCP Clients (Claude Code)"
|
||||
description: "Control your browser from Claude Code, Gemini CLI, or any MCP client"
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user