Build an AI Chatbot with Arcade and Vercel AI SDK

ARCADE_API_KEY=your_arcade_api_key
ARCADE_USER_ID=your_user_id
OPENAI_API_KEY=your_openai_api_key

import { openai } from "@ai-sdk/openai";
import { streamText, convertToModelMessages, stepCountIs } from "ai";
import { Arcade } from "@arcadeai/arcadejs";
import {
  toZodToolSet,
  executeOrAuthorizeZodTool,
} from "@arcadeai/arcadejs/lib";

const config = {
  // Get all tools from these MCP servers
  mcpServers: ["Slack"],
  // Add specific individual tools
  individualTools: ["Gmail_ListEmails", "Gmail_SendEmail", "Gmail_WhoAmI"],
  // Maximum tools to fetch per MCP server
  toolLimit: 30,
  // System prompt defining the assistant's behavior
  systemPrompt: `You are a helpful assistant that can access Gmail and Slack.
Always use the available tools to fulfill user requests. Do not tell users to authorize manually - just call the tool and the system will handle authorization if needed.
 
IMPORTANT: When calling tools, if an argument is optional, do not set it. Never pass null for optional parameters.`,
};

// Strip null and undefined values from tool inputs
// Some LLMs send null for optional params, which can cause tool failures
function stripNullValues(obj: Record<string, unknown>): Record<string, unknown> {
  const result: Record<string, unknown> = {};
  for (const [key, value] of Object.entries(obj)) {
    if (value !== null && value !== undefined) {
      result[key] = value;
    }
  }
  return result;
}
 
// Adapter to convert Arcade tools to Vercel AI SDK format
function toVercelTools(arcadeTools: Record<string, any>): Record<string, any> {
  const vercelTools: Record<string, unknown> = {};
 
  for (const [name, tool] of Object.entries(arcadeTools)) {
    const originalExecute = tool.execute;
    vercelTools[name] = {
      description: tool.description,
      inputSchema: tool.parameters,
      // Wrap execute to strip null values before calling
      execute: async (input: Record<string, unknown>) => {
        const cleanedInput = stripNullValues(input);
        return originalExecute(cleanedInput);
      },
    };
  }
 
  return vercelTools;
}
 
async function getArcadeTools(userId: string) {
  const arcade = new Arcade();
 
  // Fetch tools from MCP servers
  const mcpServerTools = await Promise.all(
    config.mcpServers.map(async (serverName) => {
      const response = await arcade.tools.list({
        toolkit: serverName,
        limit: config.toolLimit,
      });
      return response.items;
    })
  );
 
  // Fetch individual tools
  const individualToolDefs = await Promise.all(
    config.individualTools.map((toolName) => arcade.tools.get(toolName))
  );
 
  // Combine and deduplicate
  const allTools = [...mcpServerTools.flat(), ...individualToolDefs];
  const uniqueTools = Array.from(
    new Map(allTools.map((tool) => [tool.qualified_name, tool])).values()
  );
 
  // Convert to Arcade's Zod format, then adapt for Vercel AI SDK
  const arcadeTools = toZodToolSet({
    tools: uniqueTools,
    client: arcade,
    userId,
    executeFactory: executeOrAuthorizeZodTool,
  });
 
  return toVercelTools(arcadeTools);
}

export async function POST(req: Request) {
  try {
    const { messages } = await req.json();
    const userId = process.env.ARCADE_USER_ID || "default-user";
 
    const tools = await getArcadeTools(userId);
 
    const result = streamText({
      model: openai("gpt-4o-mini"),
      system: config.systemPrompt,
      messages: await convertToModelMessages(messages),
      tools,
      stopWhen: stepCountIs(5),
    });
 
    return result.toUIMessageStreamResponse();
  } catch (error) {
    console.error("Chat API error:", error);
    return Response.json(
      { error: "Failed to process chat request" },
      { status: 500 }
    );
  }
}

import { Arcade } from "@arcadeai/arcadejs";
 
export async function POST(req: Request) {
  const { toolName } = await req.json();
 
  if (!toolName) {
    return Response.json({ error: "toolName required" }, { status: 400 });
  }
 
  const arcade = new Arcade();
  const userId = process.env.ARCADE_USER_ID || "default-user";
 
  try {
    const authResponse = await arcade.tools.authorize({
      tool_name: toolName,
      user_id: userId,
    });
    return Response.json({ status: authResponse.status });
  } catch (error) {
    console.error("Auth status check error:", error);
    return Response.json({ status: "error", error: String(error) }, { status: 500 });
  }
}

"use client"; // Required for React hooks in Next.js App Router
 
// useChat connects to /api/chat and manages conversation state
import { useChat } from "@ai-sdk/react";
import { useState, useRef, useEffect } from "react";
// For rendering AI responses with formatting (bold, lists, code blocks)
import ReactMarkdown, { Components } from "react-markdown";
 
// Style overrides for markdown elements in chat bubbles
const markdownComponents: Components = {
  p: ({ children }) => <p className="mb-2 last:mb-0">{children}</p>,
  ul: ({ children }) => <ul className="list-disc ml-4 mb-2">{children}</ul>,
  ol: ({ children }) => <ol className="list-decimal ml-4 mb-2">{children}</ol>,
  li: ({ children }) => <li className="mb-1">{children}</li>,
  strong: ({ children }) => <strong className="font-bold">{children}</strong>,
  code: ({ children }) => (
    <code className="bg-gray-700 px-1 py-0.5 rounded text-sm">{children}</code>
  ),
  pre: ({ children }) => (
    <pre className="bg-gray-700 p-2 rounded overflow-x-auto my-2">{children}</pre>
  ),
};

// Displays authorization button and polls for completion
// Props come from Arcade's authorization_required response
function AuthPendingUI({
  authUrl,      // URL to open for OAuth flow
  toolName,     // e.g., "Gmail_ListEmails" - used to check auth status
  onAuthComplete, // Called when auth succeeds (triggers message retry)
}: {
  authUrl: string;
  toolName: string;
  onAuthComplete: () => void;
}) {
  // Track UI state: initial -> waiting (polling) -> completed
  const [status, setStatus] = useState<"initial" | "waiting" | "completed">("initial");
  const pollingRef = useRef<NodeJS.Timeout | null>(null);
  const hasCompletedRef = useRef(false); // Prevent duplicate completions
 
  // Poll /api/auth/status every 2 seconds after user clicks authorize
  useEffect(() => {
    // Only poll when user has clicked authorize and we haven't completed
    if (status !== "waiting" || !toolName || hasCompletedRef.current) return;
 
    const pollStatus = async () => {
      try {
        // Check if user has completed OAuth in the other tab
        const res = await fetch("/api/auth/status", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ toolName }),
        });
        const data = await res.json();
 
        // Arcade returns "completed" when OAuth succeeds
        if (data.status === "completed" && !hasCompletedRef.current) {
          hasCompletedRef.current = true;
          if (pollingRef.current) clearInterval(pollingRef.current);
          setStatus("completed");
          // Brief delay to show success message, then retry the original request
          setTimeout(() => onAuthComplete(), 1500);
        }
      } catch (error) {
        console.error("Polling error:", error);
      }
    };
 
    pollingRef.current = setInterval(pollStatus, 2000);
    // Cleanup: stop polling when component unmounts
    return () => {
      if (pollingRef.current) clearInterval(pollingRef.current);
    };
  }, [status, toolName, onAuthComplete]);
 
  // Extract service name from tool name (e.g., "Gmail" from "Gmail_ListEmails")
  const displayName = toolName.split("_")[0] || toolName;
 
  const handleAuthClick = () => {
    window.open(authUrl, "_blank"); // Open OAuth in new tab
    setStatus("waiting"); // Start polling
  };
 
  return (
    <div>
      {status === "completed" ? (
        <p className="text-green-400">✓ {displayName} authorized</p>
      ) : (
        <>
          Give Arcade Chat access to {displayName}?{" "}
          <button
            onClick={handleAuthClick}
            className="ml-2 px-2 py-1 bg-teal-600 hover:bg-teal-500 rounded text-sm"
          >
            {status === "waiting" ? "Retry authorizing" : "Authorize now"}
          </button>
        </>
      )}
    </div>
  );
}

export default function Chat() {
  const [input, setInput] = useState(""); // Controlled input for message field
  const messagesEndRef = useRef<HTMLDivElement>(null); // For auto-scrolling
  const inputRef = useRef<HTMLInputElement>(null); // For refocusing after send
 
  // useChat provides everything needed for the chat UI:
  // - messages: array of conversation messages with parts (text + tool results)
  // - sendMessage: sends user input to /api/chat
  // - regenerate: retries the last request (used after OAuth completes)
  // - status: "submitted" | "streaming" | "ready" | "error"
  const { messages, sendMessage, regenerate, status } = useChat();
  const isLoading = status === "submitted" || status === "streaming";
 
  // Auto-scroll to bottom when new messages arrive
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages, status]);
 
  // Refocus input when AI finishes responding
  useEffect(() => {
    if (!isLoading) {
      inputRef.current?.focus();
    }
  }, [isLoading]);

  return (
    <div className="flex flex-col h-screen max-w-2xl mx-auto p-4">
      <div className="flex-1 overflow-y-auto space-y-4">
        {messages.map((message) => {
          // Check if any tool in this message needs authorization
          // Tool parts have type like "tool-Gmail_ListEmails"
          const hasAuthRequired = message.parts?.some((part) => {
            if (part.type.startsWith("tool-")) {
              const toolPart = part as { state?: string; output?: unknown };
              // "output-available" means the tool has returned a result
              if (toolPart.state === "output-available") {
                const result = toolPart.output as Record<string, unknown>;
                // Arcade sets this flag when OAuth is needed
                return result?.authorization_required;
              }
            }
            return false;
          });
 
          // Determine if this message has content worth showing
          // (skip empty messages and completed tool calls)
          const hasVisibleContent = message.parts?.some((part) => {
            if (part.type === "text" && part.text.trim()) return true;
            if (part.type.startsWith("tool-")) {
              const toolPart = part as { state?: string; output?: unknown };
              if (toolPart.state === "output-available") {
                const result = toolPart.output as Record<string, unknown>;
                // Only show tool results that need auth (hide successful ones)
                return result?.authorization_required;
              }
            }
            return false;
          });
 
          // Show loading animation for assistant messages still being generated
          const showLoading = message.role === "assistant" && !hasVisibleContent && isLoading;
          // Skip rendering empty messages entirely
          if (!hasVisibleContent && !showLoading) return null;

          return (
            // Align user messages right, assistant messages left
            <div key={message.id} className={message.role === "user" ? "text-right" : ""}>
              <div className={`inline-block p-3 rounded-lg ${
                message.role === "user" ? "bg-blue-600 text-white" : "bg-gray-800"
              }`}>
                {showLoading ? (
                  // Bouncing dots animation while AI is thinking
                  <div className="flex gap-1">
                    <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "0ms" }}></span>
                    <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "150ms" }}></span>
                    <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "300ms" }}></span>
                  </div>
                ) : (
                  // Render each part of the message
                  message.parts?.map((part, i) => {
                    // Text parts: render AI response with markdown formatting
                    if (part.type === "text" && !hasAuthRequired) {
                      return (
                        <div key={i}>
                          <ReactMarkdown components={markdownComponents}>
                            {part.text}
                          </ReactMarkdown>
                        </div>
                      );
                    }
 
                    // Tool parts: check if authorization is needed
                    if (part.type.startsWith("tool-")) {
                      const toolPart = part as { state?: string; output?: unknown };
 
                      if (toolPart.state === "output-available") {
                        const result = toolPart.output as Record<string, unknown>;
 
                        // Show auth UI when Arcade needs user to connect their account
                        if (result?.authorization_required) {
                          const authResponse = result.authorization_response as { url?: string };
                          // Extract tool name from part type (e.g., "tool-Gmail_ListEmails" -> "Gmail_ListEmails")
                          const toolName = part.type.replace("tool-", "");
                          return (
                            <AuthPendingUI
                              key={i}
                              authUrl={authResponse?.url || ""}
                              toolName={toolName}
                              // regenerate() retries the original request after auth succeeds
                              onAuthComplete={() => regenerate()}
                            />
                          );
                        }
                      }
                    }
                    // Hide successful tool results (user just sees the AI's text response)
                    return null;
                  })
                )}
              </div>
            </div>
          );
        })}
        {/* Invisible element at bottom for auto-scroll target */}
        <div ref={messagesEndRef} />
      </div>

      {/* Message input form */}
      <form
        onSubmit={(e) => {
          e.preventDefault();
          if (!input.trim()) return; // Don't send empty messages
          // sendMessage sends to /api/chat and streams the response
          sendMessage({ text: input });
          setInput(""); // Clear input after sending
          inputRef.current?.focus(); // Keep focus on input
        }}
        className="flex gap-2 mt-4"
      >
        <input
          ref={inputRef}
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Ask about your emails or Slack..."
          className="flex-1 p-2 border rounded"
          disabled={isLoading} // Prevent sending while AI is responding
        />
        <button
          type="submit"
          disabled={isLoading || !input.trim()}
          className="px-4 py-2 bg-blue-600 text-white rounded disabled:opacity-50"
        >
          Send
        </button>
      </form>
    </div>
  );
}