Help Center/ CodeArts Agent/ User Guide (Space)/ Tool Panel
Updated on 2026-07-30 GMT+08:00
View PDF
Share

Tool Panel

CodeArts Agent Space features a variety of built-in core tools, such as editors, documents, terminals, and browsers. You can flexibly call these tools based on your needs to expand further capabilities.

Opening the Tool Panel

Click (Toggle Tool Panel) in the upper right corner of CodeArts Agent Space page to open the tool panel.

Figure 1 Tool panel

Tool Description

During the task analysis and execution phases in CodeArts Agent Space, various tools have clear divisions of responsibility and work collaboratively to support the entire workflow.

You can view or edit code files generated by CodeArts Agent Space. Context changes are presented through a Diff view, making the modified content more intuitive and easy to understand.

Figure 2 Editor

You can click and view documents related to development requirements (such as PRDs, technical architecture documents, etc.).

Figure 3 Documents

CodeArts Agent Space integrates system terminals (such as PowerShell) and automatically switches to the root directory of the current project. You can run project-related commands without leaving the editor, improving efficiency and operation smoothness.

Figure 4 Terminal

CodeArts Agent Space incorporates built-in browser functionality, enabling you to directly view the live runtime results of your Web applications and perform the following operations:

  • Instant external URL preview: Enter an external URL in the browser address bar to instantly preview the website.
  • One-click selection import to chat: Select one or multiple elements from the browser and add them to the chat box.
  • Direct element-to-agent interaction: Select any element and send it to a chat with one click to interact directly with the agent.
  • Real-time console log viewing and reuse: Open the console, check the browser's printed logs, then paste them into the chat box.
  • Drag-and-drop element movement: Select an element and intuitively adjust its position using the mouse.
  • Two-way editing: Modify element properties directly in either the design interface or the CSS code.
  • Element-level commenting: Add comments to precisely bind style optimization requirements to specific elements.

For more information about browser operations, see Web-based Preview.

Figure 5 Browser

You can click Code Changes to have a real-time overview of task code modifications (including the total number of files, file names, and line counts). Code changes are presented through a Diff view, making the modified content more intuitive and easy to understand.

Figure 6 Code Changes

Configure core parameters for CodeArts Agent Space, such as log levels, chats, and skills. For a detailed guide, see Settings.

Figure 7 Settings