Connector Implementation & Inheritance: Anthropic Claude

.github/workflows/azure-dev.yml

@@ -31,6 +31,7 @@ jobs:
       AZURE_ENV_NAME: ${{ vars.AZURE_ENV_NAME }}
       AZURE_LOCATION: ${{ vars.AZURE_LOCATION }}
       GH_MODELS_TOKEN: ${{ secrets.GH_MODELS_TOKEN }}
+      ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
       OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
 
     steps:
@@ -133,6 +134,7 @@ jobs:
       shell: bash
       env:
         GitHubModels__Token: ${{ env.GH_MODELS_TOKEN }}
+        Anthropic__ApiKey: ${{ env.ANTHROPIC_API_KEY }}
         OpenAI__ApiKey: ${{ env.OPENAI_API_KEY }}
       run: |
         azd provision --no-prompt

README.md

@@ -14,7 +14,7 @@ Open Chat Playground (OCP) is a web UI that is able to connect virtually any LLM
 - [ ] [Foundry Local](https://learn.microsoft.com/azure/ai-foundry/foundry-local/what-is-foundry-local)
 - [x] [Hugging Face](https://huggingface.co/docs)
 - [ ] [Ollama](https://github.com/ollama/ollama/tree/main/docs)
-- [ ] [Anthropic](https://docs.anthropic.com)
+- [x] [Anthropic](https://docs.anthropic.com)
 - [ ] [Naver](https://api.ncloud-docs.com/docs/ai-naver-clovastudio-summary)
 - [x] [LG](https://github.com/LG-AI-EXAONE)
 - [x] [OpenAI](https://openai.com/api)
@@ -63,6 +63,7 @@ Open Chat Playground (OCP) is a web UI that is able to connect virtually any LLM
 - [Use Azure AI Foundry](./docs/azure-ai-foundry.md#run-on-local-machine)
 - [Use GitHub Models](./docs/github-models.md#run-on-local-machine)
 - [Use Hugging Face](./docs/hugging-face.md#run-on-local-machine)
+- [Use Anthropic](./docs/anthropic.md#run-on-local-machine)
 - [Use LG](./docs/lg.md#run-on-local-machine)
 - [Use OpenAI](./docs/openai.md#run-on-local-machine)
 - [Use Upstage](./docs/upstage.md#run-on-local-machine)
@@ -72,6 +73,7 @@ Open Chat Playground (OCP) is a web UI that is able to connect virtually any LLM
 - [Use Azure AI Foundry](./docs/azure-ai-foundry.md#run-in-local-container)
 - [Use GitHub Models](./docs/github-models.md#run-in-local-container)
 - [Use Hugging Face](./docs/hugging-face.md#run-in-local-container)
+- [Use Anthropic](./docs/anthropic.md#run-in-local-container)
 - [Use LG](./docs/lg.md#run-in-local-container)
 - [Use OpenAI](./docs/openai.md#run-in-local-container)
 - [Use Upstage](./docs/upstage.md#run-in-local-container)
@@ -81,6 +83,7 @@ Open Chat Playground (OCP) is a web UI that is able to connect virtually any LLM
 - [Use Azure AI Foundry](./docs/azure-ai-foundry.md#run-on-azure)
 - [Use GitHub Models](./docs/github-models.md#run-on-azure)
 - [Use Hugging Face](./docs/hugging-face.md#run-on-azure)
+- [Use Anthropic](./docs/anthropic.md#run-on-azure)
 - [Use LG](./docs/lg.md#run-on-azure)
 - [Use OpenAI](./docs/openai.md#run-on-azure)
 - [Use Upstage](./docs/upstage.md#run-on-azure)

docs/README.md

@@ -3,6 +3,7 @@
 - [Azure AI Foundry](azure-ai-foundry.md)
 - [GitHub Models](github-models.md)
 - [Hugging Face](hugging-face.md)
+- [Anthropic](anthropic.md)
 - [LG](lg.md)
 - [OpenAI](openai.md)
 - [Upstage](upstage.md)

docs/anthropic.md

@@ -0,0 +1,225 @@
+# OpenChat Playground with Anthropic
+
+This page describes how to run OpenChat Playground (OCP) with [Anthropic models](https://docs.claude.com/en/docs/about-claude/models) integration.
+
+## Get the repository root
+
+1. Get the repository root.
+
+    ```bash
+    # bash/zsh
+    REPOSITORY_ROOT=$(git rev-parse --show-toplevel)
+    ```
+
+    ```powershell
+    # PowerShell
+    $REPOSITORY_ROOT = git rev-parse --show-toplevel
+    ```
+
+## Run on local machine
+
+1. Make sure you are at the repository root.
+
+    ```bash
+    cd $REPOSITORY_ROOT
+    ```
+
+1. Add Anthropic API Key for Claude connection. Make sure you should replace `{{ANTHROPIC_API_KEY}}` with your Anthropic API key.
+
+    ```bash
+    # bash/zsh
+    dotnet user-secrets --project $REPOSITORY_ROOT/src/OpenChat.PlaygroundApp \
+        set Anthropic:ApiKey "{{ANTHROPIC_API_KEY}}"
+    ```
+
+    ```bash
+    # PowerShell
+    dotnet user-secrets --project $REPOSITORY_ROOT/src/OpenChat.PlaygroundApp `
+        set Anthropic:ApiKey "{{ANTHROPIC_API_KEY}}"
+    ```
+
+    > For more details about Anthropic API keys, refer to the doc, [Anthropic API Documentation](https://docs.anthropic.com/claude/reference/getting-started-with-the-api).
+
+1. Run the app. The default model OCP uses is [Claude Sonnet 4](https://www-cdn.anthropic.com/6be99a52cb68eb70eb9572b4cafad13df32ed995.pdf).
+
+    ```bash
+    # bash/zsh
+    dotnet run --project $REPOSITORY_ROOT/src/OpenChat.PlaygroundApp -- \
+        --connector-type Anthropic
+    ```
+
+    ```powershell
+    # PowerShell
+    dotnet run --project $REPOSITORY_ROOT/src/OpenChat.PlaygroundApp -- `
+        --connector-type Anthropic
+    ```
+
+   Alternatively, if you want to run with a different model, say [Claude Opus 4.1](http://www.anthropic.com/claude-opus-4-1-system-card), other than the default one, you can specify it as an argument:
+
+    ```bash
+    # bash/zsh
+    dotnet run --project $REPOSITORY_ROOT/src/OpenChat.PlaygroundApp -- \
+        --connector-type Anthropic \
+        --model claude-opus-4-1
+    ```
+
+    ```powershell
+    # PowerShell
+    dotnet run --project $REPOSITORY_ROOT/src/OpenChat.PlaygroundApp -- `
+        --connector-type Anthropic `
+        --model claude-opus-4-1
+    ```
+
+1. Open your web browser, navigate to `http://localhost:5280`, and enter prompts.
+
+## Run in local container
+
+1. Make sure you are at the repository root.
+
+    ```bash
+    cd $REPOSITORY_ROOT
+    ```
+
+1. Build a container.
+
+    ```bash
+    docker build -f Dockerfile -t openchat-playground:latest .
+    ```
+
+1. Get Anthropic API Key.
+
+    ```bash
+    # bash/zsh
+    API_KEY=$(dotnet user-secrets --project ./src/OpenChat.PlaygroundApp list --json | \
+              sed -n '/^\/\//d; p' | jq -r '."Anthropic:ApiKey"')
+    ```
+
+    ```bash
+    # PowerShell
+    $API_KEY = (dotnet user-secrets --project ./src/OpenChat.PlaygroundApp list --json | `
+                Select-String -NotMatch '^//(BEGIN|END)' | ConvertFrom-Json).'Anthropic:ApiKey'
+    ```
+
+1. Run the app. The default model OCP uses is [Claude Sonnet 4](https://www-cdn.anthropic.com/6be99a52cb68eb70eb9572b4cafad13df32ed995.pdf).
+
+    ```bash
+    # bash/zsh - from locally built container
+    docker run -i --rm -p 8080:8080 openchat-playground:latest --connector-type Anthropic \
+        --api-key $API_KEY
+    ```
+
+    ```powershell
+    # PowerShell - from locally built container
+    docker run -i --rm -p 8080:8080 openchat-playground:latest --connector-type Anthropic `
+        --api-key $API_KEY
+    ```
+
+    ```bash
+    # bash/zsh - from GitHub Container Registry
+    docker run -i --rm -p 8080:8080 ghcr.io/aliencube/open-chat-playground/openchat-playground:latest \
+        --connector-type Anthropic \
+        --api-key $API_KEY
+    ```
+
+    ```powershell
+    # PowerShell - from GitHub Container Registry
+    docker run -i --rm -p 8080:8080 ghcr.io/aliencube/open-chat-playground/openchat-playground:latest `
+        --connector-type Anthropic `
+        --api-key $API_KEY
+    ```
+
+   Alternatively, if you want to run with a different model, say [Claude Opus 4.1](http://www.anthropic.com/claude-opus-4-1-system-card), other than the default one, you can specify it as an argument:
+
+    ```bash
+    # bash/zsh - from locally built container with custom model
+    docker run -i --rm -p 8080:8080 openchat-playground:latest --connector-type Anthropic \
+        --api-key $API_KEY \
+        --model claude-opus-4-1
+    ```
+
+    ```powershell
+    # PowerShell - from locally built container with custom model
+    docker run -i --rm -p 8080:8080 openchat-playground:latest --connector-type Anthropic `
+        --api-key $API_KEY `
+        --model claude-opus-4-1
+    ```
+
+1. Open your web browser, navigate to `http://localhost:8080`, and enter prompts.
+
+## Run on Azure
+
+1. Make sure you are at the repository root.
+
+    ```bash
+    cd $REPOSITORY_ROOT
+    ```
+
+1. Login to Azure.
+
+    ```bash
+    azd auth login
+    ```
+
+1. Check login status.
+
+    ```bash
+    azd auth login --check-status
+    ```
+
+1. Initialize `azd` template.
+
+    ```bash
+    azd init
+    ```
+
+    > **NOTE**: You will be asked to provide environment name for provisioning.
+
+1. Get Anthropic API Key.
+
+    ```bash
+    # bash/zsh
+    API_KEY=$(dotnet user-secrets --project ./src/OpenChat.PlaygroundApp list --json | \
+              sed -n '/^\/\//d; p' | jq -r '."Anthropic:ApiKey"')
+    ```
+
+    ```bash
+    # PowerShell
+    $API_KEY = (dotnet user-secrets --project ./src/OpenChat.PlaygroundApp list --json | `
+                Select-String -NotMatch '^//(BEGIN|END)' | ConvertFrom-Json).'Anthropic:ApiKey'
+    ```
+
+1. Set Anthropic API Key to azd environment variables.
+
+    ```bash
+    azd env set ANTHROPIC_API_KEY $API_KEY
+    ```
+
+   The default model OCP uses is [Claude Sonnet 4](https://www-cdn.anthropic.com/6be99a52cb68eb70eb9572b4cafad13df32ed995.pdf). If you want to run with a different model, say [Claude Opus 4.1](http://www.anthropic.com/claude-opus-4-1-system-card), other than the default one, add it to azd environment variables.
+
+    ```bash
+    azd env set ANTHROPIC_MODEL claude-opus-4-1
+    ```
+
+1. Set the connector type to `Anthropic`.
+
+    ```bash
+    azd env set CONNECTOR_TYPE Anthropic
+    ```
+
+1. Run the following commands in order to provision and deploy the app.
+
+    ```bash
+    azd up
+    ```
+
+    > **NOTE**: You will be asked to provide Azure subscription and location for deployment.
+
+   Once deployed, you will be able to see the deployed OCP app URL.
+
+1. Open your web browser, navigate to the OCP app URL, and enter prompts.
+
+1. Clean up all the resources.
+
+    ```bash
+    azd down --force --purge
+    ```

infra/main.bicep

@@ -29,6 +29,9 @@ param huggingFaceModel string = ''
 // Ollama
 param ollamaModel string = ''
 // Anthropic
+param anthropicModel string = ''
+@secure()
+param anthropicApiKey string = ''
 // LG
 param lgModel string = ''
 // Naver
@@ -89,6 +92,8 @@ module resources 'resources.bicep' = {
     githubModelsToken: githubModelsToken
     huggingFaceModel: huggingFaceModel
     ollamaModel: ollamaModel
+    anthropicModel: anthropicModel
+    anthropicApiKey: anthropicApiKey
     lgModel: lgModel
     openAIModel: openAIModel
     openAIApiKey: openAIApiKey

infra/main.parameters.json

@@ -29,6 +29,12 @@
     "huggingFaceModel": {
       "value": "${HUGGING_FACE_MODEL=hf.co/Qwen/Qwen3-0.6B-GGUF}"
     },
+    "anthropicModel" : {
+      "value": "${ANTHROPIC_MODEL=claude-sonnet-4-0}"
+    },
+    "anthropicApiKey" : {
+      "value": "${ANTHROPIC_API_KEY}"
+    },
     "lgModel": {
       "value": "${LG_MODEL=hf.co/LGAI-EXAONE/EXAONE-4.0-1.2B-GGUF}"
     },

infra/resources.bicep

@@ -24,6 +24,9 @@ param huggingFaceModel string = ''
 // Ollama
 param ollamaModel string = ''
 // Anthropic
+param anthropicModel string = ''
+@secure()
+param anthropicApiKey string = ''
 // LG
 param lgModel string = ''
 // Naver
@@ -231,6 +234,17 @@ var envOllama = connectorType == 'Ollama' ? concat(ollamaModel != '' ? [
   }
 ] : []) : []
 // Anthropic
+var envAnthropic = connectorType == 'Anthropic' ? concat(anthropicModel != '' ? [
+  {
+    name: 'Anthropic__Model'
+    value: anthropicModel
+  }
+] : [], anthropicApiKey != '' ? [
+  {
+    name: 'Anthropic__ApiKey'
+    secretRef: 'anthropic-api-key'
+  }    
+] : []) : []
 // LG
 var envLG = connectorType == 'LG' ? concat(lgModel != '' ? [
   {
@@ -288,6 +302,11 @@ module openchatPlaygroundApp 'br/public:avm/res/app/container-app:0.18.1' = {
         name: 'github-models-token'
         value: githubModelsToken
       }
+    ] : [], anthropicApiKey != '' ? [
+      {
+        name: 'anthropic-api-key'
+        value: anthropicApiKey
+      }
     ] : [], openAIApiKey != '' ? [
       {
         name: 'openai-api-key'
@@ -326,6 +345,7 @@ module openchatPlaygroundApp 'br/public:avm/res/app/container-app:0.18.1' = {
         envGitHubModels,
         envHuggingFace,
         envOllama,
+        envAnthropic,
         envLG,
         envOpenAI,
         envUpstage, 

src/OpenChat.PlaygroundApp/Abstractions/LanguageModelConnector.cs

@@ -39,6 +39,7 @@ public static async Task<IChatClient> CreateChatClientAsync(AppSettings settings
             ConnectorType.AzureAIFoundry => new AzureAIFoundryConnector(settings),
             ConnectorType.GitHubModels => new GitHubModelsConnector(settings),
             ConnectorType.HuggingFace => new HuggingFaceConnector(settings),
+            ConnectorType.Anthropic => new AnthropicConnector(settings),
             ConnectorType.LG => new LGConnector(settings),
             ConnectorType.OpenAI => new OpenAIConnector(settings),
             ConnectorType.Upstage => new UpstageConnector(settings),

src/OpenChat.PlaygroundApp/Configurations/AnthropicSettings.cs

@@ -17,12 +17,17 @@ public partial class AppSettings
 public class AnthropicSettings : LanguageModelSettings
 {
     /// <summary>
-    /// Gets or sets the API key for Anthropic Claude.
+    /// Gets or sets the API key for Anthropic.
     /// </summary>
     public string? ApiKey { get; set; }
 
     /// <summary>
     /// Gets or sets the model name of Anthropic Claude.
     /// </summary>
     public string? Model { get; set; }
+
+    /// <summary>
+    /// Gets or sets the maximum number of output tokens for Anthropic Claude.
+    /// </summary>
+    public int? MaxTokens { get; set; }
 }