d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-06-19 07:12:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: expose browser use to agents via MCP

Browse Source
This commit is contained in:
Simos Mikelatos
2026-06-15 19:47:58 +00:00
parent 6e7e2ff4c1
commit 0426522406
8 changed files with 1030 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/settings/view/tabs/browser-use-settings/BrowserUseSettingsTab.tsx
View File

@@ -10,6 +10,7 @@ import SettingsToggle from '../../SettingsToggle';
type BrowserUseSettings = {
enabled: boolean;
agentToolsEnabled: boolean;
};
type BrowserUseStatus = {
@@ -19,6 +20,7 @@ type BrowserUseStatus = {
playwrightInstalled: boolean;
chromiumInstalled: boolean;
installInProgress: boolean;
agentToolsEnabled: boolean;
message: string;
};
@@ -31,7 +33,7 @@ async function readJson<T>(response: Response): Promise<T> {
}
export default function BrowserUseSettingsTab() {
const [settings, setSettings] = useState<BrowserUseSettings>({ enabled: false });
const [settings, setSettings] = useState<BrowserUseSettings>({ enabled: false, agentToolsEnabled: false });
const [status, setStatus] = useState<BrowserUseStatus | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [isSaving, setIsSaving] = useState(false);
@@ -57,13 +59,13 @@ export default function BrowserUseSettingsTab() {
.finally(() => setIsLoading(false));
}, [loadState]);
const updateEnabled = async (enabled: boolean) => {
const updateSettings = async (nextSettings: Partial<BrowserUseSettings>) => {
setIsSaving(true);
setError(null);
try {
const response = await authenticatedFetch('/api/browser-use/settings', {
method: 'PUT',
body: JSON.stringify({ enabled }),
body: JSON.stringify(nextSettings),
});
const data = await readJson<{ data: { settings: BrowserUseSettings } }>(response);
setSettings(data.data.settings);
@@ -105,12 +107,24 @@ export default function BrowserUseSettingsTab() {
>
<SettingsToggle
checked={settings.enabled}
onChange={(value) => void updateEnabled(value)}
onChange={(value) => void updateSettings({ enabled: value })}
ariaLabel="Enable Browser Use"
disabled={isLoading || isSaving}
/>
</SettingsRow>
<SettingsRow
label="Enable Browser Tools for Agents"
description="Register the Browser Use MCP server for all agent providers. Agents can create browser sessions and control sessions shared with agents."
>
<SettingsToggle
checked={settings.agentToolsEnabled}
onChange={(value) => void updateSettings({ agentToolsEnabled: value })}
ariaLabel="Enable Browser Tools for Agents"
disabled={isLoading || isSaving || !settings.enabled}
/>
</SettingsRow>
<div className="space-y-4 px-4 py-4">
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div className="min-w-0 space-y-1">