# 示例：基于控制台的浏览器工具开发与应用实践
本示例先在AgentArts平台中创建浏览器沙箱，再编写代码脚本创建Agent并调用浏览器沙箱，共分为两个阶段。
#### 基于控制台的工具开发与应用实践
1. 登录[AgentArts智能体平台](https://console.huaweicloud.com/agentarts/#/home/overview)。

2. 在左侧导航栏选择"托管与运行 \> 浏览器"，进入浏览器界面。
3. 单击右上角"创建浏览器"，参考[表1]配置后单击"立即创建"。
   
    表1浏览器配置说明 
   | 参数           | 说明              |
   |:---|:---|
   | 名称           | 可自定义。          |
   | 描述（可选）    | 可自定义。            |
   | 委托（可选）      | 不填写。            |
   | 入站身份认证     | 选择"API key认证"。 |
   | API Key名称 | 可自定义。         |
   | 日志记录        | 选择开启。            |
   | 出网网络配置     | 选择"公网访问"。     |
      
   图1创建浏览器   
   ![](https://support.huaweicloud.com/highcode-agentarts/zh-cn_image_0000002711683128.png "点击放大")
   
   
4. 获取域名和API Key。 
   浏览器创建完成后，在列表可查看已创建的浏览器的名称。记录该名称，并获取该沙箱工具的域名、API Key。
   沙箱工具的域名、API Key获取方法如下：
   1. 单击沙箱工具名称。
   
   2. 进入"配置信息"页面后，获取域名。
      图2获取沙箱域名   
      ![](https://support.huaweicloud.com/highcode-agentarts/zh-cn_image_0000002741242139.png "点击放大") 
   
   3. 单击"URN"链接，在弹出的窗口中获取沙箱的API Key。
      图3URN链接   
      ![](https://support.huaweicloud.com/highcode-agentarts/zh-cn_image_0000002741322087.png "点击放大")
      图4获取沙箱API Key   
      ![](https://support.huaweicloud.com/highcode-agentarts/zh-cn_image_0000002711523170.png "点击放大") 
   
   
   
   
5. 环境准备。 
   1. 安装Python。 本示例需要在Linux服务器上安装Python并执行后续代码操作。
      大多数Linux发行版（如Ubuntu）都预装了Python，您可以先通过python3 --version在Linux系统中检查。
      如未安装，可以使用如下命令安装：
      ```
      sudo apt update
      sudo apt install python3
      ```
      
   
   2. 创建虚拟环境。执行以下命令创建虚拟环境（建议在Python虚拟环境中安装，以避免与系统包产生冲突）。
      ```
      # 创建并激活虚拟环境 (linux) 
      python3 -m venv venv 
      source venv/bin/activate
      ```
      
   
   3. 安装必要的库。在您的Linux服务器的终端中，运行以下命令安装agentarts-sdk、langgraph、langchain_openai包。
      ```
      # 安装agentarts-sdk包
      pip install agentarts-sdk
      # 安装langgraph包
      pip install langgraph
      # 安装langchain_openai包
      pip install langchain-openai
      ```
      
   
   
   
   
6. 配置环境变量。 
   ```
   # === 用于通过代码创建浏览器沙箱 ===
   export HUAWEICLOUD_SDK_AK="您的华为云AK"
   export HUAWEICLOUD_SDK_SK="您的华为云SK"
   export AGENTARTS_CONTROL_ENDPOINT="https://agentarts.cn-southwest-2.myhuaweicloud.com"
   # === 用于启动浏览器沙箱 ===
   export AGENTARTS_BROWSER_DATA_ENDPOINT="http://您的浏览器沙箱域名"
   export MODEL_API_KEY="您的大模型API密钥"export BASE_URL="https://api.modelarts-maas.com/openai/v1"
   ```
   获取AK/SK请参考[如何获取华为云AK/SK](https://support.huaweicloud.com/highcode-agentarts/agentarts_10_047.html#agentarts_10_047__section13365141032517)。
   AGENTARTS_BROWSER_DATA_ENDPOINT请配置为http://{浏览器沙箱域名}，获取方法请参考前面的步骤。
   由于示例中使用华为云MaaS服务中的模型，因此需要[登录MaaS服务](https://console.huaweicloud.com/modelarts/#/model-studio/authmanage)创建API Key。
   https://api.modelarts-maas.com/openai/v1表示使用OpenAI兼容接口。
   ![](https://support.huaweicloud.com/highcode-agentarts/zh-cn_image_0000002711683130.png "点击放大")
   
   
7. 编写代码脚本。 
   在Linux服务器上新建一个Python代码文件（例如browser_app.py），将以下步骤的代码脚本按照顺序组合进去。
   导入浏览器工具及其他包
   ```
   import json
   import os
   from typing import Annotated, TypedDict
   from langchain_core.messages import AIMessage, BaseMessage, HumanMessage, SystemMessage
   from langchain_core.tools import tool
   from langchain_openai import ChatOpenAI
   from langgraph.graph import END, StateGraph
   from langgraph.graph.message import add_messages
   from langgraph.prebuilt import ToolNode
   from agentarts.sdk import AgentArtsRuntimeApp
   from agentarts.sdk.tools import browser_session
   app = AgentArtsRuntimeApp()
   ```
   编写工具包装代码
   代码文件中填写如下脚本。用于将"连接浏览器沙箱并浏览网页"这一操作包装成一个标准的函数工具。当Agent中的大模型发现需要浏览网页时，会将目标网址传递给这个工具，工具会将网址发送到浏览器沙箱执行导航，再把页面信息拿回来给大模型。
   ```
   @tool
   def browse_webpage(url: str, description: str = "") -> str | None:
       """Browse a webpage and retrieve its page information in the browser sandbox"""
       api_key = "替换为获取的浏览器沙箱API Key"  # your api key
       with browser_session(
           "cn-southwest-2",
           "替换为创建的浏览器沙箱名称",
           "agent-browser-session",
           api_key=api_key,
           verify_ssl=False,
       ) as browser_client:
           browser_client.navigate(url=url, api_key=api_key)
           page_info = browser_client.get_page_info(api_key=api_key)
       return json.dumps(page_info)
   ```
   编写系统提示词。
   代码文件中添加如下代码，用于编写系统提示词。
   ```
   S
   SYSTEM_PROMPT = """你是一个AI助手，可以使用浏览器工具来浏览网页并获取信息。
   可用工具：
   - browse_webpage(url: str, description: str): 在浏览器沙箱中打开网页并获取页面信息
   使用原则：
   1. 当用户需要获取网页内容、查看页面信息时使用此工具
   2. 简单问题直接回答，无需工具验证
   3. 工具调用最多1-2次，避免重复访问
   4. 获得结果后立即返回答案
   """
   ```
   定义Agent。
   代码文件中添加如下代码，用于定义一个Agent并集成浏览器沙箱。
   示例中使用deepseek-v4-flash模型，如果需要更换其他模型，请[登录MaaS服务](https://console.huaweicloud.com/modelarts#/model-studio/homepage)，获取模型接口的model参数值（注意代码使用了OpenAI格式的调用方法，需获取对应格式的model参数值）。
   图5获取MaaS服务model参数值   
   ![](https://support.huaweicloud.com/highcode-agentarts/zh-cn_image_0000002741242141.png "点击放大")
   ```
   # 创建Agent
   llm = ChatOpenAI(
       model="deepseek-v4-flash",
       api_key=os.environ.get("MODEL_API_KEY", ""),
       base_url=os.environ.get("BASE_URL", ""),
       max_tokens=1000,
       temperature=0.7,
   )
   # 创建工具列表
   tools = [browse_webpage]
   # 工具绑定Agent
   llm = llm.bind_tools(tools)
   # 定义graph状态
   class AgentState(TypedDict):
       messages: Annotated[list[BaseMessage], add_messages]
   def call_model(state: AgentState):
       """调用模型并返回响应"""
       if not state["messages"] or all(
           not isinstance(msg, SystemMessage) for msg in state["messages"]
       ):
           messages = [SystemMessage(content=SYSTEM_PROMPT)] + state["messages"]
       else:
           messages = state["messages"]
       response = llm.invoke(messages)
       return {"messages": [response]}
   def should_continue(state):
       """判断是否继续使用工具"""
       last_message = state["messages"][-1]
       if isinstance(last_message, AIMessage):
           has_tool_calls = bool(last_message.tool_calls)
           if has_tool_calls:
               return "tools"
       return END
   # 创建LangGraph工作流
   workflow = StateGraph(AgentState)
   workflow.add_node("agent", call_model)
   workflow.add_node("tools", ToolNode(tools))
   # 设置入口
   workflow.set_entry_point("agent")
   # 添加边
   workflow.add_conditional_edges("agent", should_continue, {"tools": "tools", "__end__": "__end__"})
   workflow.add_edge("tools", "agent")
   agent = workflow.compile()
   ```
   **拼接服务器代码**
   拼接以下代码，用于使用Agent启动一个本地服务器，并提供一个对外接收提问的接口。
   ```
   @app.entrypoint
   def agent_chat(payload: dict):
       query = "帮我访问 https://example.com 并告诉我页面标题"
       # 运行Agent
       result = agent.invoke({
           "messages": [HumanMessage(content=query)]
       })
       return result["messages"][-1].content
   if __name__ == '__main__':
       app.run()
   ```
   
   
8. 代码文件（例如app.py）编写完成后，保存并退出文件编辑。 
   ```
   Esc 
   :wq    #保存并退出
   ```
   
   
9. 运行并测试。 
   在服务器中执行python browser_app.py命令运行示例代码（如果在创建Python代码文件时使用了其他名称，请按实际名称执行）。
   
   
10. 打开一个新的终端窗口（保持原窗口运行），使用curl命令进行测试。测试完成后，可以使用Ctrl + C停止运行的进程。 
    上述步骤中已经在代码里面内置了问题"帮我访问 [https://example.com](https://example.com/) 并告诉我页面标题"，Agent会将该浏览网页的过程放到浏览器沙箱中运行，并返回页面信息结果。
    ```
    curl --location http://localhost:8080/invocations --data-raw "{}"
    ```
    ![](https://support.huaweicloud.com/highcode-agentarts/zh-cn_image_0000002741322089.png "点击放大")