Skip to content

Commit 6ac9e26

Browse files
vvincent1234vvincent1234
committed
add ui
1 parent 70ac2f4 commit 6ac9e26

File tree

7 files changed

+239
-24
lines changed

7 files changed

+239
-24
lines changed

‎src/webui/components/agent_settings_tab.py‎

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1+
import json
2+
import os
3+
14
import gradio as gr
25
from gradio.components import Component
3-
6+
from typing import Any, Dict, Optional
47
from src.webui.webui_manager import WebuiManager
58
from src.utils import config
9+
import logging
10+
11+
logger = logging.getLogger(__name__)
612

713

814
def update_model_dropdown(llm_provider):
@@ -17,6 +23,20 @@ def update_model_dropdown(llm_provider):
1723
return gr.Dropdown(choices=[], value="", interactive=True, allow_custom_value=True)
1824

1925

26+
def update_mcp_server(mcp_file: str):
27+
"""
28+
Update the MCP server.
29+
"""
30+
if not mcp_file or not os.path.exists(mcp_file) or mcp_file.endswith('.json'):
31+
logger.warning(f"{mcp_file} is not a valid MCP file.")
32+
return gr.update()
33+
34+
with open(mcp_file, 'r') as f:
35+
mcp_server = json.load(f)
36+
37+
return gr.update(value=json.dumps(mcp_server, indent=2), visible=True)
38+
39+
2040
def create_agent_settings_tab(webui_manager: WebuiManager) -> dict[str, Component]:
2141
"""
2242
Creates an agent settings tab.
@@ -29,6 +49,10 @@ def create_agent_settings_tab(webui_manager: WebuiManager) -> dict[str, Componen
2949
override_system_prompt = gr.Textbox(label="Override system prompt", lines=4, interactive=True)
3050
extend_system_prompt = gr.Textbox(label="Extend system prompt", lines=4, interactive=True)
3151

52+
with gr.Group():
53+
mcp_json_file = gr.File(label="MCP server file", interactive=True, file_types=["json"])
54+
mcp_server_config = gr.Textbox(label="MCP server", lines=6, interactive=True, visible=False)
55+
3256
with gr.Group():
3357
with gr.Row():
3458
llm_provider = gr.Dropdown(
@@ -92,7 +116,6 @@ def create_agent_settings_tab(webui_manager: WebuiManager) -> dict[str, Componen
92116
with gr.Row():
93117
planner_llm_provider = gr.Dropdown(
94118
choices=[provider for provider, model in config.model_names.items()],
95-
value=None,
96119
label="Planner LLM Provider",
97120
info="Select LLM provider for LLM",
98121
interactive=True
@@ -202,7 +225,8 @@ def create_agent_settings_tab(webui_manager: WebuiManager) -> dict[str, Componen
202225
max_actions=max_actions,
203226
max_input_tokens=max_input_tokens,
204227
tool_calling_method=tool_calling_method,
205-
228+
mcp_json_file=mcp_json_file,
229+
mcp_server_config=mcp_server_config,
206230
))
207231
llm_provider.change(
208232
fn=lambda x: gr.update(visible=x == "ollama"),
@@ -225,4 +249,10 @@ def create_agent_settings_tab(webui_manager: WebuiManager) -> dict[str, Componen
225249
outputs=planner_llm_model_name
226250
)
227251

252+
mcp_json_file.change(
253+
update_mcp_server,
254+
inputs=mcp_json_file,
255+
outputs=mcp_server_config
256+
)
257+
228258
return tab_components

‎src/webui/components/browser_settings_tab.py‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import gradio as gr
2+
from gradio.components import Component
3+
4+
from src.webui.webui_manager import WebuiManager
5+
from src.utils import config
6+
7+
8+
def create_browser_settings_tab(webui_manager: WebuiManager) -> dict[str, Component]:
9+
"""
10+
Creates a browser settings tab.
11+
"""
12+
input_components = set(webui_manager.get_components())
13+
tab_components = {}
14+
15+
with gr.Group():
16+
with gr.Row():
17+
browser_binary_path = gr.Textbox(
18+
label="Browser Binary Path",
19+
lines=1,
20+
interactive=True,
21+
placeholder="e.g. '/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome'"
22+
)
23+
browser_user_data_dir = gr.Textbox(
24+
label="Browser User Data Dir",
25+
lines=1,
26+
interactive=True,
27+
placeholder="Leave it empty if you use your default user data",
28+
)
29+
with gr.Row():
30+
use_own_browser = gr.Checkbox(
31+
label="Use Own Browser",
32+
value=False,
33+
info="Use your existing browser instance",
34+
interactive=True
35+
)
36+
keep_browser_open = gr.Checkbox(
37+
label="Keep Browser Open",
38+
value=False,
39+
info="Keep Browser Open between Tasks",
40+
interactive=True
41+
)
42+
headless = gr.Checkbox(
43+
label="Headless Mode",
44+
value=False,
45+
info="Run browser without GUI",
46+
interactive=True
47+
)
48+
disable_security = gr.Checkbox(
49+
label="Disable Security",
50+
value=True,
51+
info="Disable browser security features",
52+
interactive=True
53+
)
54+
55+
with gr.Row():
56+
window_w = gr.Number(
57+
label="Window Width",
58+
value=1280,
59+
info="Browser window width",
60+
interactive=True
61+
)
62+
window_h = gr.Number(
63+
label="Window Height",
64+
value=1100,
65+
info="Browser window height",
66+
interactive=True
67+
)
68+
69+
with gr.Row():
70+
cdp_url = gr.Textbox(
71+
label="CDP URL",
72+
info="CDP URL for browser remote debugging",
73+
interactive=True,
74+
)
75+
wss_url = gr.Textbox(
76+
label="WSS URL",
77+
info="WSS URL for browser remote debugging",
78+
interactive=True,
79+
)
80+
81+
with gr.Row():
82+
save_recording_path = gr.Textbox(
83+
label="Recording Path",
84+
placeholder="e.g. ./tmp/record_videos",
85+
info="Path to save browser recordings",
86+
interactive=True,
87+
)
88+
89+
save_trace_path = gr.Textbox(
90+
label="Trace Path",
91+
placeholder="e.g. ./tmp/traces",
92+
info="Path to save Agent traces",
93+
interactive=True,
94+
)
95+
96+
with gr.Row():
97+
save_agent_history_path = gr.Textbox(
98+
label="Agent History Save Path",
99+
value="./tmp/agent_history",
100+
info="Specify the directory where agent history should be saved.",
101+
interactive=True,
102+
)
103+
save_download_path = gr.Textbox(
104+
label="Save Directory for browser downloads",
105+
value="./tmp/downloads",
106+
info="Specify the directory where downloaded files should be saved.",
107+
interactive=True,
108+
)
109+
tab_components.update(
110+
dict(
111+
browser_binary_path=browser_binary_path,
112+
browser_user_data_dir=browser_user_data_dir,
113+
use_own_browser=use_own_browser,
114+
keep_browser_open=keep_browser_open,
115+
headless=headless,
116+
disable_security=disable_security,
117+
save_recording_path=save_recording_path,
118+
save_trace_path=save_trace_path,
119+
save_agent_history_path=save_agent_history_path,
120+
save_download_path=save_download_path,
121+
cdp_url=cdp_url,
122+
wss_url=wss_url
123+
)
124+
)
125+
return tab_components

‎src/webui/components/browser_use_agent_tab.py‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import gradio as gr
2+
from gradio.components import Component
3+
4+
from src.webui.webui_manager import WebuiManager
5+
from src.utils import config
6+
7+
8+
def create_browser_use_agent_tab(webui_manager: WebuiManager) -> dict[str, Component]:
9+
"""
10+
Create the run agent tab
11+
"""
12+
input_components = set(webui_manager.get_components())
13+
tab_components = {}
14+
15+
chatbot = gr.Chatbot(type='messages', label="Chat History", height=600)
16+
user_input = gr.Textbox(
17+
label="User Input",
18+
lines=3,
19+
value="go to google.com and type 'OpenAI' click search and give me the first url",
20+
interactive=True
21+
)
22+
23+
with gr.Row():
24+
stop_button = gr.Button("⏹️ Stop", interactive=False, variant="stop", scale=2)
25+
clear_button = gr.Button("🧹 Clear", interactive=False, variant="stop", scale=2)
26+
run_button = gr.Button("▶️ Summit", variant="primary", scale=3)
27+
28+
browser_view = gr.HTML(
29+
value="<h1 style='width:80vw; height:50vh'>Waiting for browser session...</h1>",
30+
label="Browser Live View",
31+
visible=False
32+
)
33+
34+
with gr.Row():
35+
agent_final_result = gr.Textbox(
36+
label="Final Result", lines=3, show_label=True, interactive=False
37+
)
38+
agent_errors = gr.Textbox(
39+
label="Errors", lines=3, show_label=True, interactive=False
40+
)
41+
42+
with gr.Row():
43+
agent_trace_file = gr.File(label="Trace File", interactive=False)
44+
agent_history_file = gr.File(label="Agent History", interactive=False)
45+
46+
recording_gif = gr.Image(label="Result GIF", format="gif", interactive=False)
47+
tab_components.update(
48+
dict(
49+
chatbot=chatbot,
50+
user_input=user_input,
51+
clear_button=clear_button,
52+
run_button=run_button,
53+
stop_button=stop_button,
54+
agent_final_result=agent_final_result,
55+
agent_errors=agent_errors,
56+
agent_trace_file=agent_trace_file,
57+
agent_history_file=agent_history_file,
58+
recording_gif=recording_gif,
59+
browser_view=browser_view
60+
)
61+
)
62+
return tab_components

‎src/webui/components/run_deep_research_tab.py‎ renamed to ‎src/webui/components/deep_research_agent_tab.py‎

File renamed without changes.

‎src/webui/components/run_agent_tab.py‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎src/webui/interface.py‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
from src.webui.webui_manager import WebuiManager
44
from src.webui.components.agent_settings_tab import create_agent_settings_tab
5+
from src.webui.components.browser_settings_tab import create_browser_settings_tab
6+
from src.webui.components.browser_use_agent_tab import create_browser_use_agent_tab
57

68
theme_map = {
79
"Default": gr.themes.Default(),
@@ -54,10 +56,10 @@ def create_ui(theme_name="Ocean"):
5456
ui_manager.add_components("agent_settings", create_agent_settings_tab(ui_manager))
5557

5658
with gr.TabItem("🌐 Browser Settings"):
57-
pass
59+
ui_manager.add_components("browser_settings", create_browser_settings_tab(ui_manager))
5860

5961
with gr.TabItem("🤖 Run Agent"):
60-
pass
62+
ui_manager.add_components("browser_use_agent", create_browser_use_agent_tab(ui_manager))
6163

6264
with gr.TabItem("🧐 Deep Research"):
6365
pass

‎tests/test_controller.py‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -46,21 +46,21 @@ async def test_controller_with_mcp():
4646
from browser_use.controller.registry.views import ActionModel
4747

4848
test_server_config = {
49-
# "playwright": {
50-
# "command": "npx",
51-
# "args": [
52-
# "@playwright/mcp@latest",
53-
# ],
54-
# "transport": "stdio",
55-
# },
56-
# "filesystem": {
57-
# "command": "npx",
58-
# "args": [
59-
# "-y",
60-
# "@modelcontextprotocol/server-filesystem",
61-
# "/Users/xxx/ai_workspace",
62-
# ]
63-
# },
49+
"playwright": {
50+
"command": "npx",
51+
"args": [
52+
"@playwright/mcp@latest",
53+
],
54+
"transport": "stdio",
55+
},
56+
"filesystem": {
57+
"command": "npx",
58+
"args": [
59+
"-y",
60+
"@modelcontextprotocol/server-filesystem",
61+
"/Users/xxx/ai_workspace",
62+
]
63+
},
6464
"desktop-commander": {
6565
"command": "npx",
6666
"args": [

0 commit comments

Comments
 (0)