### Customer Support Agent - Setup & Development

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/CLAUDE.md

Commands for installing dependencies, running the development server, and building the Customer Support Agent application. Supports different UI variants.

```npm
npm install
```

```npm
npm run dev
```

```npm
npm run dev:left
```

```npm
npm run dev:right
```

```npm
npm run dev:chat
```

```npm
npm run lint
```

```npm
npm run build
```

--------------------------------

### Setup Computer-Use Demo

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/CLAUDE.md

Commands for setting up the environment, building the Docker image, and running the container for the Computer-Use Demo. Requires ANTHROPIC_API_KEY environment variable.

```shell
./setup.sh
```

```docker
docker build . -t computer-use-demo:local
```

```shell
docker run -e ANTHROPIC_API_KEY=$ANTHROPIC_API_KEY -v $(pwd)/computer_use_demo:/home/computeruse/computer_use_demo/ -v $HOME/.anthropic:/home/computeruse/.anthropic -p 5900:5900 -p 8501:8501 -p 6080:6080 -p 8080:8080 -it computer-use-demo:local
```

--------------------------------

### Install Dependencies and Run Server (Bash)

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/customer-support-agent/README.md

Provides the basic commands to clone the repository, install project dependencies using npm, and start the development server. Assumes Node.js and npm are installed.

```bash
# Clone this repository
# git clone <repository_url>

# Install dependencies
npm install

# Run the development server
npm run dev
```

--------------------------------

### Setup and Run Financial Data Analyst (Shell)

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/CLAUDE.md

Commands to install dependencies and run the development server for the Financial Data Analyst quickstart. Requires Node.js and npm.

```shell
npm install
```

```shell
npm run dev
```

--------------------------------

### Financial Data Analyst - Setup & Development

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/CLAUDE.md

Commands for installing dependencies, running the development server, and building the Financial Data Analyst application. Uses npm for package management.

```npm
npm install
```

```npm
npm run dev
```

```npm
npm run lint
```

```npm
npm run build
```

--------------------------------

### Setup and Import Libraries

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/agents/agent_demo.ipynb

Imports necessary libraries like os, sys, and nest_asyncio for asynchronous operations. Sets up the parent directory for module imports.

```Python
import os
import sys
import nest_asyncio
nest_asyncio.apply()

parent_dir = os.path.dirname(os.getcwd())
sys.path.insert(0, parent_dir)
from agents.agent import Agent, ModelConfig
from agents.tools.think import ThinkTool
from agents.tools.web_search import WebSearchServerTool
from agents.tools.code_execution import CodeExecutionServerTool
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/financial-data-analyst/README.md

Installs all necessary Node.js packages required for the Next.js application to run. This command should be executed after cloning the repository.

```bash
npm install
```

--------------------------------

### Development Setup and Docker Run

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/computer-use-demo/README.md

This section provides commands for setting up the development environment, including installing dependencies and pre-commit hooks, building the Docker image locally, and running the container with a mounted local module for live code editing.

```bash
./setup.sh  # configure venv, install development dependencies, and install pre-commit hooks
docker build . -t computer-use-demo:local  # manually build the docker image (optional)
export ANTHROPIC_API_KEY=%your_api_key%
docker run \
    -e ANTHROPIC_API_KEY=$ANTHROPIC_API_KEY \
    -v $(pwd)/computer_use_demo:/home/computeruse/computer_use_demo/ `# mount local python module for development` \
    -v $HOME/.anthropic:/home/computeruse/.anthropic \
    -p 5900:5900 \
    -p 8501:8501 \
    -p 6080:6080 \
    -p 8080:8080 \
    -it computer-use-demo:local  # can also use ghcr.io/anthropics/anthropic-quickstarts:computer-use-demo-latest
```

--------------------------------

### Run Development Server

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/financial-data-analyst/README.md

Starts the Next.js development server, allowing you to view and interact with the application locally. The application will typically be accessible at http://localhost:3000.

```bash
npm run dev
```

--------------------------------

### Clone and Navigate Repository

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/financial-data-analyst/README.md

Clones the project repository from GitHub and navigates into the specific application directory. This is the first step to set up the project locally.

```bash
git clone https://github.com/anthropics/anthropic-quickstarts.git
cd anthropic-quickstarts/financial-data-analyst
```

--------------------------------

### Install Development Dependencies (Bash)

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/computer-use-demo/CONTRIBUTING.md

Installs all necessary development dependencies for the project using pip. This command reads the list of packages from the 'dev-requirements.txt' file.

```Bash
pip install -r dev-requirements.txt
```

--------------------------------

### Lint and Build Financial Data Analyst (Shell)

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/CLAUDE.md

Commands to run linting checks and build the production version of the Financial Data Analyst quickstart. Requires Node.js and npm.

```shell
npm run lint
```

```shell
npm run build
```

--------------------------------

### Setup Python Virtual Environment (Python/Bash)

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/computer-use-demo/CONTRIBUTING.md

Creates and activates a Python virtual environment for isolating project dependencies. This is a standard practice for Python development to manage project-specific packages.

```Bash
python -m venv .venv
source .venv/bin/activate  # On Unix
# or
.venv\Scripts\activate  # On Windows
```

--------------------------------

### Test & Quality Computer-Use Demo

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/CLAUDE.md

Commands for linting, formatting, type checking, and running tests for the Computer-Use Demo project. Utilizes ruff for linting/formatting and pyright for type checking.

```shell
ruff check .
```

```shell
ruff format .
```

```shell
pyright
```

```shell
pytest
```

```shell
pytest tests/path_to_test.py::test_name -v
```

--------------------------------

### Install Pre-commit Hooks (Bash)

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/computer-use-demo/CONTRIBUTING.md

Installs pre-commit hooks to automate code quality checks before each commit. This ensures adherence to coding standards and catches potential issues early.

```Bash
pre-commit install
```

--------------------------------

### Python Project Dependencies

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/computer-use-demo/computer_use_demo/requirements.txt

This snippet details the Python package dependencies for the project, including specific version requirements. These packages are crucial for setting up the development environment and running the quickstart examples.

```python
streamlit==1.41.0
anthropic[bedrock,vertex]>=0.39.0
jsonschema==4.22.0
boto3>=1.28.57
google-auth<3,>=2
```

--------------------------------

### Initialize Agent with MCP Servers

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/agents/agent_demo.ipynb

Initializes an Agent instance with a system prompt, standard tools, and the configured MCP servers. It specifies the model configuration including the model name, max tokens, and temperature.

```Python
# Create agent config 
system_prompt = """
You are a helpful assistant with access to:
1. Web search (brave_web_search, brave_local_search)
2. Mathematical calculator (calculate) 
3. A tool to think and reason (think)

Always use the most appropriate tool for each task.
"""


# Initialize agent with standard tools and MCP servers
agent = Agent(
    name="Multi-Tool Agent",
    system=system_prompt,
    tools=[think_tool], 
    mcp_servers=[brave_search_server, calculator_server], 
    config=ModelConfig(
        model="claude-3-7-sonnet-20250219", 
        max_tokens=4096,
        temperature=1.0
    ),
    verbose=True
)
```

--------------------------------

### Listing NPM Scripts for Configuration

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/customer-support-agent/README.md

This snippet lists the available NPM scripts in the package.json file. These scripts are used to run or build the application with different sidebar configurations (full, left, right, or none/chat only) by setting environment variables.

```bash
npm run dev: Runs the full app with both sidebars (default)
npm run build: Builds the full app with both sidebars (default)
npm run dev:full: Same as npm run dev
npm run dev:left: Runs the app with only the left sidebar
npm run dev:right: Runs the app with only the right sidebar
npm run dev:chat: Runs the app with just the chat area (no sidebars)
npm run build:full: Same as npm run build
npm run build:left: Builds the app with only the left sidebar
npm run build:right: Builds the app with only the right sidebar
npm run build:chat: Builds the app with just the chat area (no sidebars)
```

--------------------------------

### Configure Bedrock Knowledge Bases (TypeScript)

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/customer-support-agent/README.md

Integrates Amazon Bedrock Retrieval-Augmented Generation (RAG) by specifying knowledge base IDs in `ChatArea.tsx`. This enables contextual knowledge retrieval for the Claude model. Requires prior setup of AWS Bedrock knowledge bases.

```typescript
const knowledgeBases: KnowledgeBase[] = [
  { id: "your-knowledge-base-id", name: "Your KB Name" },
  // Add more knowledge bases as needed
];
```

--------------------------------

### Initialize Agent with Anthropic Server Tools

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/agents/agent_demo.ipynb

Initializes an Agent with Anthropic's native server tools, specifically WebSearchServerTool and CodeExecutionServerTool. It configures tool parameters like max_uses and blocked_domains for web search.

```Python
# Create Anthropic server tools
web_search_tool = WebSearchServerTool(
    name="web_search",
    max_uses=5,  # Limit to 5 searches per request
    blocked_domains=["example.com"]  # Example of blocking specific domains
)

code_execution_tool = CodeExecutionServerTool()

# Initialize agent with server tools
server_agent = Agent(
    name="Server Tools Agent",
    system="""
You are a helpful assistant with access to:
1. Web search for finding current information
2. Code execution for running Python code
3. Think tool for complex reasoning

Use these tools effectively to answer questions that require current data or calculations.
""",
    tools=[think_tool, web_search_tool, code_execution_tool],
    config=ModelConfig(
        model="claude-sonnet-4-20250514",
        max_tokens=4096,
        temperature=0.7
    ),
    verbose=True
)
```

--------------------------------

### Set Up Environment Variables (.env.local)

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/customer-support-agent/README.md

Defines essential environment variables for the Claude Customer Support Agent. Requires Anthropic API key and AWS credentials for Bedrock integration. These variables are loaded from a `.env.local` file in the project root.

```env
ANTHROPIC_API_KEY=your_anthropic_api_key
BAWS_ACCESS_KEY_ID=your_aws_access_key
BAWS_SECRET_ACCESS_KEY=your_aws_secret_key
```

--------------------------------

### Run Agent Query (Synchronous)

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/agents/agent_demo.ipynb

Executes a query using the initialized agent synchronously. The agent will use its configured tools to process the request.

```Python
# Example query
agent.run("What's the square root of the OKC population in 2022")
```

--------------------------------

### Run Docker with Google Vertex AI Credentials

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/computer-use-demo/README.md

This example shows how to build the demo application locally and run it using Google Cloud credentials for the Vertex AI provider. It includes authenticating with gcloud and mounting the application default credentials file.

```bash
docker build . -t computer-use-demo
gcloud auth application-default login
export VERTEX_REGION=%your_vertex_region%
export VERTEX_PROJECT_ID=%your_vertex_project_id%
docker run \
    -e API_PROVIDER=vertex \
    -e CLOUD_ML_REGION=$VERTEX_REGION \
    -e ANTHROPIC_VERTEX_PROJECT_ID=$VERTEX_PROJECT_ID \
    -v $HOME/.config/gcloud/application_default_credentials.json:/home/computeruse/.config/gcloud/application_default_credentials.json \
    -p 5900:5900 \
    -p 8501:8501 \
    -p 6080:6080 \
    -p 8080:8080 \
    -it computer-use-demo
```

--------------------------------

### Run Agent Query (Asynchronous)

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/agents/agent_demo.ipynb

Executes a query using the initialized agent asynchronously. This allows for non-blocking operations, suitable for concurrent tasks.

```Python
await agent.run_async("How many bananas will fit in an Toyota GR86?")
```

--------------------------------

### Configure Environment Variables

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/financial-data-analyst/README.md

Creates and configures the local environment file (`.env.local`) to store sensitive information, such as the Anthropic API key. This key is essential for authenticating with the Claude API.

```env
ANTHROPIC_API_KEY=your_api_key_here
```

--------------------------------

### Initialize and Run Anthropic Agent

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/agents/README.md

Example of initializing an Anthropic agent with custom tools and MCP servers, then executing a task. This code interacts with the Anthropic API and requires the `anthropic` and `mcp` libraries, with the Anthropic API key set as an environment variable.

```python
from agents.agent import Agent
from agents.tools.think import ThinkTool

# Create an agent with both local tools and MCP server tools
agent = Agent(
    name="MyAgent",
    system="You are a helpful assistant.",
    tools=[ThinkTool()],  # Local tools
    mcp_servers=[
        {
            "type": "stdio",
            "command": "python",
            "args": ["-m", "mcp_server"],
        },
    ]
)

# Run the agent
response = agent.run("What should I consider when buying a new laptop?")
```

--------------------------------

### Computer Use Demo Styles (CSS)

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/computer-use-demo/image/static_content/index.html

Applies basic CSS styling for a computer use demo. It sets up a full-viewport layout using flexbox to create a two-column structure for the main content area.

```css
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.container {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.left {
  flex: 1;
  border: none;
  height: 100vh;
}

.right {
  flex: 2;
  border: none;
  height: 100vh;
}
```

--------------------------------

### NPM Scripts for Development and Build Configurations

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/customer-support-agent/README.md

This section details the NPM scripts provided in the project's package.json. These scripts allow developers to run or build the application with specific configurations, such as including only the left sidebar, only the right sidebar, or just the chat area. They set environment variables to manage these configurations.

```bash
npm run dev: Runs the full app with both sidebars (default)
npm run build: Builds the full app with both sidebars (default)
npm run dev:full: Same as npm run dev
npm run dev:left: Runs the app with only the left sidebar
npm run dev:right: Runs the app with only the right sidebar
npm run dev:chat: Runs the app with just the chat area (no sidebars)
npm run build:full: Same as npm run build
npm run build:left: Builds the app with only the left sidebar
npm run build:right: Builds the app with only the right sidebar
npm run build:chat: Builds the app with just the chat area (no sidebars)
```

--------------------------------

### Run Agent Query with Server Tools

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/agents/agent_demo.ipynb

Executes a query that requires both web search and code execution. The agent first searches for current information (Tokyo population) and then executes Python code to perform calculations based on the retrieved data.

```Python
# Example 1: Use web search to find current information and code execution for analysis
server_agent.run("""
Search for the current population of Tokyo, Japan. 
Then write and execute Python code to calculate how many people that would be per square kilometer, 
given that Tokyo's area is approximately 2,194 square kilometers.
""")
```

--------------------------------

### Configure MCP Servers

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/agents/agent_demo.ipynb

Configures local and remote MCP (Model Context Protocol) servers for tools like a calculator and Brave Search. It checks for the availability of the Brave API key and sets up environment variables for the Brave search server.

```Python
# Standard Python tool
think_tool = ThinkTool()

# Python MCP server
calculator_server_path = os.path.abspath(os.path.join(os.getcwd(), "tools/calculator_mcp.py"))
calculator_server = {
    "type": "stdio",
    "command": "python",
    "args": [calculator_server_path]
}
print(f"Calculator server configured: {'Yes' if calculator_server else 'No'}")


# Brave MCP server written in TypeScript

brave_api_key = os.environ.get("BRAVE_API_KEY_BASE_DATA", "")
print(f"Brave API key available: {'Yes' if brave_api_key else 'No'}")
brave_search_server = {
    "type": "stdio",
    "command": "npx",
    "args": ["-y", "@modelcontextprotocol/server-brave-search"],
    "env": {
        "BRAVE_API_KEY": brave_api_key, 
        "PATH": f"{os.path.dirname('npx')}:" + os.environ.get("PATH", "")
    }
}
print(f"Brave search server configured: {'Yes' if brave_search_server else 'No'}")
```

--------------------------------

### AWS Amplify Deployment Configuration

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/customer-support-agent/README.md

This YAML configuration is used for deploying the application with AWS Amplify. It specifies build commands, environment variables, and artifact locations, ensuring the Next.js application is built and deployed correctly with necessary API keys.

```yaml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci --cache .npm --prefer-offline
    build:
      commands:
        - npm run build # Next.js build runs first
        - echo "ANTHROPIC_API_KEY=$ANTHROPIC_API_KEY" >> .env
        - echo "KNOWLEDGE_BASE_ID=$KNOWLEDGE_BASE_ID" >> .env
        - echo "BAWS_ACCESS_KEY_ID=$BAWS_ACCESS_KEY_ID" >> .env
        - echo "BAWS_SECRET_ACCESS_KEY=$BAWS_SECRET_ACCESS_KEY" >> .env
  artifacts:
    baseDirectory: .next
    files:
      - "**/*"
  cache:
    paths:
      - .next/cache/**/*
      - .npm/**/*
```

--------------------------------

### Define Available Claude Models

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/customer-support-agent/README.md

This snippet shows how to define the list of available Claude models in the application. It specifies the unique ID and display name for each model, allowing for easy selection and switching.

```typescript
const models: Model[] = [
  { id: "claude-3-haiku-20240307", name: "Claude 3 Haiku" },
  { id: "claude-3-5-sonnet-20240620", name: "Claude 3.5 Sonnet" },
  // Add more models as needed
];
```

--------------------------------

### Toggle Screen Control (JavaScript)

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/computer-use-demo/image/static_content/index.html

JavaScript function to toggle screen control for a VNC viewer. It modifies the `src` attribute of an iframe element to switch between 'view_only=0' and 'view_only=1' modes and updates button text accordingly.

```javascript
document.getElementById("toggleViewOnly").addEventListener("click", function () {
  var vncIframe = document.getElementById("vnc");
  var button = document.getElementById("toggleViewOnly");
  var currentSrc = vncIframe.src;

  if (currentSrc.includes("view_only=1")) {
    vncIframe.src = currentSrc.replace("view_only=1", "view_only=0");
    button.innerText = "Toggle Screen Control (On)";
  } else {
    vncIframe.src = currentSrc.replace("view_only=0", "view_only=1");
    button.innerText = "Toggle Screen Control (Off)";
  }
});
```

--------------------------------

### Configure Sidebar Inclusion

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/customer-support-agent/README.md

This TypeScript snippet defines a configuration object that controls the inclusion of left and right sidebars based on environment variables. It allows developers to dynamically enable or disable these UI components during development or deployment.

```typescript
type Config = {
  includeLeftSidebar: boolean;
  includeRightSidebar: boolean;
};

const config: Config = {
  includeLeftSidebar: process.env.NEXT_PUBLIC_INCLUDE_LEFT_SIDEBAR === "true",
  includeRightSidebar: process.env.NEXT_PUBLIC_INCLUDE_RIGHT_SIDEBAR === "true",
};

export default config;
```

--------------------------------

### Customize Theme Styles

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/customer-support-agent/README.md

This JavaScript snippet defines theme configurations for the application, allowing customization of light and dark mode colors for different themes. Developers can add new themes or modify existing ones by adjusting color values.

```javascript
// styles/themes.js
export const themes = {
  neutral: {
    light: {
      // Light mode colors for neutral theme
    },
    dark: {
      // Dark mode colors for neutral theme
    }
  },
  // Add more themes here
};
```

--------------------------------

### Manage Selected Claude Model State

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/customer-support-agent/README.md

This snippet demonstrates how to manage the state of the currently selected Claude model using React's useState hook. It initializes the selected model and provides a way to update it, typically driven by UI interactions.

```typescript
const [selectedModel, setSelectedModel] = useState("claude-3-haiku-20240307");
```

--------------------------------

### Run Tests with Pytest (Bash)

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/computer-use-demo/CONTRIBUTING.md

Executes the project's test suite using pytest. This command ensures that new code does not break existing functionality and that new features are properly tested.

```Bash
pytest
```

--------------------------------

### Tool Development Methods (Python)

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/computer-use-demo/CONTRIBUTING.md

Details the required methods for developing new tools within the project. Tools must inherit from `BaseAnthropicTool` and implement `__call__` for execution and `to_params` for serialization.

```Python
class MyTool(BaseAnthropicTool):
    def __call__(self, ...):
        # Tool execution logic
        pass

    def to_params(self):
        # Serialization logic
        pass

```

--------------------------------

### Sign Commits (Git/Bash)

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/computer-use-demo/CONTRIBUTING.md

Ensures that all Git commits are signed using GPG. This is a security measure to verify the author of the commit and is a mandatory guideline for contributions.

```Bash
git commit -S
```

--------------------------------

### Lint and Format Code with Ruff (Bash)

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/computer-use-demo/CONTRIBUTING.md

Utilizes Ruff, a fast Python linter and formatter, to check code for style violations and automatically format it. This command enforces the project's coding standards.

```Bash
ruff check .
ruff format .
```

--------------------------------

### Run Docker with AWS Bedrock Credentials

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/computer-use-demo/README.md

This snippet demonstrates how to set AWS access keys and run the Anthropic demo container using the Bedrock API provider. It configures necessary environment variables for authentication and specifies the Docker image.

```bash
export AWS_ACCESS_KEY_ID=%your_aws_access_key%
export AWS_SECRET_ACCESS_KEY=%your_aws_secret_access_key%
export AWS_SESSION_TOKEN=%your_aws_session_token%
docker run \
    -e API_PROVIDER=bedrock \
    -e AWS_ACCESS_KEY_ID=$AWS_ACCESS_KEY_ID \
    -e AWS_SECRET_ACCESS_KEY=$AWS_SECRET_ACCESS_KEY \
    -e AWS_SESSION_TOKEN=$AWS_SESSION_TOKEN \
    -e AWS_REGION=us-west-2 \
    -v $HOME/.anthropic:/home/computeruse/.anthropic \
    -p 5900:5900 \
    -p 8501:8501 \
    -p 6080:6080 \
    -p 8080:8080 \
    -it ghcr.io/anthropics/anthropic-quickstarts:computer-use-demo-latest
```

--------------------------------

### Run Docker Container with Anthropic API

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/computer-use-demo/README.md

This snippet demonstrates how to run the computer use demo Docker container using the Anthropic API. It requires setting the ANTHROPIC_API_KEY environment variable and maps local directories for persistent data. Ports are exposed for accessing the demo interface.

```bash
export ANTHROPIC_API_KEY=%your_api_key%
docker run \
    -e ANTHROPIC_API_KEY=$ANTHROPIC_API_KEY \
    -v $HOME/.anthropic:/home/computeruse/.anthropic \
    -p 5900:5900 \
    -p 8501:8501 \
    -p 6080:6080 \
    -p 8080:8080 \
    -it ghcr.io/anthropics/anthropic-quickstarts:computer-use-demo-latest
```

--------------------------------

### Configure Screen Size for Docker Container

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/computer-use-demo/README.md

This snippet illustrates how to set environment variables WIDTH and HEIGHT when running the Docker container to control the screen resolution. It also shows mounting the .anthropic directory for persistent settings.

```bash
docker run \
    -e ANTHROPIC_API_KEY=$ANTHROPIC_API_KEY \
    -v $HOME/.anthropic:/home/computeruse/.anthropic \
    -p 5900:5900 \
    -p 8501:8501 \
    -p 6080:6080 \
    -p 8080:8080 \
    -e WIDTH=1920 \
    -e HEIGHT=1080 \
    -it ghcr.io/anthropics/anthropic-quickstarts:computer-use-demo-latest
```

--------------------------------

### Run Docker Container with Bedrock API

Source: https://github.com/anthropics/anthropic-quickstarts/blob/main/computer-use-demo/README.md

This snippet shows how to run the computer use demo Docker container configured for AWS Bedrock. It requires setting the API_PROVIDER to 'bedrock', specifying the AWS_PROFILE and AWS_REGION, and mounting the AWS credentials file. Ports are exposed for accessing the demo interface.

```bash
export AWS_PROFILE=<your_aws_profile>
docker run \
    -e API_PROVIDER=bedrock \
    -e AWS_PROFILE=$AWS_PROFILE \
    -e AWS_REGION=us-west-2 \
    -v $HOME/.aws:/home/computeruse/.aws \
    -v $HOME/.anthropic:/home/computeruse/.anthropic \
    -p 5900:5900 \
    -p 8501:8501 \
    -p 6080:6080 \
    -p 8080:8080 \
    -it ghcr.io/anthropics/anthropic-quickstarts:computer-use-demo-latest
```