fix: update @ai-sdk/amazon-bedrock to 3.0.62 for tool streaming support

- Use bedrock.anthropicBeta for Bedrock provider (not additionalModelRequestFields)
- Use top-level headers for direct Anthropic API
- Update @ai-sdk/amazon-bedrock to 3.0.62
- Add headers support to ModelConfig interface

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "next/typescript"
+  ]
+}

.github/workflows/claude-code.yml

@@ -0,0 +1,118 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+  pull_request_target:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  claude:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+      (github.event_name == 'issues' && contains(github.event.issue.body, '@claude'))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      issues: write
+      id-token: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ secrets.AWS_ROLE_TO_ASSUME }}
+          aws-region: us-east-1
+
+      - name: Run Claude Code
+        uses: anthropics/claude-code-action@v1
+        with:
+          use_bedrock: "true"
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+
+  pr-review:
+    if: github.event_name == 'pull_request_target'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ secrets.AWS_ROLE_TO_ASSUME }}
+          aws-region: us-east-1
+
+      - name: Run Claude Code PR Review
+        uses: anthropics/claude-code-action@v1
+        with:
+          use_bedrock: "true"
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          allowed_non_write_users: "*"
+          prompt: |
+            REPO: ${{ github.repository }}
+            PR NUMBER: ${{ github.event.pull_request.number }}
+
+            This is a personal project - an AI-powered draw.io diagram generator built with:
+            - Next.js 15 with React 19
+            - Vercel AI SDK (streamText, useChat, tool calling)
+            - Multiple AI providers: Bedrock, Anthropic, OpenAI, Google, Azure, OpenRouter, Ollama
+
+            STEP 1: Check existing comments to avoid duplicates.
+            Run: `gh api repos/${{ github.repository }}/pulls/${{ github.event.pull_request.number }}/comments`
+
+            Build a list of files and line numbers that already have comments. For each existing comment:
+            - If the issue is FIXED in current code, resolve the thread using:
+              `gh api graphql -f query='mutation { resolveReviewThread(input: {threadId: "THREAD_ID"}) { thread { isResolved } } }'`
+            - If the issue still exists, remember this file:line - DO NOT create a new comment for it
+
+            STEP 2: Review the diff for issues, but SKIP any file:line that already has a comment.
+
+            Review this PR for these issues (report ALL that apply):
+            1. Bugs that would cause runtime errors or broken functionality
+            2. Security issues (exposed secrets, API key leaks)
+            3. AI SDK misuse - specifically check for:
+               - Client-side: Should use useChat/useCompletion/useObject hooks, NOT raw fetch()
+               - Server-side: Should use streamText/generateText/streamObject/generateObject
+               - Message handling: Access message.parts array, not legacy content property
+               - Tool definitions: Must use Zod schemas for inputSchema
+               - Status handling: Check status (submitted/streaming/ready/error) before actions
+               - Stream cleanup: Call stop() when aborting streams
+            4. Unrelated changes that should be in separate PRs (scope creep)
+            5. Suspicious .gitignore additions or accidentally committed files
+            6. UI/UX inconsistencies (e.g., alignment issues)
+
+            When reviewing AI SDK usage, fetch https://ai-sdk.dev/docs/ to verify correct patterns.
+            Key doc pages: /docs/ai-sdk-ui/chatbot, /docs/ai-sdk-core/generating-text, /docs/ai-sdk-core/tools-and-tool-calling
+
+            DO NOT comment on:
+            - Minor performance optimizations
+            - Code style preferences (unless clearly wrong)
+            - Type annotations that don't affect functionality
+
+            IMPORTANT:
+            - NEVER create a comment on a file:line that already has a comment - this causes duplicates
+            - For each NEW issue, use `mcp__github_inline_comment__create_inline_comment` to comment on the specific line
+            - ALWAYS include a suggested fix using GitHub's suggestion syntax: ```suggestion\n<fixed code>\n```
+            - Only say "LGTM" if there are truly ZERO new issues to report
+          claude_args: |
+            --allowedTools "mcp__github_inline_comment__create_inline_comment,Bash(gh pr diff:*),Bash(gh pr view:*),Bash(gh api:*),WebFetch(domain:ai-sdk.dev)"

README.md

@@ -68,7 +68,7 @@ Diagrams are represented as XML that can be rendered in draw.io. The AI processe
 ## Multi-Provider Support
 
 -   AWS Bedrock (default)
--   OpenAI
+-   OpenAI / OpenAI-compatible APIs (via `OPENAI_BASE_URL`)
 -   Anthropic
 -   Google AI
 -   Azure OpenAI

app/api/chat/route.ts

@@ -120,13 +120,14 @@ ${lastMessageText}
     console.log("Enhanced messages:", enhancedMessages);
 
     // Get AI model from environment configuration
-    const { model, providerOptions } = getAIModel();
+    const { model, providerOptions, headers } = getAIModel();
 
     const result = streamText({
       model,
       system: systemMessage,
       messages: enhancedMessages,
       ...(providerOptions && { providerOptions }),
+      ...(headers && { headers }),
       tools: {
         // Client-side tool that will be executed on the client
         display_diagram: {

app/page.tsx

@@ -40,20 +40,19 @@ export default function Home() {
         };
     }, []);
 
-    if (isMobile) {
-        return (
-            <div className="flex items-center justify-center h-screen bg-gray-100">
-                <div className="text-center p-8">
-                    <h1 className="text-2xl font-semibold text-gray-800">
-                        Please open this application on a desktop or laptop
-                    </h1>
-                </div>
-            </div>
-        );
-    }
-
     return (
-        <div className="flex h-screen bg-gray-100">
+        <div className="flex h-screen bg-gray-100 relative">
+            {/* Mobile warning overlay - keeps components mounted */}
+            {isMobile && (
+                <div className="absolute inset-0 z-50 flex items-center justify-center bg-gray-100">
+                    <div className="text-center p-8">
+                        <h1 className="text-2xl font-semibold text-gray-800">
+                            Please open this application on a desktop or laptop
+                        </h1>
+                    </div>
+                </div>
+            )}
+
             <div className={`${isChatVisible ? 'w-2/3' : 'w-full'} p-1 h-full relative transition-all duration-300 ease-in-out`}>
                 <DrawIoEmbed
                     ref={drawioRef}

components/chat-message-display.tsx

@@ -1,15 +1,23 @@
 "use client";
 
-import type React from "react";
 import { useRef, useEffect, useState, useCallback } from "react";
 import Image from "next/image";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import ExamplePanel from "./chat-example-panel";
 import { UIMessage } from "ai";
 import { convertToLegalXml, replaceNodes } from "@/lib/utils";
+import { Copy, Check, X } from "lucide-react";
 
 import { useDiagram } from "@/contexts/diagram-context";
 
+const getMessageTextContent = (message: UIMessage): string => {
+    if (!message.parts) return "";
+    return message.parts
+        .filter((part: any) => part.type === "text")
+        .map((part: any) => part.text)
+        .join("\n");
+};
+
 interface ChatMessageDisplayProps {
     messages: UIMessage[];
     error?: Error | null;
@@ -30,6 +38,21 @@ export function ChatMessageDisplay({
     const [expandedTools, setExpandedTools] = useState<Record<string, boolean>>(
         {}
     );
+    const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null);
+    const [copyFailedMessageId, setCopyFailedMessageId] = useState<string | null>(null);
+
+    const copyMessageToClipboard = async (messageId: string, text: string) => {
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopiedMessageId(messageId);
+            setTimeout(() => setCopiedMessageId(null), 2000);
+        } catch (err) {
+            console.error("Failed to copy message:", err);
+            setCopyFailedMessageId(messageId);
+            setTimeout(() => setCopyFailedMessageId(null), 2000);
+        }
+    };
+
     const handleDisplayChart = useCallback(
         (xml: string) => {
             const currentXml = xml || "";
@@ -137,16 +160,16 @@ export function ChatMessageDisplay({
                                 {output || (toolName === "display_diagram"
                                     ? "Diagram generated"
                                     : toolName === "edit_diagram"
-                                    ? "Diagram edited"
+                                        ? "Diagram edited"
-                                    : "Tool executed")}
+                                        : "Tool executed")}
                             </div>
                         ) : state === "output-error" ? (
                             <div className="text-red-600">
                                 {output || (toolName === "display_diagram"
                                     ? "Error generating diagram"
                                     : toolName === "edit_diagram"
-                                    ? "Error editing diagram"
+                                        ? "Error editing diagram"
-                                    : "Tool error")}
+                                        : "Tool error")}
                             </div>
                         ) : null}
                     </div>
@@ -160,51 +183,66 @@ export function ChatMessageDisplay({
             {messages.length === 0 ? (
                 <ExamplePanel setInput={setInput} setFiles={setFiles} />
             ) : (
-                messages.map((message) => (
+                messages.map((message) => {
-                    <div
+                    const userMessageText = message.role === "user" ? getMessageTextContent(message) : "";
-                        key={message.id}
+                    return (
-                        className={`mb-4 ${
-                            message.role === "user" ? "text-right" : "text-left"
-                        }`}
-                    >
                         <div
-                            className={`inline-block px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${
+                            key={message.id}
-                                message.role === "user"
+                            className={`mb-4 flex ${message.role === "user" ? "justify-end" : "justify-start"}`}
-                                    ? "bg-primary text-primary-foreground"
-                                    : "bg-muted text-muted-foreground"
-                            }`}
                         >
-                            {message.parts?.map((part: any, index: number) => {
+                            {message.role === "user" && userMessageText && (
-                                switch (part.type) {
+                                <button
-                                    case "text":
+                                    onClick={() => copyMessageToClipboard(message.id, userMessageText)}
-                                        return (
+                                    className="p-1 text-gray-400 hover:text-gray-600 transition-colors self-center mr-1"
-                                            <div key={index}>{part.text}</div>
+                                    title={copiedMessageId === message.id ? "Copied!" : copyFailedMessageId === message.id ? "Failed to copy" : "Copy message"}
-                                        );
+                                >
-                                    case "file":
+                                    {copiedMessageId === message.id ? (
-                                        return (
+                                        <Check className="h-3.5 w-3.5 text-green-500" />
-                                            <div key={index} className="mt-2">
+                                    ) : copyFailedMessageId === message.id ? (
-                                                <Image
+                                        <X className="h-3.5 w-3.5 text-red-500" />
-                                                    src={part.url}
+                                    ) : (
-                                                    width={200}
+                                        <Copy className="h-3.5 w-3.5" />
-                                                    height={200}
+                                    )}
-                                                    alt={`Uploaded diagram or image for AI analysis`}
+                                </button>
-                                                    className="rounded-md border"
+                            )}
-                                                    style={{
+                            <div
-                                                        objectFit: "contain",
+                                className={`px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${message.role === "user"
-                                                    }}
+                                        ? "bg-primary text-primary-foreground"
-                                                />
+                                        : "bg-muted text-muted-foreground"
-                                            </div>
+                                    }`}
-                                        );
+                            >
-                                    default:
+                                {message.parts?.map((part: any, index: number) => {
-                                        if (part.type?.startsWith("tool-")) {
+                                    switch (part.type) {
-                                            return renderToolPart(part);
+                                        case "text":
-                                        }
+                                            return (
-                                        return null;
+                                                <div key={index}>{part.text}</div>
-                                }
+                                            );
-                            })}
+                                        case "file":
+                                            return (
+                                                <div key={index} className="mt-2">
+                                                    <Image
+                                                        src={part.url}
+                                                        width={200}
+                                                        height={200}
+                                                        alt={`Uploaded diagram or image for AI analysis`}
+                                                        className="rounded-md border"
+                                                        style={{
+                                                            objectFit: "contain",
+                                                        }}
+                                                    />
+                                                </div>
+                                            );
+                                        default:
+                                            if (part.type?.startsWith("tool-")) {
+                                                return renderToolPart(part);
+                                            }
+                                            return null;
+                                    }
+                                })}
+                            </div>
                         </div>
-                    </div>
+                    );
-                ))
+                })
             )}
             {error && (
                 <div className="text-red-500 text-sm mt-2">

env.example

@@ -14,6 +14,7 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 
 # OpenAI Configuration
 # OPENAI_API_KEY=sk-...
+# OPENAI_BASE_URL=https://api.openai.com/v1  # Optional: Custom OpenAI-compatible endpoint
 # OPENAI_ORGANIZATION=org-...  # Optional
 # OPENAI_PROJECT=proj_...      # Optional
 

lib/ai-providers.ts

@@ -1,5 +1,5 @@
 import { bedrock } from '@ai-sdk/amazon-bedrock';
-import { openai } from '@ai-sdk/openai';
+import { openai, createOpenAI } from '@ai-sdk/openai';
 import { anthropic } from '@ai-sdk/anthropic';
 import { google } from '@ai-sdk/google';
 import { azure } from '@ai-sdk/azure';
@@ -18,15 +18,19 @@ export type ProviderName =
 interface ModelConfig {
   model: any;
   providerOptions?: any;
+  headers?: Record<string, string>;
 }
 
-// Anthropic beta headers for fine-grained tool streaming
+// Bedrock provider options for Anthropic beta features
-const ANTHROPIC_BETA_OPTIONS = {
+const BEDROCK_ANTHROPIC_BETA = {
-  anthropic: {
+  bedrock: {
-    additionalModelRequestFields: {
+    anthropicBeta: ['fine-grained-tool-streaming-2025-05-14'],
-      anthropic_beta: ['fine-grained-tool-streaming-2025-05-14']
+  },
-    }
+};
-  }
+
+// Direct Anthropic API headers for beta features
+const ANTHROPIC_BETA_HEADERS = {
+  'anthropic-beta': 'fine-grained-tool-streaming-2025-05-14',
 };
 
 /**
@@ -61,6 +65,7 @@ function validateProviderCredentials(provider: ProviderName): void {
  *
  * Provider-specific env vars:
  * - OPENAI_API_KEY: OpenAI API key
+ * - OPENAI_BASE_URL: Custom OpenAI-compatible endpoint (optional)
  * - ANTHROPIC_API_KEY: Anthropic API key
  * - GOOGLE_GENERATIVE_AI_API_KEY: Google API key
  * - AZURE_RESOURCE_NAME, AZURE_API_KEY: Azure OpenAI credentials
@@ -86,24 +91,33 @@ export function getAIModel(): ModelConfig {
 
   let model: any;
   let providerOptions: any = undefined;
+  let headers: Record<string, string> | undefined = undefined;
 
   switch (provider) {
     case 'bedrock':
       model = bedrock(modelId);
-      // Add Anthropic beta headers if using Claude models via Bedrock
+      // Add Anthropic beta options if using Claude models via Bedrock
       if (modelId.includes('anthropic.claude')) {
-        providerOptions = ANTHROPIC_BETA_OPTIONS;
+        providerOptions = BEDROCK_ANTHROPIC_BETA;
       }
       break;
 
     case 'openai':
-      model = openai(modelId);
+      if (process.env.OPENAI_BASE_URL) {
+        const customOpenAI = createOpenAI({
+          apiKey: process.env.OPENAI_API_KEY,
+          baseURL: process.env.OPENAI_BASE_URL,
+        });
+        model = customOpenAI.chat(modelId);
+      } else {
+        model = openai(modelId);
+      }
       break;
 
     case 'anthropic':
       model = anthropic(modelId);
       // Add beta headers for fine-grained tool streaming
-      providerOptions = ANTHROPIC_BETA_OPTIONS;
+      headers = ANTHROPIC_BETA_HEADERS;
       break;
 
     case 'google':
@@ -131,10 +145,10 @@ export function getAIModel(): ModelConfig {
       );
   }
 
-  // Log if provider options are being applied
+  // Log if provider options or headers are being applied
-  if (providerOptions) {
+  if (providerOptions || headers) {
-    console.log('[AI Provider] Applying provider-specific options');
+    console.log('[AI Provider] Applying provider-specific options/headers');
   }
 
-  return { model, providerOptions };
+  return { model, providerOptions, headers };
 }

package.json

@@ -9,7 +9,7 @@
         "lint": "next lint"
     },
     "dependencies": {
-        "@ai-sdk/amazon-bedrock": "^3.0.52",
+        "@ai-sdk/amazon-bedrock": "^3.0.62",
         "@ai-sdk/anthropic": "^2.0.44",
         "@ai-sdk/azure": "^2.0.69",
         "@ai-sdk/google": "^2.0.0",
@@ -46,6 +46,8 @@
         "@types/pako": "^2.0.3",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "eslint": "9.39.1",
+        "eslint-config-next": "16.0.5",
         "tailwindcss": "^4",
         "typescript": "^5"
     }