如何用 Docker Compose 启动 claude-quickstarts 的 Browser Use Demo 并访问三个界面入口【免费下载链接】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-quickstartsbrowser-use-demo是 claude-quickstarts 仓库中一个容器化的浏览器自动化参考实现Claude 通过自定义 browser 工具驱动容器内的 Chromium完成网页导航、DOM 读取、表单填写等操作。本任务的目标是在本地用 Docker Compose 把它跑起来并能访问文档给出的三个界面入口主界面8080、NoVNC 浏览器视图6080和原生 VNC5900。开始前的前提只有两条系统已安装 Docker 和 Docker Compose以及你拥有一个 Anthropic API key。准备克隆仓库并配置 API key进入仓库的browser-use-demo目录git clone https://gitcode.com/GitHub_Trending/an/claude-quickstarts cd claude-quickstarts/browser-use-demo然后基于仓库提供的示例文件创建本地.envcp .env.example .env # 编辑 .env把 ANTHROPIC_API_KEY 替换为你的真实 API key.env.example 中除了必填的ANTHROPIC_API_KEY还有四个可选的端口配置项默认值分别对应三个入口和 Streamlit 服务# Port Configuration (optional - defaults shown) VNC_PORT5900 STREAMLIT_PORT8501 NOVNC_PORT6080 HTTP_PORT8080这些变量在 docker-compose.yml 中以${VNC_PORT:-5900}:5900等形式做端口映射只有当宿主机 5900/8501/6080/8080 端口被占用时才需要修改否则保持默认即可。另外注意示例文件中ANTHROPIC_API_KEYyour_anthropic_api_key_here只是占位值。容器启动时会先运行环境校验脚本 validate_env.py如果 key 仍是占位值或长度不足 10 个字符容器会直接报错退出提示编辑.env文件填入有效 key。启动docker-compose up --build在browser-use-demo目录下执行docker-compose up --build首次运行会先构建镜像。Dockerfile 基于ubuntu:22.04安装 xvfb、x11vnc、mutter 等桌面与 VNC 依赖并通过 pyenv 安装 Python 3.11.6、pip 依赖以及 Playwright Chromium构建时间取决于网络速度。容器内的启动流程在 entrypoint.sh 中先运行validate_env.py校验配置失败则退出然后依次启动 XVFB 虚拟显示、窗口管理器、VNC 服务、NoVNC、静态 HTTP 服务和 Streamlit 应用。校验通过时终端会输出文档示例✓ Environment validation passed Display: 1920x1080 Browser: 1920x1080构建和启动完成后entrypoint 还会打印✨ Browser Use Demo is ready! ➡️ Open http://localhost:8080 in your browser to begin看到Browser Use Demo is ready!即表示容器已就绪。显示分辨率固定为 1920x108016:9这是 browser 工具做坐标缩放的前提不需要额外配置。开发场景的可选替代命令是带文件监听的模式修改browser_use_demo/下的代码会自动同步并重启容器docker-compose up --build --watch访问三个界面入口README 给出的三个入口及用途如下主界面http://localhost:8080README 称其为 Streamlit interface。这个端口由容器内的 HTTP 服务http_server.py提供页面 index.html 把 Streamlit 聊天界面8501和 NoVNC 画面6080内嵌成左右两个 iframe右上角还有一个 “Toggle Screen Control” 按钮可以在只读观看和手动控制屏幕之间切换。这是日常使用的主入口。NoVNC 浏览器视图http://localhost:6080。直接看浏览器画面的独立入口适合在 8080 页面内嵌视图加载不正常时单独排查。原生 VNC用任意 VNC 客户端连接localhost:5900。适合你已有 VNC 客户端工具的场景没有 VNC 客户端时用上面两个网页入口即可。验证发一条提示词确认链路可用界面能打开只代表前端起来了链路是否真正打通要看 Claude 能否控制浏览器。README 给出的试用提示词示例“Navigate to news.ycombinator.com and tell me the top 3 stories”“Go to google.com and search for Anthropic Claude”在 8080 主界面输入提示词后一边看聊天回复一边观察 NoVNC 画面里浏览器是否实际导航到了目标网站。两点文档明确提醒的边界当前 Playwright 实现对 google.com 的搜索会触发 CAPTCHAREADME 建议在提示词中直接指定目标网站例如 “navigate to anthropic.com and search for x”来规避部分网站有反自动化措施遇到浏览器操作失败时先换更简单的网站测试。启动失败或界面打不开时查什么README 的 Troubleshooting 一节列了对应三类现象的检查项浏览器画面看不到检查 6080 端口是否可访问刷新 NoVNC 页面确认分配给 Docker 的资源足够。API 报错确认ANTHROPIC_API_KEY配置正确确认使用的是兼容模型README 列出的 Claude 4.5 系列为claude-sonnet-4-5-20250929、claude-opus-4-5-20251101、claude-haiku-4-5-20251001。浏览器操作失败可能是目标网站有反自动化措施先用简单网站验证功能并对照浏览器视图看实际发生了什么。使用边界README 对这个 demo 的定位是学习和开发用途明确标注 “Not for production use”并建议不要在其中输入个人账号凭据或敏感信息。容器隔离降低但不能完全消除风险网页内容中的指令仍可能被模型当作指令执行prompt injection所以演示时访问的网站应自行甄别。如果跑通之后想改行为README 指出所有浏览器动作实现在 browser.py采样循环在 loop.py聊天 UI 在 streamlit.py配合--watch模式可以直接改代码观察效果。【免费下载链接】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），仅供参考 如何用 Docker Compose 启动 claude-quickstarts 的 Browser Use Demo 并访问三个界面入口？
如何用 Docker Compose 启动 claude-quickstarts 的 Browser Use Demo 并访问三个界面入口【免费下载链接】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-quickstartsbrowser-use-demo是 claude-quickstarts 仓库中一个容器化的浏览器自动化参考实现Claude 通过自定义 browser 工具驱动容器内的 Chromium完成网页导航、DOM 读取、表单填写等操作。本任务的目标是在本地用 Docker Compose 把它跑起来并能访问文档给出的三个界面入口主界面8080、NoVNC 浏览器视图6080和原生 VNC5900。开始前的前提只有两条系统已安装 Docker 和 Docker Compose以及你拥有一个 Anthropic API key。准备克隆仓库并配置 API key进入仓库的browser-use-demo目录git clone https://gitcode.com/GitHub_Trending/an/claude-quickstarts cd claude-quickstarts/browser-use-demo然后基于仓库提供的示例文件创建本地.envcp .env.example .env # 编辑 .env把 ANTHROPIC_API_KEY 替换为你的真实 API key.env.example 中除了必填的ANTHROPIC_API_KEY还有四个可选的端口配置项默认值分别对应三个入口和 Streamlit 服务# Port Configuration (optional - defaults shown) VNC_PORT5900 STREAMLIT_PORT8501 NOVNC_PORT6080 HTTP_PORT8080这些变量在 docker-compose.yml 中以${VNC_PORT:-5900}:5900等形式做端口映射只有当宿主机 5900/8501/6080/8080 端口被占用时才需要修改否则保持默认即可。另外注意示例文件中ANTHROPIC_API_KEYyour_anthropic_api_key_here只是占位值。容器启动时会先运行环境校验脚本 validate_env.py如果 key 仍是占位值或长度不足 10 个字符容器会直接报错退出提示编辑.env文件填入有效 key。启动docker-compose up --build在browser-use-demo目录下执行docker-compose up --build首次运行会先构建镜像。Dockerfile 基于ubuntu:22.04安装 xvfb、x11vnc、mutter 等桌面与 VNC 依赖并通过 pyenv 安装 Python 3.11.6、pip 依赖以及 Playwright Chromium构建时间取决于网络速度。容器内的启动流程在 entrypoint.sh 中先运行validate_env.py校验配置失败则退出然后依次启动 XVFB 虚拟显示、窗口管理器、VNC 服务、NoVNC、静态 HTTP 服务和 Streamlit 应用。校验通过时终端会输出文档示例✓ Environment validation passed Display: 1920x1080 Browser: 1920x1080构建和启动完成后entrypoint 还会打印✨ Browser Use Demo is ready! ➡️ Open http://localhost:8080 in your browser to begin看到Browser Use Demo is ready!即表示容器已就绪。显示分辨率固定为 1920x108016:9这是 browser 工具做坐标缩放的前提不需要额外配置。开发场景的可选替代命令是带文件监听的模式修改browser_use_demo/下的代码会自动同步并重启容器docker-compose up --build --watch访问三个界面入口README 给出的三个入口及用途如下主界面http://localhost:8080README 称其为 Streamlit interface。这个端口由容器内的 HTTP 服务http_server.py提供页面 index.html 把 Streamlit 聊天界面8501和 NoVNC 画面6080内嵌成左右两个 iframe右上角还有一个 “Toggle Screen Control” 按钮可以在只读观看和手动控制屏幕之间切换。这是日常使用的主入口。NoVNC 浏览器视图http://localhost:6080。直接看浏览器画面的独立入口适合在 8080 页面内嵌视图加载不正常时单独排查。原生 VNC用任意 VNC 客户端连接localhost:5900。适合你已有 VNC 客户端工具的场景没有 VNC 客户端时用上面两个网页入口即可。验证发一条提示词确认链路可用界面能打开只代表前端起来了链路是否真正打通要看 Claude 能否控制浏览器。README 给出的试用提示词示例“Navigate to news.ycombinator.com and tell me the top 3 stories”“Go to google.com and search for Anthropic Claude”在 8080 主界面输入提示词后一边看聊天回复一边观察 NoVNC 画面里浏览器是否实际导航到了目标网站。两点文档明确提醒的边界当前 Playwright 实现对 google.com 的搜索会触发 CAPTCHAREADME 建议在提示词中直接指定目标网站例如 “navigate to anthropic.com and search for x”来规避部分网站有反自动化措施遇到浏览器操作失败时先换更简单的网站测试。启动失败或界面打不开时查什么README 的 Troubleshooting 一节列了对应三类现象的检查项浏览器画面看不到检查 6080 端口是否可访问刷新 NoVNC 页面确认分配给 Docker 的资源足够。API 报错确认ANTHROPIC_API_KEY配置正确确认使用的是兼容模型README 列出的 Claude 4.5 系列为claude-sonnet-4-5-20250929、claude-opus-4-5-20251101、claude-haiku-4-5-20251001。浏览器操作失败可能是目标网站有反自动化措施先用简单网站验证功能并对照浏览器视图看实际发生了什么。使用边界README 对这个 demo 的定位是学习和开发用途明确标注 “Not for production use”并建议不要在其中输入个人账号凭据或敏感信息。容器隔离降低但不能完全消除风险网页内容中的指令仍可能被模型当作指令执行prompt injection所以演示时访问的网站应自行甄别。如果跑通之后想改行为README 指出所有浏览器动作实现在 browser.py采样循环在 loop.py聊天 UI 在 streamlit.py配合--watch模式可以直接改代码观察效果。【免费下载链接】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），仅供参考