Add Anthropic API Support to Magentic-UI

[martinwangjian]

Feature request

Add support for Anthropic's Claude models to Magentic-UI, enabling users to configure and use Claude alongside existing OpenAI, Azure, and Ollama providers.

Motivation

Anthropic's Claude models offer competitive performance and unique capabilities. Adding Claude support would:

• Provide users with more model provider options
• Enable access to Claude's advanced reasoning capabilities
• Support Claude 4 Sonnet and other latest models
• Allow mixed provider configurations (e.g., Claude for orchestration, GPT for coding)

[matheusmaldaner]

Hi @martinwangjian, apologies for the late reply. While there is currently no UI support to Anthropic models, I got it to work with the following steps. I know you have a pending PR awaiting for changes, so I am outlining the steps primarily for others that may have the same question:

0. Install the anthropic package with uv pip install anthropic (or using your respective package manager)

1. Create (or update) your config.yaml file for the Anthropic model you want to use. Below is an example using Claude 3.5 Haiku ("claude-3-5-haiku-20241022")

model_config_claude: &client_claude
    provider: autogen_ext.models.anthropic.AnthropicChatCompletionClient
    config:
      model: claude-3-5-haiku-20241022
      api_key: "sk-YOURAPIKEY"
      model_info:
        vendor: anthropic
        family: claude-3-5-sonnet
        api: chat_completions
        vision: true
        function_calling: true
        json_output: true
        structured_output: true
    max_retries: 5

orchestrator_client: *client_claude
coder_client: *client_claude
web_surfer_client: *client_claude
file_surfer_client: *client_claude
action_guard_client: *client_claude
user_proxy_client: *client_claude
model_client: *client_claude

2. In the config.yaml above, make sure to replace "sk-YOURAPIKEY" with your Anthropic API key. You can get your key at https://console.anthropic.com/settings/keys. You can enter the key with or without quotes. E.g. both api_key: "sk-YOURAPIKEY" and api_key: sk-YOURAPIKEY should work, though using quotes is typically preferred.

3. Run magentic-ui as usual: magentic-ui --port 8081 --config config.yaml

Extra: If you would like to test a different model, you can replace the model field with one of the other available models (make sure to copy the name exactly): https://docs.claude.com/en/docs/about-claude/models/overview