Add AWS Bedrock Support with Claude Model Invocation

[JKevinXu]

Add AWS Bedrock Support with Claude Model Invocation

Issue Description

Add support for AWS Bedrock as an alternative AI provider to OpenAI, specifically enabling Claude model invocation through Bedrock's API. This will provide users with more AI provider options and potentially better performance/cost characteristics.

Problem Statement

Currently, ChatBrowse only supports OpenAI's API for AI interactions. Users may prefer or require:

• Claude models for their superior reasoning and context handling
• AWS Bedrock for enterprise compliance and integration
• Cost optimization through different pricing models
• Regional availability where OpenAI might not be accessible
• Multi-provider redundancy for reliability

Current Architecture

Existing OpenAI Integration

• src/services/openai-service.ts - Handles OpenAI API calls
• src/popup/popup-app.ts - Manages chat interactions
• Settings stored in Chrome storage for API keys

Current Flow

User Message → PopupApp → OpenAI Service → OpenAI API → Response

Proposed Solution

1. AWS Bedrock Service Implementation

Create a new service for AWS Bedrock integration:

// src/services/bedrock-service.ts
export class BedrockService {
  private client: BedrockRuntimeClient;
  
  constructor(region: string, accessKeyId: string, secretAccessKey: string) {
    this.client = new BedrockRuntimeClient({
      region,
      credentials: {
        accessKeyId,
        secretAccessKey
      }
    });
  }

  async invokeClaude(prompt: string, model: string = 'anthropic.claude-3-sonnet-20240229-v1:0'): Promise<string> {
    const command = new InvokeModelCommand({
      modelId: model,
      contentType: 'application/json',
      accept: 'application/json',
      body: JSON.stringify({
        anthropic_version: 'bedrock-2023-05-31',
        max_tokens: 4000,
        messages: [
          {
            role: 'user',
            content: prompt
          }
        ]
      })
    });

    const response = await this.client.send(command);
    const responseBody = JSON.parse(new TextDecoder().decode(response.body));
    return responseBody.content[0].text;
  }
}

2. Provider Abstraction Layer

Create an abstraction to support multiple AI providers:

// src/services/ai-provider.ts
export interface AIProvider {
  sendMessage(prompt: string, context?: string): Promise<string>;
  getProviderName(): string;
  isConfigured(): Promise<boolean>;
}

export class AIProviderFactory {
  static async createProvider(type: 'openai' | 'bedrock'): Promise<AIProvider> {
    switch (type) {
      case 'openai':
        return new OpenAIProvider();
      case 'bedrock':
        return new BedrockProvider();
      default:
        throw new Error(`Unsupported provider: ${type}`);
    }
  }
}

3. Settings Enhancement

Extend settings to support multiple providers:

interface ExtensionSettings {
  // Existing OpenAI settings
  openaiApiKey?: string;
  openaiModel?: string;
  
  // New Bedrock settings
  awsRegion?: string;
  awsAccessKeyId?: string;
  awsSecretAccessKey?: string;
  claudeModel?: string;
  
  // Provider selection
  aiProvider: 'openai' | 'bedrock';
}

4. UI Updates

Update the settings page to include AWS Bedrock configuration:

<!-- Settings page additions -->
<div class="provider-selection">
  <label>AI Provider:</label>
  <select id="aiProvider">
    <option value="openai">OpenAI</option>
    <option value="bedrock">AWS Bedrock (Claude)</option>
  </select>
</div>

<div id="bedrockSettings" class="provider-settings">
  <h3>AWS Bedrock Configuration</h3>
  <input type="text" id="awsRegion" placeholder="AWS Region (e.g., us-east-1)">
  <input type="text" id="awsAccessKeyId" placeholder="AWS Access Key ID">
  <input type="password" id="awsSecretAccessKey" placeholder="AWS Secret Access Key">
  <select id="claudeModel">
    <option value="anthropic.claude-3-sonnet-20240229-v1:0">Claude 3 Sonnet</option>
    <option value="anthropic.claude-3-haiku-20240307-v1:0">Claude 3 Haiku</option>
    <option value="anthropic.claude-3-opus-20240229-v1:0">Claude 3 Opus</option>
  </select>
</div>

Implementation Plan

Phase 1: Core Bedrock Integration

• Install AWS SDK dependencies (@aws-sdk/client-bedrock-runtime)
• Create BedrockService class
• Implement Claude model invocation
• Add basic error handling and logging

Phase 2: Provider Abstraction

• Create AIProvider interface
• Refactor existing OpenAI service to implement interface
• Create BedrockProvider implementation
• Implement AIProviderFactory

Phase 3: Settings and Configuration

• Extend settings schema for AWS credentials
• Update settings UI with provider selection
• Add AWS credential validation
• Implement secure credential storage

Phase 4: Integration and Testing

• Update PopupApp to use provider abstraction
• Add provider switching logic
• Implement fallback mechanisms
• Add comprehensive error handling

Phase 5: Documentation and Polish

• Update README with Bedrock setup instructions
• Add AWS IAM policy examples
• Create troubleshooting guide
• Add usage examples

Technical Requirements

Dependencies

{
  "@aws-sdk/client-bedrock-runtime": "^3.x.x",
  "@aws-sdk/types": "^3.x.x"
}

AWS IAM Permissions

Users will need IAM permissions for:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "bedrock:InvokeModel"
      ],
      "Resource": [
        "arn:aws:bedrock:*::foundation-model/anthropic.claude-*"
      ]
    }
  ]
}

Security Considerations

• Store AWS credentials securely in Chrome storage
• Validate credentials before making API calls
• Implement proper error handling for authentication failures
• Consider using AWS STS for temporary credentials

Benefits

For Users

• Choice of AI models: Access to Claude's superior reasoning capabilities
• Cost optimization: Different pricing models between providers
• Enterprise compliance: AWS Bedrock meets enterprise security requirements
• Regional availability: Better global coverage

For the Extension

• Provider redundancy: Fallback options if one provider is unavailable
• Feature differentiation: Support for multiple leading AI providers
• Future extensibility: Framework for adding more providers

Affected Files

• src/services/bedrock-service.ts (new)
• src/services/ai-provider.ts (new)
• src/services/openai-service.ts (refactor)
• src/popup/popup-app.ts (update)
• src/utils/storage-utils.ts (extend)
• public/settings.html (update)
• src/popup/settings.ts (update)
• package.json (dependencies)

Testing Strategy

Unit Tests

• Test Bedrock service with mock AWS SDK
• Test provider factory and abstraction
• Test settings validation and storage

Integration Tests

• Test with real AWS Bedrock API (using test credentials)
• Test provider switching functionality
• Test error handling and fallbacks

Manual Testing

• Test with different Claude models
• Test credential validation
• Test UI provider switching

Documentation Updates

• README: Add Bedrock setup instructions
• SETUP.md: AWS credential configuration
• TROUBLESHOOTING.md: Common Bedrock issues
• API.md: Provider abstraction documentation

Priority

Medium-High - This adds significant value by providing Claude access and enterprise-grade AI provider options.

Labels

• enhancement
• ai-integration
• aws-bedrock
• claude
• provider-support

Acceptance Criteria

• Users can configure AWS Bedrock credentials in settings
• Extension can invoke Claude models through Bedrock
• Provider switching works seamlessly
• Error handling provides clear feedback
• Performance is comparable to OpenAI integration
• Secure credential storage and validation
• Comprehensive documentation and setup guides
• Backward compatibility with existing OpenAI users