feat: Add Claude Haiku 4.5 model support across all demos (#299)

* feat: add Claude Haiku 4.5 model support across all demos

- Add HAIKU_4_5 model configuration to Computer Use Demo
- Add provider-specific model strings for Bedrock and Vertex
- Update model dropdowns in Customer Support and Financial Data Analyst
- Set Claude Haiku 4.5 as default in Customer Support Agent
- Document available models in Agents module
- Update README with Claude 4.5 Haiku availability

Model IDs:
- Anthropic API: claude-haiku-4-5-20251001
- AWS Bedrock: anthropic.claude-haiku-4-5-20251001-v1:0
- Google Vertex: claude-haiku-4-5@20251001

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* docs: update Claude model naming conventions in README

Update model naming to follow proper conventions:
- Claude 4+ models: Claude [model] [version] (e.g., Claude Sonnet 4.5)
- Pre-4 models: Claude [version] [model] (e.g., Claude 3.5 Sonnet)

This ensures consistency with Anthropic's official naming standards.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

---------

Co-authored-by: Claude <[email protected]>

Author: zealoushacker

agents/agent.py

@@ -18,6 +18,12 @@
 class ModelConfig:
     """Configuration settings for Claude model parameters."""
 
+    # Available models include:
+    # - claude-sonnet-4-20250514 (default)
+    # - claude-opus-4-20250514
+    # - claude-haiku-4-5-20251001
+    # - claude-3-5-sonnet-20240620
+    # - claude-3-haiku-20240307
     model: str = "claude-sonnet-4-20250514"
     max_tokens: int = 4096
     temperature: float = 1.0

computer-use-demo/README.md

@@ -1,7 +1,7 @@
 # Anthropic Computer Use Demo
 
 > [!NOTE]
-> Now featuring support for the new Claude 4 models! The latest Claude 4.5 Sonnet (claude-sonnet-4-5-20250929) is now the default model, with Claude 4 Sonnet (claude-sonnet-4-20250514) and Claude 4 Opus (claude-opus-4-20250514) also available. These models bring next-generation capabilities with the updated str_replace_based_edit_tool that replaces the previous str_replace_editor tool. The undo_edit command has been removed in this latest version for a more streamlined experience.
+> Now featuring support for the new Claude 4 models! The latest Claude Sonnet 4.5 (claude-sonnet-4-5-20250929) is now the default model, with Claude Sonnet 4 (claude-sonnet-4-20250514), Claude Opus 4 (claude-opus-4-20250514), and the new Claude Haiku 4.5 (claude-haiku-4-5-20251001) also available. These models bring next-generation capabilities with the updated str_replace_based_edit_tool that replaces the previous str_replace_editor tool. The undo_edit command has been removed in this latest version for a more streamlined experience.
 
 > [!CAUTION]
 > Computer use is a beta feature. Please be aware that computer use poses unique risks that are distinct from standard API features or chat interfaces. These risks are heightened when using computer use to interact with the internet. To minimize risks, consider taking precautions such as:
@@ -18,7 +18,7 @@
 This repository helps you get started with computer use on Claude, with reference implementations of:
 
 - Build files to create a Docker container with all necessary dependencies
-- A computer use agent loop using the Claude API, Bedrock, or Vertex to access Claude 3.5 Sonnet, Claude 3.7 Sonnet, Claude 4 Sonnet, and Claude 4 Opus models
+- A computer use agent loop using the Claude API, Bedrock, or Vertex to access Claude 3.5 Sonnet, Claude 3.7 Sonnet, Claude Sonnet 4, Claude Opus 4, and Claude Haiku 4.5 models
 - Anthropic-defined computer use tools
 - A streamlit app for interacting with the agent loop
 

computer-use-demo/computer_use_demo/streamlit.py

@@ -73,12 +73,22 @@ class ModelConfig:
     has_thinking=True,
 )
 
+HAIKU_4_5 = ModelConfig(
+    tool_version="computer_use_20250124",
+    max_output_tokens=1024 * 8,
+    default_output_tokens=1024 * 4,
+    has_thinking=False,
+)
+
 MODEL_TO_MODEL_CONF: dict[str, ModelConfig] = {
     "claude-3-7-sonnet-20250219": SONNET_3_7,
     "claude-opus-4@20250508": CLAUDE_4,
     "claude-sonnet-4-20250514": CLAUDE_4,
     "claude-sonnet-4-5-20250929": CLAUDE_4_5,
     "claude-opus-4-20250514": CLAUDE_4,
+    "claude-haiku-4-5-20251001": HAIKU_4_5,
+    "anthropic.claude-haiku-4-5-20251001-v1:0": HAIKU_4_5,  # Bedrock
+    "claude-haiku-4-5@20251001": HAIKU_4_5,  # Vertex
 }
 
 CONFIG_DIR = PosixPath("~/.anthropic").expanduser()

customer-support-agent/components/ChatArea.tsx

@@ -302,7 +302,7 @@ function ChatArea() {
   const [input, setInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [showHeader, setShowHeader] = useState(false);
-  const [selectedModel, setSelectedModel] = useState("claude-3-haiku-20240307");
+  const [selectedModel, setSelectedModel] = useState("claude-haiku-4-5-20251001");
   const [showAvatar, setShowAvatar] = useState(false);
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -317,6 +317,7 @@ function ChatArea() {
 
   const models: Model[] = [
     { id: "claude-3-haiku-20240307", name: "Claude 3 Haiku" },
+    { id: "claude-haiku-4-5-20251001", name: "Claude 4.5 Haiku" },
     { id: "claude-3-5-sonnet-20240620", name: "Claude 3.5 Sonnet" },
   ];
 

financial-data-analyst/app/finance/page.tsx

@@ -71,6 +71,7 @@ interface FileUpload {
 
 const models: Model[] = [
   { id: "claude-3-haiku-20240307", name: "Claude 3 Haiku" },
+  { id: "claude-haiku-4-5-20251001", name: "Claude 4.5 Haiku" },
   { id: "claude-3-5-sonnet-20240620", name: "Claude 3.5 Sonnet" },
 ];