Fix and simplify ComputerUse sample (#5075)

* fix the computer use sample

* rollback changes to the search state enum

* address review comments

* address review comments
This commit is contained in:
SergeyMenshykh
2026-04-07 13:29:31 +01:00
committed by GitHub
Unverified
parent d73c06fa8c
commit 86b49d800e
10 changed files with 178 additions and 194 deletions
@@ -6,7 +6,7 @@
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<NoWarn>$(NoWarn);OPENAICUA001</NoWarn>
<NoWarn>$(NoWarn);OPENAICUA001;MEAI001</NoWarn>
</PropertyGroup>
<ItemGroup>
@@ -19,13 +19,13 @@
</ItemGroup>
<ItemGroup>
<None Update="Assets\cua_browser_search.png">
<None Update="Assets\cua_browser_search.jpg">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Update="Assets\cua_search_results.png">
<None Update="Assets\cua_search_results.jpg">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Update="Assets\cua_search_typed.png">
<None Update="Assets\cua_search_typed.jpg">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
</ItemGroup>
Binary file not shown.

After

Width:  |  Height:  |  Size: 402 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 357 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 MiB

@@ -1,5 +1,6 @@
// Copyright (c) Microsoft. All rights reserved.
using Microsoft.Extensions.AI;
using OpenAI.Responses;
namespace Demo.ComputerUse;
@@ -16,83 +17,77 @@ internal enum SearchState
internal static class ComputerUseUtil
{
/// <summary>
/// Load and convert screenshot images to base64 data URLs.
/// </summary>
internal static Dictionary<string, byte[]> LoadScreenshotAssets()
internal static async Task<Dictionary<string, string>> UploadScreenshotAssetsAsync(IHostedFileClient fileClient)
{
string baseDir = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Assets");
string assetsDir = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Assets");
ReadOnlySpan<(string key, string fileName)> screenshotFiles =
[
("browser_search", "cua_browser_search.png"),
("search_typed", "cua_search_typed.png"),
("search_results", "cua_search_results.png")
];
(string key, string fileName)[] files =
[
("browser_search", "cua_browser_search.jpg"),
("search_typed", "cua_search_typed.jpg"),
("search_results", "cua_search_results.jpg")
];
Dictionary<string, byte[]> screenshots = [];
foreach (var (key, fileName) in screenshotFiles)
Dictionary<string, string> screenshots = [];
foreach (var (key, fileName) in files)
{
string fullPath = Path.GetFullPath(Path.Combine(baseDir, fileName));
screenshots[key] = File.ReadAllBytes(fullPath);
HostedFileContent result = await fileClient.UploadAsync(
Path.Combine(assetsDir, fileName), new HostedFileClientOptions() { Purpose = "assistants" });
screenshots[key] = result.FileId;
}
return screenshots;
}
internal static async Task EnsureDeleteScreenshotAssetsAsync(IHostedFileClient fileClient, Dictionary<string, string> screenshots)
{
foreach (var (_, fileId) in screenshots)
{
try
{
await fileClient.DeleteAsync(fileId);
}
catch
{
}
}
}
/// <summary>
/// Process a computer action and simulate its execution.
/// Simulates executing a computer action by advancing the state
/// and returning the screenshot file ID for the new state.
/// </summary>
internal static (SearchState CurrentState, byte[] ImageBytes) HandleComputerActionAndTakeScreenshot(
internal static async Task<(SearchState State, string FileId)> GetScreenshotAsync(
ComputerCallAction action,
SearchState currentState,
Dictionary<string, byte[]> screenshots)
Dictionary<string, string> screenshots)
{
Console.WriteLine($"Simulating the execution of computer action: {action.Kind}");
SearchState newState = DetermineNextState(action, currentState);
string imageKey = GetImageKey(newState);
return (newState, screenshots[imageKey]);
}
private static SearchState DetermineNextState(ComputerCallAction action, SearchState currentState)
{
string actionType = action.Kind.ToString();
if (actionType.Equals("type", StringComparison.OrdinalIgnoreCase) && action.TypeText is not null)
if (action.Kind == ComputerCallActionKind.Wait)
{
return SearchState.Typed;
await Task.Delay(TimeSpan.FromSeconds(5));
}
if (IsEnterKeyAction(action, actionType))
SearchState nextState = action.Kind switch
{
Console.WriteLine(" -> Detected ENTER key press");
return SearchState.PressedEnter;
}
ComputerCallActionKind.Click when currentState == SearchState.Typed => SearchState.PressedEnter,
ComputerCallActionKind.Type when action.TypeText is not null => SearchState.Typed,
ComputerCallActionKind.KeyPress when IsEnterKey(action) => SearchState.PressedEnter,
_ => currentState
};
if (actionType.Equals("click", StringComparison.OrdinalIgnoreCase) && currentState == SearchState.Typed)
string imageKey = nextState switch
{
Console.WriteLine(" -> Detected click after typing");
return SearchState.PressedEnter;
}
SearchState.PressedEnter => "search_results",
SearchState.Typed => "search_typed",
_ => "browser_search"
};
return currentState;
return (nextState, screenshots[imageKey]);
}
private static bool IsEnterKeyAction(ComputerCallAction action, string actionType)
{
return (actionType.Equals("key", StringComparison.OrdinalIgnoreCase) ||
actionType.Equals("keypress", StringComparison.OrdinalIgnoreCase)) &&
action.KeyPressKeyCodes is not null &&
(action.KeyPressKeyCodes.Contains("Return", StringComparer.OrdinalIgnoreCase) ||
action.KeyPressKeyCodes.Contains("Enter", StringComparer.OrdinalIgnoreCase));
}
private static string GetImageKey(SearchState state) => state switch
{
SearchState.PressedEnter => "search_results",
SearchState.Typed => "search_typed",
_ => "browser_search"
};
private static bool IsEnterKey(ComputerCallAction action) =>
action.KeyPressKeyCodes is not null &&
(action.KeyPressKeyCodes.Contains("Return", StringComparer.OrdinalIgnoreCase) ||
action.KeyPressKeyCodes.Contains("Enter", StringComparer.OrdinalIgnoreCase));
}
@@ -1,146 +1,109 @@
// Copyright (c) Microsoft. All rights reserved.
// This sample shows how to use Computer Use Tool with a ChatClientAgent.
// This sample shows how to use the Computer Use tool with AIProjectClient.AsAIAgent(...).
using Azure.AI.Projects;
using Azure.Identity;
using Demo.ComputerUse;
using Microsoft.Agents.AI;
using Microsoft.Agents.AI.Foundry;
using Microsoft.Extensions.AI;
using OpenAI.Responses;
namespace Demo.ComputerUse;
string endpoint = Environment.GetEnvironmentVariable("AZURE_AI_PROJECT_ENDPOINT") ?? throw new InvalidOperationException("AZURE_AI_PROJECT_ENDPOINT is not set.");
string deploymentName = Environment.GetEnvironmentVariable("AZURE_AI_COMPUTER_USE_DEPLOYMENT_NAME") ?? "computer-use-preview";
internal sealed class Program
AIProjectClient projectClient = new(new Uri(endpoint), new DefaultAzureCredential());
using IHostedFileClient fileClient = projectClient.GetProjectOpenAIClient().AsIHostedFileClient();
AIAgent agent = projectClient.AsAIAgent(
model: deploymentName,
name: "ComputerAgent",
instructions: "You are a computer automation assistant.",
tools: [FoundryAITool.CreateComputerTool(ComputerToolEnvironment.Browser, 1026, 769)]);
Dictionary<string, string> screenshots = [];
try
{
private static async Task Main(string[] args)
// Upload pre-captured screenshots that simulate browser state transitions.
screenshots = await ComputerUseUtil.UploadScreenshotAssetsAsync(fileClient);
// Enable auto-truncation for the Responses API.
ChatClientAgentRunOptions runOptions = new()
{
const string AgentInstructions = @"
You are a computer automation assistant.
Be direct and efficient. When you reach the search results page, read and describe the actual search result titles and descriptions you can see.
";
const string AgentName = "ComputerAgent-RAPI";
string endpoint = Environment.GetEnvironmentVariable("AZURE_AI_PROJECT_ENDPOINT") ?? throw new InvalidOperationException("AZURE_AI_PROJECT_ENDPOINT is not set.");
string deploymentName = Environment.GetEnvironmentVariable("AZURE_AI_MODEL_DEPLOYMENT_NAME") ?? "computer-use-preview";
// WARNING: DefaultAzureCredential is convenient for development but requires careful consideration in production.
// In production, consider using a specific credential (e.g., ManagedIdentityCredential) to avoid
// latency issues, unintended credential probing, and potential security risks from fallback mechanisms.
AIProjectClient aiProjectClient = new(new Uri(endpoint), new DefaultAzureCredential());
// Create a AIAgent with ComputerUseTool.
AIAgent agent = aiProjectClient.AsAIAgent(deploymentName,
instructions: AgentInstructions,
name: AgentName,
description: "Computer automation agent with screen interaction capabilities.",
tools: [
FoundryAITool.CreateComputerTool(ComputerToolEnvironment.Browser, 1026, 769),
]);
await InvokeComputerUseAgentAsync(agent);
}
private static async Task InvokeComputerUseAgentAsync(AIAgent agent)
{
// Load screenshot assets
Dictionary<string, byte[]> screenshots = ComputerUseUtil.LoadScreenshotAssets();
ChatOptions chatOptions = new();
CreateResponseOptions responseCreationOptions = new()
ChatOptions = new ChatOptions
{
TruncationMode = ResponseTruncationMode.Auto
};
chatOptions.RawRepresentationFactory = (_) => responseCreationOptions;
ChatClientAgentRunOptions runOptions = new(chatOptions)
{
AllowBackgroundResponses = true,
};
ChatMessage message = new(ChatRole.User, [
new TextContent("I need you to help me search for 'OpenAI news'. Please type 'OpenAI news' and submit the search. Once you see search results, the task is complete."),
new DataContent(new BinaryData(screenshots["browser_search"]), "image/png")
]);
// Initial request with screenshot - start with Bing search page
Console.WriteLine("Starting computer automation session (initial screenshot: cua_browser_search.png)...");
// We use PreviousResponseId to chain calls, sending only the new computer_call_output items
// instead of re-sending the full context.
AgentSession session = await agent.CreateSessionAsync();
AgentResponse response = await agent.RunAsync(message, session: session, options: runOptions);
// Main interaction loop
const int MaxIterations = 10;
int iteration = 0;
// Initialize state machine
SearchState currentState = SearchState.Initial;
while (true)
{
// Poll until the response is complete.
while (response.ContinuationToken is { } token)
{
// Wait before polling again.
await Task.Delay(TimeSpan.FromSeconds(2));
// Continue with the token.
runOptions.ContinuationToken = token;
response = await agent.RunAsync(session, runOptions);
}
// Clear the continuation token so the next RunAsync call is a fresh request.
runOptions.ContinuationToken = null;
Console.WriteLine($"Agent response received (ID: {response.ResponseId})");
if (iteration >= MaxIterations)
{
Console.WriteLine($"\nReached maximum iterations ({MaxIterations}). Stopping.");
break;
}
iteration++;
Console.WriteLine($"\n--- Iteration {iteration} ---");
// Check for computer calls in the response
IEnumerable<ComputerCallResponseItem> computerCallResponseItems = response.Messages
.SelectMany(x => x.Contents)
.Where(c => c.RawRepresentation is ComputerCallResponseItem and not null)
.Select(c => (ComputerCallResponseItem)c.RawRepresentation!);
ComputerCallResponseItem? firstComputerCall = computerCallResponseItems.FirstOrDefault();
if (firstComputerCall is null)
{
Console.WriteLine("No computer call actions found. Ending interaction.");
Console.WriteLine($"Final Response: {response}");
break;
}
// Process the first computer call response
ComputerCallAction action = firstComputerCall.Action;
string currentCallId = firstComputerCall.CallId;
Console.WriteLine($"Processing computer call (ID: {currentCallId})");
// Simulate executing the action and taking a screenshot
(SearchState CurrentState, byte[] ImageBytes) screenInfo = ComputerUseUtil.HandleComputerActionAndTakeScreenshot(action, currentState, screenshots);
currentState = screenInfo.CurrentState;
Console.WriteLine("Sending action result back to agent...");
// Send only the computer_call_output — the session carries PreviousResponseId for context continuity.
AIContent callOutput = new()
{
RawRepresentation = new ComputerCallOutputResponseItem(
currentCallId,
output: ComputerCallOutput.CreateScreenshotOutput(new BinaryData(screenInfo.ImageBytes), "image/png"))
};
response = await agent.RunAsync([new ChatMessage(ChatRole.User, [callOutput])], session: session, options: runOptions);
RawRepresentationFactory = (_) => new CreateResponseOptions() { TruncationMode = ResponseTruncationMode.Auto },
}
};
// Send the initial request with a screenshot of the browser.
ChatMessage message = new(ChatRole.User, [
new TextContent("Search for 'OpenAI news'. Type it and submit. Once you see results, the task is complete."),
new AIContent() { RawRepresentation = ResponseContentPart.CreateInputImagePart(imageFileId: screenshots["browser_search"], imageDetailLevel: ResponseImageDetailLevel.High) }
]);
Console.WriteLine("Starting computer use session...");
AgentSession session = await agent.CreateSessionAsync();
AgentResponse response = await agent.RunAsync(message, session: session, options: runOptions);
SearchState currentState = SearchState.Initial;
for (int i = 0; i < 10; i++)
{
// Find the next computer call action.
ComputerCallResponseItem? computerCall = response.Messages
.SelectMany(m => m.Contents)
.Select(c => c.RawRepresentation as ComputerCallResponseItem)
.FirstOrDefault(item => item is not null);
if (computerCall is null)
{
if (currentState == SearchState.PressedEnter)
{
Console.WriteLine("No more computer actions. Done.");
Console.WriteLine(response);
break;
}
// Check if the agent is asking for confirmation to proceed, and if so, respond affirmatively.
TextContent? textContent = response.Messages
.Where(m => m.Role == ChatRole.Assistant)
.SelectMany(m => m.Contents.OfType<TextContent>())
.FirstOrDefault();
if (textContent?.Text is { } text && (
text.Contains("Would you like me") ||
text.Contains("Should I") ||
text.Contains("proceed") ||
text.Contains('?')))
{
response = await agent.RunAsync("Please proceed.", session, runOptions);
continue;
}
break;
}
Console.WriteLine($"[{i + 1}] Action: {computerCall!.Action.Kind}");
// Simulate the action and get the resulting screenshot.
(currentState, string fileId) = await ComputerUseUtil.GetScreenshotAsync(computerCall.Action, currentState, screenshots);
// Send the screenshot back as the computer call output.
AIContent callOutput = new()
{
RawRepresentation = new ComputerCallOutputResponseItem(
computerCall.CallId,
output: ComputerCallOutput.CreateScreenshotOutput(screenshotImageFileId: fileId))
};
response = await agent.RunAsync([new ChatMessage(ChatRole.User, [callOutput])], session: session, options: runOptions);
}
}
finally
{
await ComputerUseUtil.EnsureDeleteScreenshotAssetsAsync(fileClient, screenshots);
}
@@ -1,13 +1,39 @@
# Computer Use with the Responses API
# Computer Use with the Responses API
This sample shows how to use the Computer Use tool with a `ChatClientAgent` using the Responses API directly.
This sample shows how to use the Computer Use tool with `AIProjectClient.AsAIAgent(...)`.
## What this sample demonstrates
- Using `FoundryAITool.CreateComputerTool()` with `ChatClientAgent`
- Using `FoundryAITool.CreateComputerTool()` to add computer use capabilities
- Processing computer call actions (click, type, key press)
- Managing the computer use interaction loop with screenshots
- Handling the Azure Agents API workaround for `previous_response_id` with `computer_call_output`
For more information, see [Use the computer tool](https://learn.microsoft.com/en-us/azure/foundry/agents/how-to/tools/computer-use?pivots=csharp).
## How the simulation works
In a real computer use scenario, the model controls a virtual keyboard and mouse to interact with a live browser — typing text, clicking buttons, and pressing keys. The host application captures a screenshot after each action and sends it back to the model so it can decide what to do next.
**This sample does not connect to a real browser.** Instead, it intercepts the model's actions and returns pre-captured screenshots as if the actions were actually performed. No real typing, clicking, or key presses happen — the sample fakes the environment so you can explore the computer use protocol without any browser automation setup.
### State transitions
The model receives a screenshot as input, analyzes it, and responds with a computer action as output. The sample maps each action to a new state and returns the corresponding screenshot:
| Step | Model Action | What Happens | Screenshot Sent Back to Model |
|------|-----------------|-------------------------------------------|--------------------------------------------------------------|
| 1 | | Session starts with the user prompt | `cua_browser_search.jpg` — empty search page |
| 2 | Click | Model clicks the search box to focus it | `cua_browser_search.jpg` — same page |
| 3 | Type | Model types the search query into the box | `cua_search_typed.jpg` — search text visible in the box |
| 3a | *(text response)* | Model may ask for confirmation instead of acting | `cua_search_typed.jpg` — same page |
| 4 | KeyPress Enter | Model presses Enter to submit the search | `cua_search_results.jpg` — search results page |
### Interaction loop
1. The user prompt and the initial screenshot (`cua_browser_search.jpg` — an empty search page) are sent to the model as input.
2. The model analyzes the screenshot and responds with a computer action (e.g., click on the search box to focus it, then type search text, then press Enter).
3. The sample intercepts the action, advances the state, and sends back the next pre-captured screenshot as if the action was performed on a real browser.
4. Steps 23 repeat until the model stops requesting actions or the iteration limit is reached.
## Prerequisites
@@ -19,7 +45,7 @@ Set the following environment variables:
```powershell
$env:AZURE_AI_PROJECT_ENDPOINT="https://your-foundry-service.services.ai.azure.com/api/projects/your-foundry-project"
$env:AZURE_AI_MODEL_DEPLOYMENT_NAME="computer-use-preview"
$env:AZURE_AI_COMPUTER_USE_DEPLOYMENT_NAME="computer-use-preview"
```
## Run the sample