如何把 claude-quickstarts Browser Use Demo 的 browser.py 作为模板构建自己的浏览器自动化工具【免费下载链接】claude-quickstartsA collection of projects designed to help developers quickly get started with building deployable applications using the Claude API项目地址: https://gitcode.com/GitHub_Trending/an/claude-quickstartsclaude-quickstarts 仓库里的browser-use-demo是一个刻意保持最小化的容器化参考实现它用 Playwright 驱动 Chromium让 Claude 通过一个名为browser的自定义工具完成页面导航、点击、填表和内容提取。如果你要自己开发一个浏览器自动化工具而不是从零设计工具协议和 DOM 交互逻辑可以直接把 browser.py 和 browser_tool_utils/ 当作起点。browser-use-demo/README.md 的 Modifying Using as a Template 一节给出了明确的三步路径复制browser.py和browser_tool_utils/、改编 loop.py 对接你的 API 集成、自建 UI 或以 streamlit.py 为起点。本文按这条路径拆解browser.py内部结构说明改哪里、怎么改、改完如何运行验证。复制哪些文件各承担什么职责browser.py不是孤立可运行的它依赖包内几个模块复制时要一并带走文件职责tools/browser.py主工具类所有浏览器动作的实现与分发tools/base.pyBaseAnthropicTool抽象基类要求实现__call__和to_params、ToolResult、ToolErrortools/coordinate_scaling.pyCoordinateScaler把 Claude 视觉坐标换算到真实视口display_constants.py硬编码的BROWSER_WIDTH/BROWSER_HEIGHT1920x1080与DISPLAY_NUM注释明确说明不通过环境变量配置browser_tool_utils/注入页面的 JS 脚本browser_dom_script.js生成带ref的 DOM 树、browser_element_script.js按ref定位元素坐标、browser_form_input_script.js写表单值、browser_key_map.py按键名到 Playwright 键码的映射loop.py采样循环sampling_loop负责 API 调用、工具执行和消息回填browser.py顶部的 import 直接印证了这些依赖from ..display_constants import BROWSER_HEIGHT, BROWSER_WIDTH, DISPLAY_NUM from .base import BaseAnthropicTool, ToolError, ToolResult from .coordinate_scaling import CoordinateScaler环境层面setup.py 声明了 Python3.11、playwright1.40.0、anthropic[bedrock,vertex]0.39.0、streamlit1.41.0运行时只需要一个 Anthropic API keyANTHROPIC_API_KEYDocker 场景下通过.env注入见 .env.example。读懂 browser.py工具定义、动作分发与坐标缩放工具注册接口。BrowserTool继承BaseAnthropicToolto_params()决定了 API 侧看到的工具形态README 中给出的核心模式就是browser_tool BrowserTool() def to_params(self): return { name: browser, description: BROWSER_TOOL_DESCRIPTION, input_schema: BROWSER_TOOL_INPUT_SCHEMA, }真正的to_params()用cast包了一层返回BetaToolUnionParam见 browser.py。两个模块级常量是工具的完整契约BROWSER_TOOL_INPUT_SCHEMA定义全部 24 个 action 的枚举、每个参数的用途与必填关系顶层required只要求actionBROWSER_TOOL_DESCRIPTION告诉模型各关键动作的用途navigate 自带截图、read_page取带 ref 的 DOM 结构、get_page_text取全文等。动作分发。__call__先调_ensure_browser()确保浏览器就绪然后按action参数分发到私有方法每个分支先校验该动作的必填参数再执行。例如form_input分支elif action form_input: if not ref: raise ToolError(Element reference is required for form_input action) if value is None: raise ToolError(Value is required for form_input action) return await self._form_input(ref, value)所有成功路径返回ToolResult字段为output、error、base64_image、system所有失败路径抛ToolError。截图动作把图片写入/tmp/outputs再编码进base64_image字段。JS 脚本注入。DOM 相关的动作不在 Python 里直接操作而是通过_execute_js_from_file从BROWSER_TOOL_UTILS_DIR即工具目录旁的browser_tool_utils/读取脚本注入页面执行。read_page走browser_dom_script.js脚本定义window.__generateAccessibilityTree函数内注入后调用点击和scroll_to走browser_element_script.js按ref拿坐标form_input走browser_form_input_script.js。这意味着你扩展 DOM 交互能力时Python 端和 JS 端要一起改。坐标缩放。浏览器视口固定 1920x1080而 Claude 处理 16:9 截图时的实际分辨率是 1456x819CoordinateScaler会自动把模型给出的坐标换算回 1920x1080coordinate_scaling.py 中CLAUDE_ACTUAL_WIDTH 1456、CLAUDE_ACTUAL_HEIGHT 819。所有坐标类动作点击、拖拽、悬停、缩放截图都经过_scale_coordinates这一层。如果你的工具改用其他视口要么保持 16:9 让缩放逻辑继续生效要么改用CoordinateScaler.get_scale_factors(width, height, match_aspect_ratioTrue)按文档化的宽高比匹配。浏览器生命周期。_ensure_browser首次调用时启动 ChromiumheadlessFalse带一组 Docker 适配的启动参数创建 1920x1080 视口的 context默认超时 30 秒。代码里有意注释掉了一段事件循环变化就重置浏览器的逻辑注释写明浏览器应在对话轮次间保持持久streamlit.py因此只在 session state 里创建一次BrowserTool()之后每次请求把同一个实例传给sampling_loop。你自己接 UI 时也应遵循一个会话一个工具实例的做法而不是每轮重建浏览器。如何往 browser.py 里加一个新动作README 的改法说明是编辑browser.py来加功能或改变行为。从文件里现有动作navigate、form_input等的实现看每个动作都落在固定的四个位置新增动作时照这个模式补齐BROWSER_TOOL_INPUT_SCHEMA[properties][action][enum]与 description 中加入动作名和说明如果新动作需要新参数同步加入properties和对应 description 的Required for列表Actions这个Literal类型中加入动作名编写对应的私有方法如_form_input成功返回ToolResult失败抛ToolError__call__中新增elif action ...分支先校验必填参数再调用私有方法。如果新动作要读页面状态或操作元素优先复用browser_tool_utils/里的脚本模式ref定位优于像素坐标这是 README 强调的设计动机ref在不同窗口尺寸下保持稳定如果只涉及 Playwright API类似type、key、wait直接在私有方法里调用self._page即可。用 loop.py 对接你的 API 集成loop.py 的sampling_loop是工具与 API 之间的粘合层签名关键参数为model、providerAPIProvider枚举支持ANTHROPIC/BEDROCK/VERTEX、system_prompt_suffix、messages、三个回调output_callback、tool_output_callback、api_response_callback、api_key、max_tokens以及可选的browser_toolasync def sampling_loop( *, model: str, provider: APIProvider, system_prompt_suffix: str, messages: list[BetaMessageParam], output_callback: Callable[[BetaContentBlockParam], None], tool_output_callback: Callable[[ToolResult, str], None], api_response_callback: Callable[ [httpx.Request | None, httpx.Response | object | None, Exception | None], None ], api_key: str, only_n_most_recent_images: int | None None, max_tokens: int 4096, browser_tool: Optional[BrowserTool] None, ):适配要点传入已创建的browser_tool可复用持久浏览器实例streamlit 正是这么做的见 streamlit.py同时传了only_n_most_recent_images3只保留最近 3 张截图进上下文不传则每次新建。循环会一直执行到某轮响应不含tool_use才返回最终messages有工具调用时通过ResponseProcessor.execute_tools执行并把tool_result回填进消息。使用 Anthropic provider 时会自动挂prompt-caching-2024-07-31beta 并对 system prompt 加 cache control走 Bedrock/Vertex 则不启用。BROWSER_SYSTEM_PROMPT同文件顶部规定了使用策略每轮先看截图确认当前位置、导航后先调read_page拿ref再交互、提取文字一律用get_page_text而不是读截图、DOM 动作失效时回退到截图坐标。这套提示词与工具行为是配套的改编工具时建议保留。模型选择上streamlit.py的BROWSER_COMPATIBLE_MODELS限定为claude-sonnet-4-5-20250929、claude-opus-4-5-20251101、claude-haiku-4-5-20251001三个 Claude 4.5 模型默认取第一个Bedrock 与 Vertex 有对应的命名形式如anthropic.claude-sonnet-4-5-20250929-v1:0。如果你的 UI 不是 Streamlit就自己实现这三个回调并驱动消息列表想省事则直接复制streamlit.py起步README 也是这么建议的。构建、运行与验证前提是系统装有 Docker 和 Docker Compose以及一个 Anthropic API key。在browser-use-demo目录下cp .env.example .env # 编辑 .env填入 ANTHROPIC_API_KEY.env.example还包含可选的端口覆盖变量VNC_PORT、STREAMLIT_PORT、NOVNC_PORT、HTTP_PORT默认分别为 5900、8501、6080、8080对应 docker-compose.yml 中的端口映射。# 生产式运行 docker-compose up --build # 开发模式监听 browser_use_demo 目录变化并自动同步、重启 docker-compose up --build --watch--watch对应 compose 里./browser_use_demo到容器内/home/browseruse/browser_use_demo的syncrestart规则因此你改browser.py后可以不手动重建镜像。README 也说明重建 Docker 镜像卷挂载允许 Python 代码热更新是修改 demo 的常规操作二者按你使用的 compose 版本取其一。启动后的验证方式README 给出的接口地址与测试提示打开主 UI http://localhost:8080通过 NoVNC http://localhost:6080 观察浏览器实际操作VNC 客户端可连 localhost:5900输入文档给出的示例提示验证核心链路例如 Navigate to news.ycombinator.com and tell me the top 3 stories、Visit wikipedia.org and find information about artificial intelligence文档示例成功与否取决于站点当时状态不是固定断言。排障按 README 的 Troubleshooting 一节对照浏览器画面不可见检查 6080 端口可达、刷新 NoVNC 页面、确认 Docker 资源充足API 报错核对 API key 是否正确、模型是否在上述 Claude 4.5 兼容列表内动作执行失败部分网站有反自动化措施先换简单站点测试并借助 NoVNC 视图确认页面实际状态。另据 README 说明当前 Playwright 实现在 Google.com 搜索时会撞 CAPTCHA建议在提示词里直接指定目标网站而不是让模型去 Google 搜。边界与已知限制这个 demo 定位是学习与开发用途的参考实现README 明确标注 Not for production use把它当作模板起点没问题但不必把它当成生产级浏览器代理方案。find动作在有ANTHROPIC_API_KEY时内部会再调一次 Anthropic API代码中写死claude-3-5-sonnet-20241022对 DOM 树做元素匹配无 key 或调用失败时回退为不带ref的简单文本计数——你的工具如果依赖带 ref 的查找结果要保留这个 key。显示与视口尺寸硬编码在display_constants.py1920x1080these values are hardcoded and not configurable via environment variables改动视口时需同步处理坐标缩放。自建浏览器工具涉及访问外部网站README 的 Safety Considerations 列了隔离运行环境、避免接触敏感凭据、域名白名单、关键操作人工确认等注意事项改编时值得保留这些前提。【免费下载链接】claude-quickstartsA collection of projects designed to help developers quickly get started with building deployable applications using the Claude API项目地址: https://gitcode.com/GitHub_Trending/an/claude-quickstarts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何把 claude-quickstarts Browser Use Demo 的 browser.py 作为模板构建自己的浏览器自动化工具？
如何把 claude-quickstarts Browser Use Demo 的 browser.py 作为模板构建自己的浏览器自动化工具【免费下载链接】claude-quickstartsA collection of projects designed to help developers quickly get started with building deployable applications using the Claude API项目地址: https://gitcode.com/GitHub_Trending/an/claude-quickstartsclaude-quickstarts 仓库里的browser-use-demo是一个刻意保持最小化的容器化参考实现它用 Playwright 驱动 Chromium让 Claude 通过一个名为browser的自定义工具完成页面导航、点击、填表和内容提取。如果你要自己开发一个浏览器自动化工具而不是从零设计工具协议和 DOM 交互逻辑可以直接把 browser.py 和 browser_tool_utils/ 当作起点。browser-use-demo/README.md 的 Modifying Using as a Template 一节给出了明确的三步路径复制browser.py和browser_tool_utils/、改编 loop.py 对接你的 API 集成、自建 UI 或以 streamlit.py 为起点。本文按这条路径拆解browser.py内部结构说明改哪里、怎么改、改完如何运行验证。复制哪些文件各承担什么职责browser.py不是孤立可运行的它依赖包内几个模块复制时要一并带走文件职责tools/browser.py主工具类所有浏览器动作的实现与分发tools/base.pyBaseAnthropicTool抽象基类要求实现__call__和to_params、ToolResult、ToolErrortools/coordinate_scaling.pyCoordinateScaler把 Claude 视觉坐标换算到真实视口display_constants.py硬编码的BROWSER_WIDTH/BROWSER_HEIGHT1920x1080与DISPLAY_NUM注释明确说明不通过环境变量配置browser_tool_utils/注入页面的 JS 脚本browser_dom_script.js生成带ref的 DOM 树、browser_element_script.js按ref定位元素坐标、browser_form_input_script.js写表单值、browser_key_map.py按键名到 Playwright 键码的映射loop.py采样循环sampling_loop负责 API 调用、工具执行和消息回填browser.py顶部的 import 直接印证了这些依赖from ..display_constants import BROWSER_HEIGHT, BROWSER_WIDTH, DISPLAY_NUM from .base import BaseAnthropicTool, ToolError, ToolResult from .coordinate_scaling import CoordinateScaler环境层面setup.py 声明了 Python3.11、playwright1.40.0、anthropic[bedrock,vertex]0.39.0、streamlit1.41.0运行时只需要一个 Anthropic API keyANTHROPIC_API_KEYDocker 场景下通过.env注入见 .env.example。读懂 browser.py工具定义、动作分发与坐标缩放工具注册接口。BrowserTool继承BaseAnthropicToolto_params()决定了 API 侧看到的工具形态README 中给出的核心模式就是browser_tool BrowserTool() def to_params(self): return { name: browser, description: BROWSER_TOOL_DESCRIPTION, input_schema: BROWSER_TOOL_INPUT_SCHEMA, }真正的to_params()用cast包了一层返回BetaToolUnionParam见 browser.py。两个模块级常量是工具的完整契约BROWSER_TOOL_INPUT_SCHEMA定义全部 24 个 action 的枚举、每个参数的用途与必填关系顶层required只要求actionBROWSER_TOOL_DESCRIPTION告诉模型各关键动作的用途navigate 自带截图、read_page取带 ref 的 DOM 结构、get_page_text取全文等。动作分发。__call__先调_ensure_browser()确保浏览器就绪然后按action参数分发到私有方法每个分支先校验该动作的必填参数再执行。例如form_input分支elif action form_input: if not ref: raise ToolError(Element reference is required for form_input action) if value is None: raise ToolError(Value is required for form_input action) return await self._form_input(ref, value)所有成功路径返回ToolResult字段为output、error、base64_image、system所有失败路径抛ToolError。截图动作把图片写入/tmp/outputs再编码进base64_image字段。JS 脚本注入。DOM 相关的动作不在 Python 里直接操作而是通过_execute_js_from_file从BROWSER_TOOL_UTILS_DIR即工具目录旁的browser_tool_utils/读取脚本注入页面执行。read_page走browser_dom_script.js脚本定义window.__generateAccessibilityTree函数内注入后调用点击和scroll_to走browser_element_script.js按ref拿坐标form_input走browser_form_input_script.js。这意味着你扩展 DOM 交互能力时Python 端和 JS 端要一起改。坐标缩放。浏览器视口固定 1920x1080而 Claude 处理 16:9 截图时的实际分辨率是 1456x819CoordinateScaler会自动把模型给出的坐标换算回 1920x1080coordinate_scaling.py 中CLAUDE_ACTUAL_WIDTH 1456、CLAUDE_ACTUAL_HEIGHT 819。所有坐标类动作点击、拖拽、悬停、缩放截图都经过_scale_coordinates这一层。如果你的工具改用其他视口要么保持 16:9 让缩放逻辑继续生效要么改用CoordinateScaler.get_scale_factors(width, height, match_aspect_ratioTrue)按文档化的宽高比匹配。浏览器生命周期。_ensure_browser首次调用时启动 ChromiumheadlessFalse带一组 Docker 适配的启动参数创建 1920x1080 视口的 context默认超时 30 秒。代码里有意注释掉了一段事件循环变化就重置浏览器的逻辑注释写明浏览器应在对话轮次间保持持久streamlit.py因此只在 session state 里创建一次BrowserTool()之后每次请求把同一个实例传给sampling_loop。你自己接 UI 时也应遵循一个会话一个工具实例的做法而不是每轮重建浏览器。如何往 browser.py 里加一个新动作README 的改法说明是编辑browser.py来加功能或改变行为。从文件里现有动作navigate、form_input等的实现看每个动作都落在固定的四个位置新增动作时照这个模式补齐BROWSER_TOOL_INPUT_SCHEMA[properties][action][enum]与 description 中加入动作名和说明如果新动作需要新参数同步加入properties和对应 description 的Required for列表Actions这个Literal类型中加入动作名编写对应的私有方法如_form_input成功返回ToolResult失败抛ToolError__call__中新增elif action ...分支先校验必填参数再调用私有方法。如果新动作要读页面状态或操作元素优先复用browser_tool_utils/里的脚本模式ref定位优于像素坐标这是 README 强调的设计动机ref在不同窗口尺寸下保持稳定如果只涉及 Playwright API类似type、key、wait直接在私有方法里调用self._page即可。用 loop.py 对接你的 API 集成loop.py 的sampling_loop是工具与 API 之间的粘合层签名关键参数为model、providerAPIProvider枚举支持ANTHROPIC/BEDROCK/VERTEX、system_prompt_suffix、messages、三个回调output_callback、tool_output_callback、api_response_callback、api_key、max_tokens以及可选的browser_toolasync def sampling_loop( *, model: str, provider: APIProvider, system_prompt_suffix: str, messages: list[BetaMessageParam], output_callback: Callable[[BetaContentBlockParam], None], tool_output_callback: Callable[[ToolResult, str], None], api_response_callback: Callable[ [httpx.Request | None, httpx.Response | object | None, Exception | None], None ], api_key: str, only_n_most_recent_images: int | None None, max_tokens: int 4096, browser_tool: Optional[BrowserTool] None, ):适配要点传入已创建的browser_tool可复用持久浏览器实例streamlit 正是这么做的见 streamlit.py同时传了only_n_most_recent_images3只保留最近 3 张截图进上下文不传则每次新建。循环会一直执行到某轮响应不含tool_use才返回最终messages有工具调用时通过ResponseProcessor.execute_tools执行并把tool_result回填进消息。使用 Anthropic provider 时会自动挂prompt-caching-2024-07-31beta 并对 system prompt 加 cache control走 Bedrock/Vertex 则不启用。BROWSER_SYSTEM_PROMPT同文件顶部规定了使用策略每轮先看截图确认当前位置、导航后先调read_page拿ref再交互、提取文字一律用get_page_text而不是读截图、DOM 动作失效时回退到截图坐标。这套提示词与工具行为是配套的改编工具时建议保留。模型选择上streamlit.py的BROWSER_COMPATIBLE_MODELS限定为claude-sonnet-4-5-20250929、claude-opus-4-5-20251101、claude-haiku-4-5-20251001三个 Claude 4.5 模型默认取第一个Bedrock 与 Vertex 有对应的命名形式如anthropic.claude-sonnet-4-5-20250929-v1:0。如果你的 UI 不是 Streamlit就自己实现这三个回调并驱动消息列表想省事则直接复制streamlit.py起步README 也是这么建议的。构建、运行与验证前提是系统装有 Docker 和 Docker Compose以及一个 Anthropic API key。在browser-use-demo目录下cp .env.example .env # 编辑 .env填入 ANTHROPIC_API_KEY.env.example还包含可选的端口覆盖变量VNC_PORT、STREAMLIT_PORT、NOVNC_PORT、HTTP_PORT默认分别为 5900、8501、6080、8080对应 docker-compose.yml 中的端口映射。# 生产式运行 docker-compose up --build # 开发模式监听 browser_use_demo 目录变化并自动同步、重启 docker-compose up --build --watch--watch对应 compose 里./browser_use_demo到容器内/home/browseruse/browser_use_demo的syncrestart规则因此你改browser.py后可以不手动重建镜像。README 也说明重建 Docker 镜像卷挂载允许 Python 代码热更新是修改 demo 的常规操作二者按你使用的 compose 版本取其一。启动后的验证方式README 给出的接口地址与测试提示打开主 UI http://localhost:8080通过 NoVNC http://localhost:6080 观察浏览器实际操作VNC 客户端可连 localhost:5900输入文档给出的示例提示验证核心链路例如 Navigate to news.ycombinator.com and tell me the top 3 stories、Visit wikipedia.org and find information about artificial intelligence文档示例成功与否取决于站点当时状态不是固定断言。排障按 README 的 Troubleshooting 一节对照浏览器画面不可见检查 6080 端口可达、刷新 NoVNC 页面、确认 Docker 资源充足API 报错核对 API key 是否正确、模型是否在上述 Claude 4.5 兼容列表内动作执行失败部分网站有反自动化措施先换简单站点测试并借助 NoVNC 视图确认页面实际状态。另据 README 说明当前 Playwright 实现在 Google.com 搜索时会撞 CAPTCHA建议在提示词里直接指定目标网站而不是让模型去 Google 搜。边界与已知限制这个 demo 定位是学习与开发用途的参考实现README 明确标注 Not for production use把它当作模板起点没问题但不必把它当成生产级浏览器代理方案。find动作在有ANTHROPIC_API_KEY时内部会再调一次 Anthropic API代码中写死claude-3-5-sonnet-20241022对 DOM 树做元素匹配无 key 或调用失败时回退为不带ref的简单文本计数——你的工具如果依赖带 ref 的查找结果要保留这个 key。显示与视口尺寸硬编码在display_constants.py1920x1080these values are hardcoded and not configurable via environment variables改动视口时需同步处理坐标缩放。自建浏览器工具涉及访问外部网站README 的 Safety Considerations 列了隔离运行环境、避免接触敏感凭据、域名白名单、关键操作人工确认等注意事项改编时值得保留这些前提。【免费下载链接】claude-quickstartsA collection of projects designed to help developers quickly get started with building deployable applications using the Claude API项目地址: https://gitcode.com/GitHub_Trending/an/claude-quickstarts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考