Usare lo strumento per l'uso del computer per gli agenti (anteprima)

Importante

Gli elementi contrassegnati (anteprima) in questo articolo sono attualmente in anteprima pubblica. Questa anteprima viene fornita senza un contratto di servizio e non è consigliabile per i carichi di lavoro di produzione. Alcune funzionalità potrebbero non essere supportate o potrebbero avere funzionalità limitate. Per altre informazioni, vedere Condizioni supplementari per l'utilizzo delle anteprime di Microsoft Azure.

Avviso

Lo strumento per l'uso del computer presenta rischi significativi per la sicurezza e la privacy, inclusi attacchi di tipo prompt injection. Per altre informazioni sugli usi, le funzionalità, le limitazioni, i rischi e le considerazioni per la scelta di un caso d'uso, consultare la nota sulla trasparenza di Azure OpenAI.

Creare agenti che interpretano gli screenshot e automatizzano le interazioni dell'interfaccia utente, ad esempio clic, digitazione e scorrimento. Lo strumento di utilizzo del computer usa il computer-use-preview modello Foundry per proporre azioni basate sul contenuto visivo, consentendo agli agenti di interagire con applicazioni desktop e browser tramite le interfacce utente.

Questa guida illustra come integrare lo strumento per l'uso del computer in un ciclo di applicazioni (screenshot →'azione → screenshot) usando gli SDK più recenti.

Prerequisiti

Supporto per l'utilizzo

La tabella seguente illustra il supporto dell'SDK e della configurazione.

Supporto Foundry di Microsoft PYTHON SDK SDK di C# JavaScript SDK JAVA SDK REST API Configurazione dell'agente di base Configurazione dell'agente standard
✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️

I frammenti di codice in questo articolo sono incentrati sull'integrazione dell'API Agent e Responses. Dipendono dal codice helper e da screenshot di esempio, quindi non sono autonomi. Usa questi esempi aggiornati e queste utilità:

Gli helper Python e Java simulano una macchina a stati restituendo schermate acquisite in precedenza per le azioni richieste. Non sostituiscono il codice di proprietà dell'applicazione che convalida ed esegue azioni in una sandbox, acquisisce lo stato risultante e richiede l'approvazione esplicita dell'utente prima di riconoscere i controlli di sicurezza in sospeso.

Suggerimento

Clona il repository di esempio in modo che i file di supporto e le risorse delle schermate acquisite in precedenza rimangano nelle posizioni relative previste.

Richiedere l'accesso

Per accedere al modello computer-use-preview, è necessario eseguire la registrazione. Microsoft concede l'accesso in base ai criteri di idoneità. Se si ha accesso ad altri modelli di accesso limitato, è comunque necessario richiedere l'accesso per questo modello.

Per richiedere l'accesso, vedere il modulo dell'applicazione.

Dopo che Microsoft concede l'accesso, è necessario creare una distribuzione per il modello.

Esempi di codice

Avviso

Usare lo strumento di utilizzo del computer nelle macchine virtuali senza accesso a dati sensibili o risorse critiche. Per ulteriori informazioni sugli utilizzi previsti, funzionalità, limitazioni, rischi e considerazioni per la scelta di un caso d'uso, vedere la nota sulla trasparenza Azure OpenAI.

È necessario il pacchetto SDK più recente. L'SDK di .NET è attualmente in anteprima.

Screenshot dell'inizializzazione per l'esecuzione dello strumento informatico

Gli estratti seguenti illustrano come creare una versione dell'agente con lo strumento di utilizzo del computer, inviare una richiesta iniziale con uno screenshot ed eseguire più iterazioni per completare un'attività. Gli estratti di codice di Prompt Agents dipendono dall'esempio Python aggiornato e dall'helper menzionati in precedenza. Selezionare Prompt Agents per usare Azure AI Projects SDK per creare un agente prompt sul lato server o Hosted Agents per usare Agent Framework FoundryChatClient per creare un agente temporaneo in-process.

Agenti rapidi

from azure.identity import DefaultAzureCredential
from azure.ai.projects import AIProjectClient
from azure.ai.projects.models import PromptAgentDefinition, ComputerUsePreviewTool

# Import shared helper functions
from computer_use_util import (
    SearchState,
    load_screenshot_assets,
    handle_computer_action_and_take_screenshot,
    print_final_output,
)

"""Main function to demonstrate Computer Use Agent functionality."""
# Initialize state machine
current_state = SearchState.INITIAL

# Load screenshot assets
try:
    screenshots = load_screenshot_assets()
    print("Successfully loaded screenshot assets")
except FileNotFoundError:
    print("Failed to load required screenshot assets. Use the maintained SDK sample on GitHub to get the helper file and images.")
    exit(1)

Creare una versione dell'agente con lo strumento

# Format: "https://resource_name.ai.azure.com/api/projects/project_name"
PROJECT_ENDPOINT = "your_project_endpoint"

project = AIProjectClient(
    endpoint=PROJECT_ENDPOINT,
    credential=DefaultAzureCredential(),
)

computer_use_tool = ComputerUsePreviewTool(display_width=1026, display_height=769, environment="windows")

agent = project.agents.create_version(
    agent_name="ComputerUseAgent",
    definition=PromptAgentDefinition(
        model="computer-use-preview",
        instructions="""
        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.
        """,
        tools=[computer_use_tool],
    ),
    description="Computer automation agent with screen interaction capabilities.",
)
print(f"Agent created (id: {agent.id}, name: {agent.name})")

Un'iterazione per lo strumento per elaborare lo screenshot ed eseguire il passaggio successivo

openai = project.get_openai_client()

# Initial request with screenshot - start with Bing search page
response = openai.responses.create(
    input=[
        {
            "role": "user",
            "content": [
                {
                    "type": "input_text",
                    "text": "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.",
                },
                {
                    "type": "input_image",
                    "image_url": screenshots["browser_search"]["url"],
                    "detail": "high",
                },  # Start with Bing search page
            ],
        }
    ],
    extra_body={"agent_reference": {"name": agent.name, "type": "agent_reference"}},
    truncation="auto",
)

print(f"Initial response received (ID: {response.id})")

Eseguire più iterazioni

Assicurarsi di esaminare ogni iterazione e azione. L'esempio di codice seguente illustra una richiesta API di base. Dopo aver inviato la richiesta API iniziale, eseguire un ciclo in cui il codice dell'applicazione esegue l'azione specificata. Inviare uno screenshot con ogni turno in modo che il modello possa valutare lo stato aggiornato dell'ambiente. L'esempio include un numero massimo di iterazioni per evitare cicli infiniti, ma è possibile modificarlo in base alle esigenze.


max_iterations = 10  # Allow enough iterations for completion
iteration = 0

while True:
    if iteration >= max_iterations:
        print(f"\nReached maximum iterations ({max_iterations}). Stopping.")
        break

    iteration += 1
    print(f"\n--- Iteration {iteration} ---")

    # Check for computer calls in the response
    computer_calls = [item for item in response.output if item.type == "computer_call"]

    if not computer_calls:
        print_final_output(response)
        break

    # Process the first computer call
    computer_call = computer_calls[0]
    action = computer_call.action
    call_id = computer_call.call_id

    # Never execute an action with pending safety checks without user approval.
    safety_checks = computer_call.pending_safety_checks or []
    if safety_checks:
      for check in safety_checks:
        print(f"Safety check: {check.code}: {check.message}")
      if input("Approve this action? Type yes to continue: ").lower() != "yes":
        print("Action rejected by the user.")
        break

    # Handle the action and get the screenshot info
    screenshot_info, current_state = handle_computer_action_and_take_screenshot(action, current_state, screenshots)

    # Regular response with just the screenshot
    response = openai.responses.create(
        previous_response_id=response.id,
        input=[
            {
                "call_id": call_id,
                "type": "computer_call_output",
                "acknowledged_safety_checks": safety_checks,
                "output": {
                    "type": "computer_screenshot",
                    "image_url": screenshot_info["url"],
                },
            }
        ],
        extra_body={"agent_reference": {"name": agent.name, "type": "agent_reference"}},
        truncation="auto",
    )

    print(f"Iteration {iteration}: response received (ID: {response.id})")

Eseguire la pulizia

project.agents.delete_version(agent_name=agent.name, agent_version=agent.version)
print("Agent deleted")

Output previsto

L'esempio seguente mostra l'output previsto durante l'esecuzione dell'esempio di codice precedente:

Successfully loaded screenshot assets
Agent created (id: ..., name: ComputerUseAgent, version: 1)
Starting computer automation session (initial screenshot: cua_browser_search.png)...
Initial response received (ID: ...)
--- Iteration 1 ---
Processing computer call (ID: ...)
  Typing text "OpenAI news" - Simulating keyboard input
  -> Action processed: type
Sending action result back to agent (using cua_search_typed.png)...
Follow-up response received (ID: ...)
--- Iteration 2 ---
Processing computer call (ID: ...)
    Click at (512, 384) - Simulating click on UI element
    -> Assuming click on Search button when search field was populated, displaying results.
    -> Action processed: click
Sending action result back to agent (using cua_search_results.png)...
Follow-up response received (ID: ...)
OpenAI news - Latest Updates
Agent deleted

Agenti ospitati

Questo esempio usa FoundryChatClient da Microsoft Agent Framework e chiama get_computer_use_tool() per collegare lo strumento di anteprima dell'uso del computer. Installa il pacchetto con pip install agent-framework-foundry aiohttp, configura FOUNDRY_PROJECT_ENDPOINT (indica a FOUNDRY_MODEL una distribuzione computer-use-preview ) e accedi con az login. Il ciclo di acquisizione degli screenshot è specifico dell'applicazione; consultare il file di supporto di esempio a monte menzionato di seguito.

import asyncio

from agent_framework import Agent
from agent_framework.foundry import FoundryChatClient
from azure.identity import AzureCliCredential


async def main() -> None:
    agent = Agent(
        client=FoundryChatClient(credential=AzureCliCredential()),
        instructions=(
            "You are a computer automation assistant. Be direct and efficient. "
            "When you reach the search results page, describe the actual result titles you can see."
        ),
        tools=[
            FoundryChatClient.get_computer_use_tool(
                environment="windows",
                display_width=1026,
                display_height=769,
            )
        ],
    )

    # Replace this with your screenshot capture + action handler loop.
    # See the upstream samples folder for a reference implementation.
    result = await agent.run(
        "Help me search for 'OpenAI news'. Type the query and submit the search."
    )
    print(f"Agent: {result.text}")


if __name__ == "__main__":
    asyncio.run(main())

Output previsto

L'agente rilascia azioni di utilizzo del computer (clic, sequenze di tasti, screenshot) fino al completamento dell'attività, quindi descrive la pagina raggiunta:

Agent: I searched for "OpenAI news" in the address bar. The top results include articles from OpenAI's blog, TechCrunch, and The Verge ...

Per un'implementazione completa del ciclo di screenshot, vedere gli esempi di provider Foundry.


Esempio per l'uso di un agente con lo strumento di utilizzo del computer

L'esempio di codice C# seguente illustra come creare un agente con lo strumento per l'uso del computer, inviare una richiesta iniziale con uno screenshot ed eseguire più iterazioni per completare un'attività. Selezionare Prompt Agents per usare Azure AI Projects SDK per creare un agente prompt sul lato server o Hosted Agents per usare Microsoft Agent Framework per creare un agente temporaneo e in-process.

Agenti rapidi

Per consentire all'agente di usare lo strumento per l'uso del computer, usare ResponseTool.CreateComputerTool() quando si configurano gli strumenti dell'agente. In questo esempio viene usato il codice sincrono. Per l'utilizzo asincrono, vedere l'esempio di codice sample nell'Azure SDK per .NET repository in GitHub.

using System;
using System.Runtime.CompilerServices;
using Azure.AI.Projects;
using Azure.AI.Extensions.OpenAI;
using Azure.Identity;

class ComputerUseDemo
{
    // Format: "https://resource_name.ai.azure.com/api/projects/project_name"
    private const string ProjectEndpoint = "your_project_endpoint";

    // Read image files using `ReadImageFile` method.
    private static BinaryData ReadImageFile(string name, [CallerFilePath] string pth = "")
    {
        var dirName = Path.GetDirectoryName(pth) ?? "";
        return new BinaryData(File.ReadAllBytes(Path.Combine(dirName, name)));
    }

    // Create a helper method to parse the ComputerTool outputs and to respond
    // to Agents queries with new screenshots. Note that throughout
    // this sample the media type for image is set. Agents support `image/jpeg`,
    // `image/png`, `image/gif` and `image/webp` media types.
    private static string ProcessComputerUseCall(ComputerCallResponseItem item, string oldScreenshot)
    {
        string currentScreenshot = "browser_search";
        switch (item.Action.Kind)
        {
            case ComputerCallActionKind.Type:
                Console.WriteLine($"  Typing text \"{item.Action.TypeText}\" - Simulating keyboard input");
                currentScreenshot = "search_typed";
                break;
            case ComputerCallActionKind.KeyPress:
                HashSet<string> codes = new(item.Action.KeyPressKeyCodes);
                if (codes.Contains("Return") || codes.Contains("ENTER"))
                {
                    // If we have typed the value to the search field, go to search results.
                    if (string.Equals(oldScreenshot, "search_typed"))
                    {
                        Console.WriteLine("  -> Detected ENTER key press, when search field was populated, displaying results.");
                        currentScreenshot = "search_results";
                    }
                    else
                    {
                        Console.WriteLine("  -> Detected ENTER key press, on results or unpopulated search, do nothing.");
                        currentScreenshot = oldScreenshot;
                    }
                }
                else
                {
                    Console.WriteLine($"  Key press: {item.Action.KeyPressKeyCodes.Aggregate("", (agg, next) => agg + "+" + next)} - Simulating key combination");
                }
                break;
            case ComputerCallActionKind.Click:
                Console.WriteLine($"  Click at ({item.Action.ClickCoordinates.Value.X}, {item.Action.ClickCoordinates.Value.Y}) - Simulating click on UI element");
                if (string.Equals(oldScreenshot, "search_typed"))
                {
                    Console.WriteLine("  -> Assuming click on Search button when search field was populated, displaying results.");
                    currentScreenshot = "search_results";
                }
                else
                {
                    Console.WriteLine("  -> Assuming click on Search on results or when search was not populated, do nothing.");
                    currentScreenshot = oldScreenshot;
                }
                break;
            case ComputerCallActionKind.Drag:
                string pathStr = item.Action.DragPath.ToArray().Select(p => $"{p.X}, {p.Y}").Aggregate("", (agg, next) => $"{agg} -> {next}");
                Console.WriteLine($"  Drag path: {pathStr} - Simulating drag operation");
                break;
            case ComputerCallActionKind.Scroll:
                Console.WriteLine($"  Scroll at ({item.Action.ScrollCoordinates.Value.X}, {item.Action.ScrollCoordinates.Value.Y}) - Simulating scroll action");
                break;
            case ComputerCallActionKind.Screenshot:
                Console.WriteLine("  Taking screenshot - Capturing current screen state");
                break;
            default:
                break;
        }
        Console.WriteLine($"  -> Action processed: {item.Action.Kind}");

        return currentScreenshot;
    }

    public static void Main()
    {
        // Create project client
        AIProjectClient projectClient = new(endpoint: new Uri(ProjectEndpoint), tokenProvider: new DefaultAzureCredential());

        // Read in three example screenshots and place them into a dictionary.
        Dictionary<string, BinaryData> screenshots = new() {
            { "browser_search", ReadImageFile("Assets/cua_browser_search.png")},
            { "search_typed", ReadImageFile("Assets/cua_search_typed.png")},
            { "search_results", ReadImageFile("Assets/cua_search_results.png")},
        };

        // Create a PromptAgentDefinition with ComputerTool.
        DeclarativeAgentDefinition agentDefinition = new(model: "computer-use-preview")
        {
            Instructions = "You are a computer automation assistant.\n\n" +
                            "Be direct and efficient. When you reach the search results page, read and describe the actual search result titles and descriptions you can see.",
            Tools = {
                ResponseTool.CreateComputerTool(
                    environment: new ComputerToolEnvironment("windows"),
                    displayWidth: 1026,
                    displayHeight: 769
                ),
            }
        };
        AgentVersion agentVersion = projectClient.AgentAdministrationClient.CreateAgentVersion(
            agentName: "myAgent",
            options: new(agentDefinition)
        );
        // Create an `ResponseResult` using `ResponseItem`, containing two `ResponseContentPart`:
        // one with the image and another with the text. In the loop, request Agent
        // while it is continuing to browse web. Finally, print the tool output message.
        ProjectResponsesClient responseClient = projectClient.ProjectOpenAIClient.GetProjectResponsesClientForAgent(agentVersion.Name);
        CreateResponseOptions responseOptions = new()
        {
            TruncationMode = ResponseTruncationMode.Auto,
            InputItems =
            {
                ResponseItem.CreateUserMessageItem(
                [
                    ResponseContentPart.CreateInputTextPart("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."),
                    ResponseContentPart.CreateInputImagePart(imageBytes: screenshots["browser_search"], imageBytesMediaType: "image/png", imageDetailLevel: ResponseImageDetailLevel.High)
                ]),
            },
        };
        bool computerUseCalled = false;
        string currentScreenshot = "browser_search";
        int limitIteration = 10;
        ResponseResult response;
        do
        {
            response = responseClient.CreateResponse(responseOptions);
            computerUseCalled = false;
            responseOptions.InputItems.Clear();
            responseOptions.PreviousResponseId = response.Id;
            foreach (ResponseItem responseItem in response.OutputItems)
            {
                responseOptions.InputItems.Add(responseItem);
                if (responseItem is ComputerCallResponseItem computerCall)
                {
                  if (computerCall.PendingSafetyChecks.Count > 0)
                  {
                    throw new InvalidOperationException(
                      "Pause execution and obtain end-user approval before acknowledging safety checks."
                    );
                  }
                    currentScreenshot = ProcessComputerUseCall(computerCall, currentScreenshot);
                    responseOptions.InputItems.Add(ResponseItem.CreateComputerCallOutputItem(callId: computerCall.CallId, output: ComputerCallOutput.CreateScreenshotOutput(screenshotImageBytes: screenshots[currentScreenshot], screenshotImageBytesMediaType: "image/png")));
                    computerUseCalled = true;
                }
            }
            limitIteration--;
        } while (computerUseCalled && limitIteration > 0);
        Console.WriteLine(response.GetOutputText());

        // Clean up resources by deleting Agent.
        projectClient.AgentAdministrationClient.DeleteAgentVersion(agentName: agentVersion.Name, agentVersion: agentVersion.Version);
    }
}

Output previsto

L'esempio seguente mostra l'output previsto durante l'esecuzione dell'esempio di codice precedente:

Agent created (id: ..., name: myAgent, version: 1)
Starting computer automation session (initial screenshot: cua_browser_search.png)...
Initial response received (ID: ...)
--- Iteration 1 ---
Processing computer call (ID: ...)
  Typing text "OpenAI news" - Simulating keyboard input
  -> Action processed: Type
Sending action result back to agent (using cua_search_typed.png)...
Follow-up response received (ID: ...)
--- Iteration 2 ---
Processing computer call (ID: ...)
  Click at (512, 384) - Simulating click on UI element
  -> Assuming click on Search button when search field was populated, displaying results.
  -> Action processed: Click
Sending action result back to agent (using cua_search_results.png)...
Follow-up response received (ID: ...)
OpenAI news - Latest Updates
Agent deleted

Agenti ospitati

Questo esempio usa Microsoft Agent Framework e chiama AsAIAgent(...) in AIProjectClient insieme a FoundryAITool.CreateComputerTool(...) da Microsoft.Agents.AI.Foundry per assegnare all'agente lo strumento di utilizzo del computer. Installare i pacchetti Microsoft.Agents.AI.Foundry e Azure.AI.Projects, impostare le variabili di ambiente AZURE_AI_PROJECT_ENDPOINT e AZURE_AI_COMPUTER_USE_DEPLOYMENT_NAME e accedere con az login. Questo esempio omette le funzioni di supporto per gli screenshot — consulta l'esempio completo per il ciclo delle azioni e le utilità per le risorse.

using Azure.AI.Projects;
using Azure.Identity;
using Microsoft.Agents.AI;
using Microsoft.Agents.AI.Foundry;
using Microsoft.Extensions.AI;
using OpenAI.Responses;

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";

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)]);

// Upload pre-captured screenshots that simulate browser state transitions.
// (See the full sample for ComputerUseUtil implementation.)
Dictionary<string, string> screenshots = await ComputerUseUtil.UploadScreenshotAssetsAsync(fileClient);

ChatClientAgentRunOptions runOptions = new()
{
    ChatOptions = new ChatOptions
    {
        RawRepresentationFactory = (_) => new CreateResponseOptions { TruncationMode = ResponseTruncationMode.Auto },
    }
};

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

AgentSession session = await agent.CreateSessionAsync();
AgentResponse response = await agent.RunAsync(message, session: session, options: runOptions);

// Loop: parse computer call actions from response, simulate them, return new screenshots.
for (int i = 0; i < 10; i++)
{
    ComputerCallResponseItem? computerCall = response.Messages
        .SelectMany(m => m.Contents)
        .Select(c => c.RawRepresentation as ComputerCallResponseItem)
        .FirstOrDefault(item => item is not null);

    if (computerCall is null) break;

    (_, string fileId) = await ComputerUseUtil.GetScreenshotAsync(computerCall.Action, default, screenshots);

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

await ComputerUseUtil.EnsureDeleteScreenshotAssetsAsync(fileClient, screenshots);
Console.WriteLine($"Response: {response.Text}");

Output previsto

Al termine del ciclo di azione, la risposta dell'agente finale descrive la pagina raggiunta:

Response: I searched for "OpenAI news" in the address bar. The top results include articles from OpenAI's blog, TechCrunch, and The Verge ...

Per l'implementazione completa dell'helper per screenshot e il ciclo d'azione end-to-end, consultare Agent_Step15_ComputerUse.


Esempio per l'uso di un agente con lo strumento di utilizzo del computer

L'estratto di TypeScript seguente illustra come creare una versione dell'agente con lo strumento di utilizzo del computer, inviare una richiesta iniziale con uno screenshot ed eseguire più iterazioni. Importa un helper locale computerUseUtil.js e prevede gli asset di screenshot che non sono inclusi in questo articolo. Tratta l'estratto come uno schema di integrazione e fornisci l'esecuzione delle azioni gestite dall'applicazione, l'acquisizione di schermate e l'approvazione esplicita in materia di sicurezza prima di confermare i controlli di sicurezza in sospeso.

import { DefaultAzureCredential } from "@azure/identity";
import { AIProjectClient } from "@azure/ai-projects";
import { createInterface } from "node:readline/promises";
import { stdin, stdout } from "node:process";
import {
  SearchState,
  loadScreenshotAssets,
  handleComputerActionAndTakeScreenshot,
  printFinalOutput,
  type ComputerAction,
} from "./computerUseUtil.js";

// Format: "https://resource_name.ai.azure.com/api/projects/project_name"
const PROJECT_ENDPOINT = "your_project_endpoint";

export async function main(): Promise<void> {
  // Initialize state machine
  let currentState = SearchState.INITIAL;

  // Load screenshot assets
  const screenshots = loadScreenshotAssets();
  console.log("Successfully loaded screenshot assets");

  // Create AI Project client
  const project = new AIProjectClient(PROJECT_ENDPOINT, new DefaultAzureCredential());
  const openai = project.getOpenAIClient();

  console.log("Creating Computer Use Agent...");
  const agent = await project.agents.createVersion("ComputerUseAgent", {
    kind: "prompt" as const,
    model: "computer-use-preview",
    instructions: `
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.
    `.trim(),
    tools: [
      {
        type: "computer_use_preview",
        display_width: 1026,
        display_height: 769,
        environment: "windows" as const,
      },
    ],
  });
  console.log(`Agent created (id: ${agent.id}, name: ${agent.name}, version: ${agent.version})`);

  // Initial request with screenshot - start with Bing search page
  console.log(
    "Starting computer automation session (initial screenshot: cua_browser_search.png)...",
  );
  let response = await openai.responses.create(
    {
      input: [
        {
          role: "user" as const,
          content: [
            {
              type: "input_text",
              text: "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.",
            },
            {
              type: "input_image",
              image_url: screenshots.browser_search.url,
              detail: "high",
            },
          ],
        },
      ],
      truncation: "auto",
    },
    {
      body: { agent_reference: { name: agent.name, type: "agent_reference" } },
    },
  );

  console.log(`Initial response received (ID: ${response.id})`);

  // Main interaction loop with deterministic completion
  const maxIterations = 10; // Allow enough iterations for completion
  let iteration = 0;

  while (iteration < maxIterations) {
    iteration++;
    console.log(`\n--- Iteration ${iteration} ---`);

    // Check for computer calls in the response
    const computerCalls = response.output.filter((item) => item.type === "computer_call");

    if (computerCalls.length === 0) {
      printFinalOutput({
        output: response.output,
        status: response.status ?? "",
      });
      break;
    }

    // Process the first computer call
    const computerCall = computerCalls[0];
    const action: ComputerAction = computerCall.action;
    const callId: string = computerCall.call_id;

    // Never execute an action with pending safety checks without user approval.
    const safetyChecks = computerCall.pending_safety_checks ?? [];
    if (safetyChecks.length > 0) {
      for (const check of safetyChecks) {
        console.warn(`Safety check: ${check.code}: ${check.message}`);
      }
      const prompt = createInterface({ input: stdin, output: stdout });
      const answer = await prompt.question("Approve this action? Type yes to continue: ");
      prompt.close();
      if (answer.toLowerCase() !== "yes") {
        throw new Error("Action rejected by the user.");
      }
    }

    console.log(`Processing computer call (ID: ${callId})`);

    // Handle the action and get the screenshot info
    const [screenshotInfo, updatedState] = handleComputerActionAndTakeScreenshot(
      action,
      currentState,
      screenshots,
    );
    currentState = updatedState;

    console.log(`Sending action result back to agent (using ${screenshotInfo.filename})...`);
    // Regular response with just the screenshot
    response = await openai.responses.create(
      {
        previous_response_id: response.id,
        input: [
          {
            call_id: callId,
            type: "computer_call_output",
            acknowledged_safety_checks: safetyChecks,
            output: {
              type: "computer_screenshot",
              image_url: screenshotInfo.url,
            },
          },
        ],
        truncation: "auto",
      },
      {
        body: { agent_reference: { name: agent.name, type: "agent_reference" } },
      },
    );

    console.log(`Follow-up response received (ID: ${response.id})`);
  }

  if (iteration >= maxIterations) {
    console.log(`\nReached maximum iterations (${maxIterations}). Stopping.`);
  }

  // Clean up resources
  console.log("\nCleaning up...");
  await project.agents.deleteVersion(agent.name, agent.version);
  console.log("Agent deleted");

  console.log("\nComputer Use Agent sample completed!");
}

main().catch((err) => {
  console.error("The sample encountered an error:", err);
});

Output previsto

L'esempio seguente mostra l'output previsto durante l'esecuzione dell'esempio di codice precedente:

Successfully loaded screenshot assets
Creating Computer Use Agent...
Agent created (id: ..., name: ComputerUseAgent, version: 1)
Starting computer automation session (initial screenshot: cua_browser_search.png)...
Initial response received (ID: ...)
--- Iteration 1 ---
Processing computer call (ID: ...)
  Typing text "OpenAI news" - Simulating keyboard input
  -> Action processed: type
Sending action result back to agent (using cua_search_typed.png)...
Follow-up response received (ID: ...)
--- Iteration 2 ---
Processing computer call (ID: ...)
    Click at (512, 384) - Simulating click on UI element
    -> Assuming click on Search button when search field was populated, displaying results.
    -> Action processed: click
Sending action result back to agent (using cua_search_results.png)...
Follow-up response received (ID: ...)
OpenAI news - Latest Updates
Cleaning up...
Agent deleted
Computer Use Agent sample completed!

Utilizzare le funzionalità del computer in un agente Java

Aggiungi la dipendenza a pom.xml:

<dependency>
    <groupId>com.azure</groupId>
    <artifactId>azure-ai-agents</artifactId>
    <version>2.4.0</version>
</dependency>

Creare un agente per l'uso di un computer

import com.azure.ai.agents.AgentsClient;
import com.azure.ai.agents.AgentsClientBuilder;
import com.azure.ai.agents.ResponsesClient;
import com.azure.ai.agents.models.*;
import com.azure.identity.DefaultAzureCredentialBuilder;
import com.openai.models.responses.Response;
import com.openai.models.responses.ResponseCreateParams;

import java.util.Collections;

public class ComputerUseExample {
    // Format: "https://resource_name.ai.azure.com/api/projects/project_name"
    private static final String PROJECT_ENDPOINT = "your_project_endpoint";

    public static void main(String[] args) {

        AgentsClientBuilder builder = new AgentsClientBuilder()
            .credential(new DefaultAzureCredentialBuilder().build())
            .endpoint(PROJECT_ENDPOINT);

        AgentsClient agentsClient = builder.buildAgentsClient();
        ResponsesClient responsesClient = builder.buildResponsesClient();

        // Create computer use tool
        ComputerUsePreviewTool tool = new ComputerUsePreviewTool(
            ComputerEnvironment.WINDOWS,
            1024,
            768
        );

        // Create agent with computer use tool
        PromptAgentDefinition agentDefinition = new PromptAgentDefinition("computer-use-preview")
            .setInstructions("You are a computer automation assistant.")
            .setTools(Collections.singletonList(tool));

        AgentVersionDetails agent = agentsClient.createAgentVersion("computer-use-agent", agentDefinition);
        System.out.printf("Agent created: %s (version %s)%n", agent.getName(), agent.getVersion());

        // Create a response with initial screenshot
        AgentReference agentReference = new AgentReference(agent.getName())
            .setVersion(agent.getVersion());

        Response response = responsesClient.createAzureResponse(
            new AzureCreateResponseOptions().setAgentReference(agentReference),
            ResponseCreateParams.builder()
                .input("Open the browser and navigate to microsoft.com"));

        System.out.println("Response: " + response.output());

        // The response will contain computer_call items with actions
        // to execute. Process each action, take screenshots, and
        // send results back using responsesClient.createAzureResponse()
        // with the previousResponseId and computer call output.

        // Clean up
        agentsClient.deleteAgentVersion(agent.getName(), agent.getVersion());
    }
}

Per il ciclo simulato completo, usare l'esempio di ComputerUseSync.java gestito con il relativo helper ComputerUseUtil.java. Il componente helper associa le azioni richieste alle schermate acquisite in precedenza. Sostituisci la simulazione con l'esecutore di azioni della tua applicazione, l'acquisizione di schermate e il flusso di approvazione della sicurezza.

Usare il computer con l'API REST

Ottenere un token di accesso:

export AGENT_TOKEN=$(az account get-access-token --scope "https://ai.azure.com/.default" --query accessToken -o tsv)

Creare un agente con l'uso del computer

curl -X POST "$FOUNDRY_PROJECT_ENDPOINT/agents?api-version=v1" \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $AGENT_TOKEN" \
  -d '{
    "name": "computer-use-agent",
    "definition": {
      "kind": "prompt",
      "model": "computer-use-preview",
      "instructions": "You are a computer automation assistant.",
      "tools": [
        {
          "type": "computer_use_preview",
          "environment": "windows",
          "display_width": 1024,
          "display_height": 768
        }
      ]
    }
  }'

Generare una risposta

curl -X POST "$FOUNDRY_PROJECT_ENDPOINT/openai/v1/responses" \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $AGENT_TOKEN" \
  -d '{
    "agent_reference": {"type": "agent_reference", "name": "computer-use-agent"},
    "input": "Open the browser and navigate to microsoft.com"
  }'

La risposta include computer_call elementi di output con azioni da eseguire. Prima di eseguire un'azione, esaminare pending_safety_checks. Se la matrice non è vuota, sospendere e mostrare l'azione e i controlli di sicurezza all'utente finale. Continuare solo dopo che l'utente approva esplicitamente l'azione.

Inviare i risultati dell'azione con screenshot

Dopo che l'utente ha approvato eventuali controlli di sicurezza in sospeso e l'applicazione esegue l'azione sul computer, acquisisci uno screenshot e rimandalo. Includi ogni verifica approvata in acknowledged_safety_checks. Se non sono stati restituiti controlli, usare una matrice vuota.

curl -X POST "$FOUNDRY_PROJECT_ENDPOINT/openai/v1/responses" \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $AGENT_TOKEN" \
  -d '{
    "agent_reference": {"type": "agent_reference", "name": "computer-use-agent"},
    "previous_response_id": "<RESPONSE_ID>",
    "input": [
      {
        "type": "computer_call_output",
        "call_id": "<CALL_ID>",
        "acknowledged_safety_checks": [],
        "output": {
          "type": "computer_screenshot",
          "image_url": "data:image/png;base64,<BASE64_SCREENSHOT>"
        }
      }
    ]
  }'

Sostituire <RESPONSE_ID>, <CALL_ID>e <BASE64_SCREENSHOT> con i valori della risposta precedente. Ripetere questo ciclo fino a quando il modello non restituisce una risposta di testo anziché un oggetto computer_call.

Eseguire la pulizia

curl -X DELETE "$FOUNDRY_PROJECT_ENDPOINT/agents/computer-use-agent?api-version=v1" \
  -H "Authorization: Bearer $AGENT_TOKEN"

Cosa è possibile fare con lo strumento per l'uso del computer

Dopo aver integrato il ciclo di richiesta e risposta (screenshot -> azione -> screenshot), lo strumento per l'uso del computer può aiutare un agente:

  • Proporre azioni dell'interfaccia utente, ad esempio clic, digitazione, scorrimento e richiesta di un nuovo screenshot.
  • Adattarsi alle modifiche dell'interfaccia utente rivalutando lo screenshot più recente dopo ogni azione.
  • Lavorare tra browser e interfaccia utente desktop, a seconda di come si ospita l'ambiente in modalità sandbox.

Lo strumento non controlla direttamente un dispositivo. L'applicazione esegue ogni azione richiesta e restituisce uno screenshot aggiornato.

Differenze tra l'automazione del browser e l'uso del computer

Nella tabella seguente sono elencate alcune delle differenze tra lo strumento per l'uso del computer e lo strumento di automazione del browser .

Funzionalità Automazione del browser Strumento per l'uso del computer
Supporto del modello Tutti i modelli GPT computer-use-preview solo modello
È possibile visualizzare ciò che accade? No
Come comprende lo schermo Analizza le pagine HTML o XML in documenti DOM Dati in pixel non elaborati dagli screenshot
Come agisce Elenco di azioni fornite dal modello Tastiera virtuale e mouse
È a più passaggi?
Interfacce Browser Computer e browser
È necessario portare la propria risorsa? La propria risorsa Playwright con le chiavi archiviate come connessione. Non è necessaria alcuna risorsa aggiuntiva, ma eseguire questo strumento in un ambiente in modalità sandbox.

Quando usare ogni strumento

Scegliere l'uso del computer quando è necessario:

  • Interagire con le applicazioni desktop oltre il browser
  • Visualizzare gli screenshot visualizzati dall'agente
  • Lavorare in ambienti in cui l'analisi DOM non è disponibile

Scegliere l'automazione del browser quando è necessario:

  • Eseguire solo interazioni Web senza requisiti di accesso limitanti
  • Usare qualsiasi modello GPT (non limitato a computer-use-preview)
  • Evitare di gestire i cicli di acquisizione degli screenshot e di esecuzione delle azioni

Supporto a livello di area

Per usare lo strumento per l'utilizzo del computer, è necessaria un'implementazione del modello di utilizzo del computer. Il modello di utilizzo del computer è disponibile nelle aree seguenti:

Regione Stato
eastus2 Disponibile
swedencentral Disponibile
southindia Disponibile

Comprendere l'integrazione dell'uso del computer

Quando si usa lo strumento per l'uso del computer, integrarlo nell'applicazione seguendo questa procedura:

  1. Inviare una richiesta al modello che includa una chiamata allo strumento uso del computer, le dimensioni di visualizzazione e l'ambiente. È anche possibile includere uno screenshot dello stato iniziale dell'ambiente nella prima richiesta API.

  2. Ricevere una risposta dal modello. Se la risposta contiene elementi di azione, tali elementi contengono azioni suggerite per avanzare verso l'obiettivo specificato. Ad esempio, un'azione potrebbe essere screenshot in modo che il modello possa valutare lo stato corrente con uno screenshot aggiornato o click con coordinate X/Y che indicano dove deve essere spostato il mouse.

  3. Eseguire l'azione usando il codice dell'applicazione nel computer o nell'ambiente del browser.

  4. Dopo aver eseguito l'azione, catturare lo stato aggiornato dell'ambiente in uno screenshot.

  5. Invia una nuova richiesta con lo stato aggiornato come tool_call_output e ripeti questo ciclo finché il modello non interrompe la richiesta di azioni o decidi di fermarti.

    Nota

    Prima di usare lo strumento, configurare un ambiente in grado di acquisire screenshot ed eseguire le azioni consigliate dall'agente. Per motivi di sicurezza, usare un ambiente in modalità sandbox, ad esempio Playwright.

Gestire la cronologia delle conversazioni

Usare il previous_response_id parametro per collegare la richiesta corrente alla risposta precedente. Usare questo parametro quando non si vuole inviare la cronologia completa della conversazione con ogni chiamata.

Se non si usa questo parametro, assicurarsi di includere tutti gli elementi restituiti nell'output della risposta della richiesta precedente nella matrice di input. Questo requisito include gli elementi di ragionamento, se presenti.

Controlli di sicurezza e considerazioni sulla sicurezza

Avviso

L'uso del computer comporta notevoli rischi per la sicurezza e la privacy e la responsabilità dell'utente. Entrambi gli errori in giudizio dall'intelligenza artificiale e la presenza di istruzioni dannose o confuse su pagine Web, desktop o altri ambienti operativi che l'intelligenza artificiale rileva potrebbero causare l'esecuzione di comandi non previsti dall'utente o da altri utenti. Questi rischi potrebbero compromettere la sicurezza dei browser, dei computer e degli account a cui l'IA ha accesso, inclusi sistemi personali, finanziari o aziendali.

Usare lo strumento di utilizzo del computer nelle macchine virtuali senza accesso a dati sensibili o risorse critiche. Per ulteriori informazioni sugli utilizzi previsti, funzionalità, limitazioni, rischi e considerazioni per la scelta di un caso d'uso, vedere la nota sulla trasparenza Azure OpenAI.

L'API dispone di controlli di sicurezza che consentono di proteggersi da errori di inserimento di richieste e di modelli. Questi controlli includono:

Rilevamento di istruzioni dannose: il sistema valuta l'immagine dello screenshot e controlla se contiene contenuto antagonista che potrebbe modificare il comportamento del modello.

Rilevamento del dominio irrilevante: il sistema valuta il current_url parametro (se specificato) e controlla se il dominio corrente è rilevante in base alla cronologia delle conversazioni.

Rilevamento di domini sensibili: il sistema controlla il current_url parametro (se specificato) e genera un avviso quando rileva che l'utente si trova in un dominio sensibile.

Se vengono attivati uno o più dei controlli precedenti, il modello genera un controllo di sicurezza quando restituisce il successivo computer_call usando il pending_safety_checks parametro .

"output": [ 
    { 
        "type": "reasoning", 
        "id": "rs_67cb...", 
        "summary": [ 
            { 
                "type": "summary_text", 
                "text": "Exploring 'File' menu option." 
            } 
        ] 
    }, 
    { 
        "type": "computer_call", 
        "id": "cu_67cb...", 
        "call_id": "call_nEJ...", 
        "action": { 
            "type": "click", 
            "button": "left", 
            "x": 135, 
            "y": 193 
        }, 
        "pending_safety_checks": [ 
            { 
                "id": "cu_sc_67cb...", 
                "code": "malicious_instructions", 
                "message": "We've detected instructions that may cause your application to perform malicious or unauthorized actions. Please acknowledge this warning if you'd like to proceed." 
            } 
        ], 
        "status": "completed" 
    } 
]

È necessario passare nuovamente i controlli di sicurezza come acknowledged_safety_checks nella richiesta successiva per continuare.

"input":[ 
        { 
            "type": "computer_call_output", 
            "call_id": "<call_id>", 
            "acknowledged_safety_checks": [ 
                { 
                    "id": "<safety_check_id>", 
                    "code": "malicious_instructions", 
                    "message": "We've detected instructions that may cause your application to perform malicious or unauthorized actions. Please acknowledge this warning if you'd like to proceed." 
                } 
            ], 
            "output": { 
                "type": "computer_screenshot", 
                "image_url": "<image_url>" 
            } 
        } 
    ]

Gestione dei controlli di sicurezza

In tutti i casi in cui pending_safety_checks vengono restituiti, delegare le azioni all'utilizzatore finale per confermare il corretto comportamento e l'accuratezza del modello.

malicious_instructions e irrelevant_domain: gli utenti finali devono esaminare le azioni del modello e verificare che il modello si comporti come previsto.

sensitive_domain: assicurarsi che un utente finale monitori attivamente le azioni del modello in questi siti. L'implementazione esatta di questa "modalità di controllo" può variare in base all'applicazione, ma un potenziale esempio potrebbe raccogliere dati di impression utente nel sito per assicurarsi che sia presente un coinvolgimento attivo dell'utente finale con l'applicazione.

Risoluzione dei problemi

Problema Causa Risoluzione
Non vedi un computer_call nella risposta. L'agente non è configurato con lo strumento per l'uso del computer, la distribuzione non è un modello di utilizzo del computer o il prompt non richiede l'interazione dell'interfaccia utente. Verificare che l'agente abbia uno computer_use_preview strumento, che la distribuzione sia il modello computer-use-preview e che la richiesta imponga un'azione dell'interfaccia utente (digitare, fare clic o acquisire uno screenshot).
Il codice di esempio ha esito negativo con file helper mancanti o screenshot. Gli estratti fanno riferimento alle utilità di supporto e alle immagini di esempio che non fanno parte di questo repository di documentazione. Clona uno degli esempi mantenuti nella sezione "Eseguire gli esempi SDK mantenuti" in modo che i file di supporto e le risorse rimangano nelle rispettive posizioni relative previste. Per TypeScript, fornisci le tue risorse helper e gli screenshot.
Il ciclo si arresta al limite di iterazione. L'attività richiede più turni o l'app non applica le azioni richieste dal modello. Aumentare il limite di iterazione e verificare che il codice esegui l'azione richiesta e invii un nuovo screenshot dopo ogni turno.
Si riceve pending_safety_checks. Il servizio ha rilevato un potenziale rischio di sicurezza (come un'iniezione di prompt o un dominio a contenuto sensibile). Sospendere l'automazione, richiedere a un utente finale di esaminare la richiesta e continuare solo dopo l'invio acknowledged_safety_checks con il successivo computer_call_output.
Il modello ripete "acquisire uno screenshot" senza fare progressi. Lo screenshot non viene aggiornato, è di bassa qualità o non mostra lo stato dell'interfaccia utente pertinente. Inviare uno screenshot aggiornato dopo ogni azione e usare un'immagine di dettaglio superiore quando necessario. Assicurarsi che lo screenshot includa l'interfaccia utente pertinente.
Accesso negato durante la richiesta del computer-use-preview modello. Non ti sei registrato per l'accesso oppure l'accesso non è stato concesso. Inviare il modulo dell'applicazione e attendere l'approvazione. Controllare il messaggio di posta elettronica per la conferma.
Screenshot degli errori di codifica. Formato immagine non supportato o problema di codifica base64. Usare il formato PNG o JPEG. Assicurarsi che la codifica Base64 sia corretta senza danneggiamento. Controllare che le dimensioni dell'immagine corrispondano a display_width e display_height.
Le azioni sono eseguite su coordinate errate. Mancata corrispondenza della risoluzione dello schermo tra screenshot e visualizzazione effettiva. Assicurarsi che display_width e display_height in ComputerUsePreviewTool corrispondano alla risoluzione effettiva dello schermo.
Il modello allucina gli elementi dell'interfaccia utente. Screenshot di qualità troppo bassa o modifica dell'interfaccia utente tra turni. Usare screenshot con risoluzione superiore. Inviare screenshot aggiornati immediatamente dopo ogni azione. Ridurre il ritardo tra azione e screenshot.