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

@@ -12,8 +12,48 @@ Demo site: [https://next-ai-draw-io.vercel.app](https://next-ai-draw-io.vercel.a
 -   **Image-Based Diagram Replication**: Upload existing diagrams or images and have the AI replicate and enhance them automatically
 -   **Diagram History**: Comprehensive version control that tracks all changes, allowing you to view and restore previous versions of your diagrams before the AI editing.
 -   **Interactive Chat Interface**: Communicate with AI to refine your diagrams in real-time
--   **Smart Editing**: Modify existing diagrams using simple text prompts
+-   **AWS Architecture Diagram Support**: Specialized support for generating AWS architecture diagrams
--   **Targeted XML Editing**: AI can now make precise edits to specific parts of diagrams without regenerating the entire XML, making updates faster and more efficient
+-   **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization
+
+## **Examples**
+
+Here are some example prompts and their generated diagrams:
+
+<div align="center">
+<table width="100%">
+  <tr>
+    <td width="50%" valign="top">
+      <strong>GCP architecture diagram</strong><br />
+      <p><strong>Prompt:</strong> Generate a GCP architecture diagram with **GCP icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
+      <img src="./public/gcp_demo.svg" alt="GCP Architecture Diagram" width="480" />
+    </td>
+    <td width="50%" valign="top">
+      <strong>AWS architecture diagram</strong><br />
+      <p><strong>Prompt:</strong> Generate a AWS architecture diagram with **AWS icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
+      <img src="./public/aws_demo.svg" alt="AWS Architecture Diagram" width="480" />
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <strong>Azure architecture diagram</strong><br />
+      <p><strong>Prompt:</strong> Generate a Azure architecture diagram with **Azure icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
+      <img src="./public/azure_demo.svg" alt="Azure Architecture Diagram" width="480" />
+    </td>
+    <td width="50%" valign="top">
+      <strong>Animated transformer connectors</strong><br />
+      <p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
+      <img src="./public/animated_connectors.svg" alt="Transformer Architecture with Animated Connectors" width="480" />
+    </td>
+  </tr>
+  <tr>
+    <td colspan="2" valign="top" align="center">
+      <strong>Cat sketch prompt</strong><br />
+      <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
+      <img src="./public/cat_demo.svg" alt="Cat Drawing" width="260" />
+    </td>
+  </tr>
+</table>
+</div>
 
 ## How It Works
 
@@ -28,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: {
@@ -141,6 +142,7 @@ ${lastMessageText}
             </mxCell>
           </root>
           - Note that when you need to generate diagram about aws architecture, use **AWS 2025 icons**.
+          - If you are asked to generate animated connectors, make sure to include "flowAnimation=1" in the style of the connector elements.
           `,
           inputSchema: z.object({
             xml: z.string().describe("XML string to be displayed on draw.io")

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="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>
-        );
+            )}
-    }
 
-    return (
-        <div className="flex h-screen bg-gray-100">
             <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-example-panel.tsx

@@ -52,23 +52,29 @@ export default function ExamplePanel({
             </p>
             <p className="text-sm text-gray-500 mb-2">Try these examples:</p>
             <div className="flex flex-wrap gap-5">
+                <button
+                    className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
+                    onClick={() => setInput("Give me a **animated connector** diagram of transformer's architecture")}
+                >
+                    Draw diagram with Animated Connectors
+                </button>
                 <button
                     className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
                     onClick={handleReplicateArchitecture}
                 >
-                    Create this diagram in aws style
+                    Create AWS architecture
                 </button>
                 <button
                     className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
                     onClick={handleReplicateFlowchart}
                 >
-                    Replicate this flowchart
+                    Replicate flowchart
                 </button>
                 <button
                     className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
                     onClick={() => setInput("Draw a cat for me")}
                 >
-                    Draw a cat for me
+                    Draw a cat
                 </button>
             </div>
         </div>

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 || "";
@@ -160,16 +183,30 @@ export function ChatMessageDisplay({
             {messages.length === 0 ? (
                 <ExamplePanel setInput={setInput} setFiles={setFiles} />
             ) : (
-                messages.map((message) => (
+                messages.map((message) => {
+                    const userMessageText = message.role === "user" ? getMessageTextContent(message) : "";
+                    return (
                         <div
                             key={message.id}
-                        className={`mb-4 ${
+                            className={`mb-4 flex ${message.role === "user" ? "justify-end" : "justify-start"}`}
-                            message.role === "user" ? "text-right" : "text-left"
-                        }`}
                         >
+                            {message.role === "user" && userMessageText && (
+                                <button
+                                    onClick={() => copyMessageToClipboard(message.id, userMessageText)}
+                                    className="p-1 text-gray-400 hover:text-gray-600 transition-colors self-center mr-1"
+                                    title={copiedMessageId === message.id ? "Copied!" : copyFailedMessageId === message.id ? "Failed to copy" : "Copy message"}
+                                >
+                                    {copiedMessageId === message.id ? (
+                                        <Check className="h-3.5 w-3.5 text-green-500" />
+                                    ) : copyFailedMessageId === message.id ? (
+                                        <X className="h-3.5 w-3.5 text-red-500" />
+                                    ) : (
+                                        <Copy className="h-3.5 w-3.5" />
+                                    )}
+                                </button>
+                            )}
                             <div
-                            className={`inline-block px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${
+                                className={`px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${message.role === "user"
-                                message.role === "user"
                                         ? "bg-primary text-primary-foreground"
                                         : "bg-muted text-muted-foreground"
                                     }`}
@@ -204,7 +241,8 @@ export function ChatMessageDisplay({
                                 })}
                             </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':
+      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"
     }