工具与工作面板¶

工具调用、子 Agent，以及执行过程中的截图、终端与文件视图。

工具调用¶

展示工具输入、输出、错误、进度和来源。

工具调用


API	`ToolCall(part, onApproval)`
AI Elements	`Tool`
依赖模块	`ai-elements-ui`
API 文档	ToolCall

用相同的 part id 更新输入、进度与输出。onDecision 可携带理由、编辑后的参数及记住决定；不提供回调时只读展示。

import androidx.compose.runtime.Composable
import dev.ai.elements.core.chat.ChatController
import dev.ai.elements.core.model.ToolPart
import dev.ai.elements.ui.chat.ToolCall

@Composable
fun ToolCallsExample(part: ToolPart, controller: ChatController) {
    ToolCall(part, onDecision = { controller.respondToApproval(part.id, it) })
}

子 Agent¶

展示委派任务及其嵌套执行过程。

子 Agent


API	`ToolPartView(part)`
依赖模块	`ai-elements-ui`
API 文档	ToolPartView

在上游设置 ToolKind.Delegation 和 subagent。ToolPartView 会选择委派视图并应用自定义 renderer；嵌套审批共用回调。

import androidx.compose.runtime.Composable
import dev.ai.elements.core.chat.ChatController
import dev.ai.elements.core.model.ToolPart
import dev.ai.elements.ui.chat.ToolPartView

@Composable
fun SubAgentsExample(part: ToolPart, controller: ChatController) {
    ToolPartView(part, onToolDecision = controller::respondToApproval)
}

Agent 工作面板¶

按步骤查看截图、终端、差异与文件，支持时间线和回放。

Agent 工作面板


API	`AgentComputerPanel(state, message), AgentComputerScaffold(state, messages, layout)`
依赖模块	`ai-elements-ui`
API 文档	AgentComputerPanel

将面板状态与页面一起保存。Auto 按容器宽度选择侧栏或底部抽屉；已有自适应布局时可使用 Hosted。

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import dev.ai.elements.core.model.Message
import dev.ai.elements.ui.chat.AgentComputerScaffold
import dev.ai.elements.ui.chat.rememberAgentComputerState

@Composable
fun AgentComputerExample(message: Message) {
    val computer = rememberAgentComputerState()
    AgentComputerScaffold(computer, listOf(message)) {
        androidx.compose.material3.Button(onClick = { computer.open(message.id) }) { Text("Open computer") }
    }
}

回复中的工作预览¶

在涉及电脑操作的回复下方自动展示工作预览。

回复中的工作预览


API	`Conversation / Chat (automatic)`
依赖模块	`ai-elements-ui`
API 文档	Chat

Chat 已包含预览卡和工作面板。工具分类、位置及文件内容应在上游设置；普通工具名称本身不构成 UI 语义。

import androidx.compose.runtime.Composable
import dev.ai.elements.core.chat.ChatController
import dev.ai.elements.ui.chat.Chat

@Composable
fun AgentComputerReplyExample(controller: ChatController) {
    Chat(controller)
}

执行步骤视图¶

按工具分类展示浏览器、终端或差异内容。

执行步骤视图


API	`StepView(step)`
依赖模块	`ai-elements-ui`
API 文档	StepView

截图通过 AgentStep.files 传入。工具分类决定展示方式；请为视图提供有界布局区域。

import androidx.compose.runtime.Composable
import dev.ai.elements.core.model.ToolPart
import dev.ai.elements.ui.chat.AgentStep
import dev.ai.elements.ui.chat.StepView

@Composable
fun StepViewsExample(tool: ToolPart) {
    StepView(AgentStep(tool, emptyList()))
}

Agent 信息卡¶

展示 Agent 的模型、指令、工具与输出结构。

Agent 信息卡


API	`Agent(name, model, instructions, tools, outputSchema)`
AI Elements	`Agent`
依赖模块	`ai-elements-ui`
API 文档	Agent

这是说明卡片，不是 Agent 运行时。数据应来自 backend 配置或远端 Agent Card。

import androidx.compose.runtime.Composable
import dev.ai.elements.ui.chat.Agent
import dev.ai.elements.ui.chat.AgentToolSpec

@Composable
fun AgentExample() {
    Agent(name = "Researcher", model = "My model", instructions = "Cite sources", tools = listOf(AgentToolSpec("search", "Search documents")))
}

Read this page in English