Utiliza la herramienta de uso de la aplicación para agentes (versión preliminar)

Importante

Los elementos marcados (versión preliminar) de este artículo se encuentran actualmente en versión preliminar pública. Esta versión preliminar se proporciona sin un contrato de nivel de servicio y no se recomienda para cargas de trabajo de producción. Es posible que algunas características no se admitan o que tengan funcionalidades restringidas. Para obtener más información, vea Supplemental Terms of Use for Microsoft Azure Previews.

Advertencia

La herramienta de uso del ordenador incluye importantes riesgos de seguridad y privacidad, incluidos los ataques de inyección de comandos. Para obtener más información sobre los usos, funcionalidades, limitaciones, riesgos y consideraciones previstos al elegir un caso de uso, consulte la nota de transparencia Azure OpenAI.

Cree agentes que interpreten capturas de pantalla y automaticen las interacciones de la interfaz de usuario, como hacer clic, escribir y desplazarse. La herramienta de uso de equipos usa el computer-use-preview modelo Foundry para proponer acciones basadas en contenido visual, lo que permite a los agentes interactuar con aplicaciones de escritorio y explorador a través de sus interfaces de usuario.

En esta guía se muestra cómo integrar la herramienta de uso del equipo en un bucle de aplicación (captura de pantalla → acción → captura de pantalla) mediante los SDK más recientes.

Requisitos previos

  • Una suscripción Azure. Cree uno gratis.
  • Un entorno de agente básico o estándar.
  • El paquete del SDK más reciente:
    • Python:azure-ai-projects
    • C#/.NET:Azure.AI.Extensions.OpenAI
    • TypeScript: @azure/ai-projects
    • Java:azure-ai-agents
  • Acceso al modelo computer-use-preview Consulte Solicitud de acceso a continuación.
  • Una implementación computer-use-preview en una región compatible. Compruebe tanto el modelo como la región en Compatibilidad de herramientas por región y modelo.
  • Una máquina virtual o un entorno de espacio aislado para pruebas seguras. No se ejecute en máquinas con acceso a datos confidenciales.

Soporte de uso

En la tabla siguiente se muestra la compatibilidad con el SDK y la configuración.

compatibilidad con Microsoft Foundry SDK de Python C# SDK SDK de JavaScript SDK de Java REST API Configuración básica del agente Configuración del agente estándar
✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️

Los fragmentos de código de este artículo se centran en la integración del agente y de la API de respuestas. Dependen del código auxiliar y las capturas de pantalla de ejemplo, por lo que no son independientes. Utiliza estos ejemplos y ayudantes mantenidos:

Los asistentes de Python y Java simulan una máquina de estado devolviendo capturas de pantalla capturadas previamente para las acciones solicitadas. No reemplazan el código propiedad de la aplicación que valida y ejecuta acciones en un espacio aislado, captura el estado resultante y requiere la aprobación explícita del usuario antes de confirmar las comprobaciones de seguridad pendientes.

Sugerencia

Clone el repositorio de ejemplo para que los archivos auxiliares y los recursos de captura de pantalla capturados previamente permanezcan en sus ubicaciones relativas esperadas.

Solicitud de acceso

Para acceder al computer-use-preview modelo, debe registrarse. Microsoft concede acceso en función de los criterios de idoneidad. Si tiene acceso a otros modelos de acceso limitado, debe solicitar acceso a este modelo.

Para solicitar acceso, consulte el formulario de aplicación.

Una vez que Microsoft otorga acceso, debe crear una implementación para el modelo.

Ejemplos de código

Advertencia

Use la herramienta de uso del equipo en máquinas virtuales sin acceso a datos confidenciales ni a recursos críticos. Para obtener más información sobre los usos, funcionalidades, limitaciones, riesgos y consideraciones previstos al elegir un caso de uso, consulte la nota de transparencia de OpenAI Azure.

Necesita el paquete de SDK más reciente. El SDK de .NET está actualmente en versión preliminar.

Captura de pantalla de la inicialización de la ejecución de la herramienta para el uso del ordenador

Los siguientes extractos muestran cómo crear una versión del agente con la herramienta de uso del equipo, enviar una solicitud inicial con una captura de pantalla y realizar varias iteraciones para completar una tarea. Los fragmentos de Prompt Agents dependen del ejemplo de Python mantenido y del archivo auxiliar enlazado anteriormente. Seleccione Prompt Agents para usar Azure AI Projects SDK y crear un agente de indicaciones del lado del servidor, o Hosted Agents para usar el Agent Framework FoundryChatClient y crear un agente efímero dentro del proceso.

Agentes rápidos

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)

Creación de una versión del agente con la herramienta

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

Iteración de la herramienta para procesar la captura de pantalla y realizar el paso siguiente

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

Realizar varias iteraciones

Asegúrese de revisar cada iteración y acción. En el ejemplo de código siguiente se muestra una solicitud de API básica. Después de enviar la solicitud de API inicial, realice un bucle donde el código de la aplicación lleve a cabo la acción especificada. Envíe una captura de pantalla con cada turno para que el modelo pueda evaluar el estado actualizado del entorno. El ejemplo incluye un número máximo de iteraciones para evitar bucles infinitos, pero puede ajustarlo según sea necesario.


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

Limpieza

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

Salida esperada

En el ejemplo siguiente se muestra la salida esperada al ejecutar el ejemplo de código anterior:

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

Agentes hospedados

Este ejemplo usa FoundryChatClient del Microsoft Agent Framework e invoca get_computer_use_tool() para adjuntar la herramienta de vista previa para el uso del equipo. Instale el paquete con pip install agent-framework-foundry aiohttp, establezca FOUNDRY_PROJECT_ENDPOINT (apunte FOUNDRY_MODEL a una implementación computer-use-preview) e inicie sesión con az login. El bucle captura de pantalla es específico de la aplicación; consulte el archivo auxiliar de ejemplo ascendente al que se hace referencia a continuación.

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

Salida esperada

El agente emite acciones de uso del equipo (clics, pulsaciones de teclas, capturas de pantalla) hasta que se completa la tarea y, a continuación, describe la página a la que alcanzó:

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

Para obtener una implementación completa de bucle de captura de pantalla, consulte los ejemplos del proveedor Foundry.


Ejemplo para el uso de un agente con la herramienta Uso de computadoras

En el ejemplo de código de C# siguiente se muestra cómo crear un agente con la herramienta de uso del equipo, enviar una solicitud inicial con una captura de pantalla y realizar varias iteraciones para completar una tarea. Seleccione Prompt Agents para usar el SDK de proyectos de IA de Azure para crear un agente de mensajes del lado servidor o Agentes hospedados para usar el marco del agente de Microsoft para crear un agente efímero en proceso.

Agentes rápidos

Para permitir que el agente use la herramienta de uso del equipo, use ResponseTool.CreateComputerTool() al configurar las herramientas del agente. En este ejemplo se usa código sincrónico. Para el uso asincrónico, consulte el ejemplo sample code en el SDK de Azure para .NET repositorio en 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);
    }
}

Salida esperada

En el ejemplo siguiente se muestra la salida esperada al ejecutar el ejemplo de código anterior:

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

Agentes hospedados

Este ejemplo utiliza Microsoft Agent Framework y llama a AsAIAgent(...) en AIProjectClient junto con FoundryAITool.CreateComputerTool(...) desde Microsoft.Agents.AI.Foundry para proporcionar al agente la herramienta para usar el equipo. Instale los paquetes Microsoft.Agents.AI.Foundry y Azure.AI.Projects, establezca el AZURE_AI_PROJECT_ENDPOINT y las variables de entorno AZURE_AI_COMPUTER_USE_DEPLOYMENT_NAME e inicie sesión con az login. En este ejemplo se omiten los asistentes de captura de pantalla: consulte el ejemplo completo para las utilidades de recursos y bucles de acción.

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

Salida esperada

Una vez completado el bucle de acción, la respuesta final del agente describe la página a la que alcanzó:

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

Para obtener la implementación completa del asistente de captura de pantalla y el bucle de acción de un extremo a otro, consulte Agent_Step15_ComputerUse.


Ejemplo para el uso de un agente con la herramienta Uso de computadoras

El siguiente fragmento de TypeScript muestra cómo crear una versión del agente con la herramienta de uso del equipo, enviar una solicitud inicial con una captura de pantalla y realizar varias iteraciones. Importa un asistente local computerUseUtil.js y espera recursos de captura de pantalla que no se incluyen en este artículo. Trate el extracto como un esquema de integración y proporcione la ejecución de acciones gestionada por la aplicación, la captura de pantalla y la aprobación explícita de seguridad antes de dar por superadas las comprobaciones de seguridad pendientes.

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

Salida esperada

En el ejemplo siguiente se muestra la salida esperada al ejecutar el ejemplo de código anterior:

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!

Usar el uso del ordenador en un agente Java

Agregue la dependencia a pom.xml:

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

Crear un agente de uso de computadora

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

Para el bucle simulado completo, use el ejemplo de ComputerUseSync.java mantenido con su asistente de ComputerUseUtil.java. El asistente asigna las acciones solicitadas a capturas de pantalla capturadas previamente. Reemplace esa simulación por el ejecutor de acciones de la aplicación, captura de pantalla y flujo de aprobación de seguridad.

Usar el uso del ordenador con la API REST

Obtención de un token de acceso:

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

Creación de un agente con uso de equipo

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
        }
      ]
    }
  }'

Generar una respuesta

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 respuesta incluye computer_call elementos de salida con acciones que se van a ejecutar. Antes de ejecutar una acción, inspeccione pending_safety_checks. Si la matriz no está vacía, detén el proceso y muestra la acción y las comprobaciones de seguridad al usuario final. Continúe solo después de que el usuario apruebe explícitamente la acción.

Enviar resultados de la acción con captura de pantalla

Después de que el usuario apruebe las comprobaciones de seguridad pendientes y la aplicación ejecute la acción del equipo, capture una captura de pantalla y la envíe de vuelta. Incluya cada comprobación aprobada en acknowledged_safety_checks. Si no se devolvió ninguna verificación, use un array vacío.

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>"
        }
      }
    ]
  }'

Reemplace <RESPONSE_ID>, <CALL_ID>y por <BASE64_SCREENSHOT> los valores de la respuesta anterior. Repita este ciclo hasta que el modelo devuelva una respuesta de texto en lugar de .computer_call

Limpieza

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

Lo que puede hacer con la herramienta de uso del ordenador

Una vez integrado el bucle de solicitud y respuesta (captura de pantalla -> acción -> captura de pantalla), la herramienta de uso del ordenador puede ayudar a un agente:

  • Proponer acciones de interfaz de usuario como hacer clic, escribir, desplazarse y solicitar una nueva captura de pantalla.
  • Adaptarse a los cambios de la interfaz de usuario mediante la nueva evaluación de la captura de pantalla más reciente después de cada acción.
  • Trabaje en interfaces de usuario de navegador y escritorio, dependiendo de cómo hospede su entorno de espacio aislado.

La herramienta no controla directamente un dispositivo. La aplicación ejecuta cada acción solicitada y devuelve una captura de pantalla actualizada.

Diferencias entre la automatización del explorador y el uso de equipos

En la tabla siguiente se enumeran algunas de las diferencias entre la herramienta de uso del equipo y la herramienta de automatización del explorador .

Característica Automatización del explorador Herramienta para el uso de computadoras
Soporte de modelos Todos los modelos GPT computer-use-preview modelo solo
¿Puedo visualizar lo que está sucediendo? No
Cómo entiende la pantalla Analiza las páginas HTML o XML en documentos DOM Datos de píxeles sin procesar de capturas de pantalla
Cómo actúa Lista de acciones proporcionadas por el modelo Teclado virtual y mouse
¿Es multipaso?
Interfaces Navegador Ordenador y navegador
¿Necesito traer mi propio recurso? Su propio recurso de Playwright con las claves almacenadas como una conexión. No se requiere ningún recurso adicional, pero ejecute esta herramienta en un entorno de espacio aislado.

Cuándo usar cada herramienta

Elija usar la computadora cuando lo necesite:

  • Interacción con aplicaciones de escritorio más allá del explorador
  • Visualización de lo que ve el agente a través de capturas de pantalla
  • Trabajo en entornos en los que el análisis de DOM no está disponible

Elija la automatización del explorador cuando necesite:

  • Realizar interacciones exclusivamente web sin requisitos de acceso restringido
  • Usar cualquier modelo GPT (no limitado a computer-use-preview)
  • Evitar el manejo de ciclos de captura de pantalla y ejecución de acciones

Soporte regional

Para usar la herramienta de uso de la computadora, necesita una implementación del modelo de uso de la computadora. El modelo de uso del equipo está disponible en las siguientes regiones:

Región Estado
eastus2 Disponible
swedencentral Disponible
southindia Disponible

Descripción de la integración de uso del equipo

Al trabajar con la herramienta de uso del equipo, intégrela en la aplicación mediante los pasos siguientes:

  1. Envíe una solicitud al modelo que incluya una llamada a la herramienta de uso del ordenador, el tamaño de la pantalla y el entorno. También puede incluir una captura de pantalla del estado inicial del entorno en la primera solicitud de API.

  2. Reciba una respuesta del modelo. Si la respuesta tiene elementos de acción, esos elementos contienen acciones sugeridas para avanzar hacia el objetivo especificado. Por ejemplo, una acción podría ser screenshot para que el modelo pueda evaluar el estado actual con una captura de pantalla actualizada o click con coordenadas X/Y que indiquen dónde se debe mover el mouse.

  3. Ejecute la acción mediante el código de la aplicación en el equipo o el entorno del explorador.

  4. Después de ejecutar la acción, capture el estado actualizado del entorno como captura de pantalla.

  5. Envíe una nueva solicitud con el estado actualizado como tool_call_outputy repita este bucle hasta que el modelo deje de solicitar acciones o decida detenerlo.

    Nota

    Antes de usar la herramienta, configure un entorno que pueda capturar capturas de pantalla y ejecutar las acciones recomendadas por el agente. Por motivos de seguridad, use un entorno de espacio aislado, como Playwright.

Administrar el historial de conversaciones

Use el previous_response_id parámetro para vincular la solicitud actual a la respuesta anterior. Use este parámetro cuando no desee enviar el historial de conversaciones completo con cada llamada.

Si no usa este parámetro, asegúrese de incluir todos los elementos devueltos en la salida de respuesta de la solicitud anterior en la matriz de entradas. Este requisito incluye elementos de razonamiento si están presentes.

Consideraciones de seguridad y comprobaciones de seguridad

Advertencia

El uso del equipo conlleva importantes riesgos de seguridad y privacidad y responsabilidad del usuario. Ambos errores de juicio de la inteligencia artificial y la presencia de instrucciones malintencionadas o confusas en páginas web, escritorios u otros entornos operativos que la inteligencia artificial encuentra pueden provocar que ejecute comandos que usted u otros no tenían la intención de ejecutar. Estos riesgos podrían poner en peligro la seguridad de los exploradores, equipos y cuentas de los usuarios u otros usuarios a las que la inteligencia artificial tiene acceso, incluidos los sistemas personales, financieros o empresariales.

Use la herramienta de uso del equipo en máquinas virtuales sin acceso a datos confidenciales ni a recursos críticos. Para obtener más información sobre los usos, funcionalidades, limitaciones, riesgos y consideraciones previstos al elegir un caso de uso, consulte la nota de transparencia de OpenAI Azure.

La API tiene comprobaciones de seguridad para ayudar a protegerse frente a inyecciones de instrucciones y errores de modelo. Estas comprobaciones incluyen:

Detección de instrucciones malintencionadas: el sistema evalúa la imagen de captura de pantalla y comprueba si contiene contenido adversario que podría cambiar el comportamiento del modelo.

Detección de dominio irrelevante: el sistema evalúa el current_url parámetro (si se proporciona) y comprueba si el dominio actual es relevante según el historial de conversaciones.

Detección de dominios confidenciales: el sistema comprueba el current_url parámetro (si se proporciona) y genera una advertencia cuando detecta que el usuario está en un dominio confidencial.

Si se desencadenan una o varias de las comprobaciones anteriores, el modelo genera una comprobación de seguridad cuando devuelve el siguiente computer_call mediante el pending_safety_checks parámetro .

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

Debe volver a pasar las comprobaciones de seguridad como acknowledged_safety_checks en la siguiente solicitud para continuar.

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

Gestión de comprobación de seguridad

En todos los casos en los que se devuelven pending_safety_checks, entregue las acciones al usuario final para confirmar la precisión y el comportamiento adecuados del modelo.

malicious_instructions y irrelevant_domain: los usuarios finales deben revisar las acciones del modelo y confirmar que el modelo se comporta según lo previsto.

sensitive_domain: asegúrese de que un usuario final supervisa activamente las acciones del modelo en estos sitios. La implementación exacta de este "modo de inspección" puede variar según la aplicación, pero un posible ejemplo podría recopilar datos de impresión de usuario en el sitio para asegurarse de que hay una interacción activa del usuario final con la aplicación.

Solución de problemas

Problema Causa Resolución
No ves un computer_call en la respuesta. El agente no está configurado con la herramienta de uso del equipo, la implementación no es un modelo de uso de equipo o la solicitud no requiere interacción de la interfaz de usuario. Confirme que el agente tiene la herramienta computer_use_preview, su implementación es el modelo computer-use-preview y la solicitud requiere una acción de interfaz de usuario (escribir, hacer clic o capturar pantalla).
El código de ejemplo falla por la falta de archivos auxiliares o documentación visual. Los extractos hacen referencia a utilidades auxiliares y imágenes de ejemplo que no forman parte de este repositorio de documentación. Clona uno de los ejemplos mantenidos de la sección Ejecutar los ejemplos mantenidos del SDK para que su ayudante y sus recursos permanezcan en sus ubicaciones relativas previstas. Para TypeScript, proporcione su propio asistente y recursos de captura de pantalla.
El bucle se detiene en el límite de iteración. La tarea necesita más turnos o la aplicación no aplica las acciones que solicita el modelo. Aumente el límite de iteración y compruebe que el código ejecuta la acción solicitada y envía una nueva captura de pantalla después de cada turno.
Recibirá pending_safety_checks. El servicio detectó un riesgo de seguridad potencial (por ejemplo, inyección de mensajes o un dominio confidencial). Pausar la automatización, requerir que un usuario final revise la solicitud y solo continúe después de enviar acknowledged_safety_checks con el siguiente computer_call_output.
El modelo repite "tomar una captura de pantalla" sin avanzar. La captura de pantalla no se actualiza, es de baja calidad o no muestra el estado de la interfaz de usuario pertinente. Envíe una captura de pantalla nueva después de cada acción y use una imagen de mayor detalle cuando sea necesario. Asegúrese de que la captura de pantalla incluye la interfaz de usuario pertinente.
Acceso denegado al solicitar el computer-use-preview modelo. No te has registrado para tener acceso o no se te ha concedido acceso. Envíe el formulario de solicitud y espere la aprobación. Compruebe su correo electrónico para obtener confirmación.
Captura de pantalla de errores de codificación. Formato de imagen no compatible o problema de codificación base64. Use el formato PNG o JPEG. Asegúrese de una codificación base64 adecuada sin corrupción. Compruebe que las dimensiones de la imagen coinciden display_width con y display_height.
Las acciones se ejecutan en coordenadas incorrectas. La resolución de pantalla no coincide entre la captura de pantalla y la pantalla real. Asegúrese de que display_width y display_height en ComputerUsePreviewTool coincidan con la resolución de pantalla real.
El modelo alucina los elementos de la interfaz de usuario. La calidad de la captura de pantalla es demasiado baja o la interfaz de usuario ha cambiado entre turnos. Use capturas de pantalla de mayor resolución. Enviar capturas de pantalla nuevas inmediatamente después de cada acción. Reduzca el retraso entre la acción y la captura de pantalla.