Tools and the agent's computer¶

Tool calls, delegated agents, and the agent's computer that shows each step as the agent saw it.

Tool calls¶

A tool call with its input, output or error, progress, and what provides it.

Tool calls


API	`ToolCall(part, onApproval)`
AI Elements	`Tool`
Artifact	`ai-elements-ui`
Reference	ToolCall

Update the same part as input/progress/output arrives. onDecision carries reason, editedInput and remember; a card without callbacks is read-only.

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) })
}

Sub-agents¶

A delegated agent's run, nested in the call that started it.

Sub-agents


API	`ToolPartView(part)`
Artifact	`ai-elements-ui`
Reference	ToolPartView

Set kind=ToolKind.Delegation and subagent upstream. ToolPartView selects delegation rendering and applies custom renderers; nested approvals share the callback.

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's computer¶

Each step as the agent saw it (screenshot, terminal, diff, file), with a timeline, autoplay, back to live and replay.

Agent's computer


API	`AgentComputerPanel(state, message), AgentComputerScaffold(state, messages, layout)`
Artifact	`ai-elements-ui`
Reference	AgentComputerPanel

Keep computer state with the screen. Auto chooses a side pane or bottom sheet from container width; use Hosted with your own adaptive layout.

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") }
    }
}

Agent's computer · in a reply¶

The live preview card under a reply that works on a computer; it opens the panel.

Agent's computer · in a reply


API	`Conversation / Chat (automatic)`
Artifact	`ai-elements-ui`
Reference	Chat

Chat includes the panel and preview cards. Tool category/location and file parts must be set upstream; ordinary function names alone are not UI semantics.

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)
}

Step views¶

A step by its category: a browser frame with the screenshot, a terminal, a diff.

Step views


API	`StepView(step)`
Artifact	`ai-elements-ui`
Reference	StepView

Pass screenshots as the AgentStep files. Tool category selects terminal, diff or browser presentation; give the view a bounded area.

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¶

An agent's card: model, instructions, tools and output schema.

Agent


API	`Agent(name, model, instructions, tools, outputSchema)`
AI Elements	`Agent`
Artifact	`ai-elements-ui`
Reference	Agent

This is a descriptive card, not an agent runtime. Populate capabilities from your backend or 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")))
}