Build an AI Chatbot with Arcade and Vercel AI SDK

npx create-next-app@latest arcade-chatbot
cd arcade-chatbot

ARCADE_API_KEY={arcade_api_key}
ARCADE_USER_ID={arcade_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/index";

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.

For Gmail:
- To find sent emails, use the query parameter with "in:sent"
- To find received emails, use "in:inbox" or no query

After completing any action (sending emails, Slack messages, etc.), always confirm what you did with specific details.

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 v6 format
function toVercelTools(arcadeTools: Record<string, unknown>): Record<string, unknown> {
  const vercelTools: Record<string, unknown> = {};

  for (const [name, tool] of Object.entries(arcadeTools)) {
    const t = tool as { description: string; parameters: unknown; execute: Function; };
    vercelTools[name] = {
      description: t.description,
      inputSchema: t.parameters, // AI SDK v6 uses inputSchema, not parameters
      execute: async (input: Record<string, unknown>) => {
        const cleanedInput = stripNullValues(input);
        return t.execute(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";

import { useChat } from "@ai-sdk/react";
import { useState, useRef, useEffect } from "react";

// AI Elements components for chat UI
import {
  Conversation,
  ConversationContent,
} from "@/components/ai-elements/conversation";
import {
  Message,
  MessageContent,
  MessageResponse,
} from "@/components/ai-elements/message";
import {
  PromptInput,
  PromptInputTextarea,
  PromptInputFooter,
  PromptInputSubmit,
} from "@/components/ai-elements/prompt-input";
import { Spinner } from "@/components/ui/spinner";

// Component that handles Arcade's OAuth authorization flow
function AuthPendingUI({
  authUrl,
  toolName,
  onAuthComplete,
}: {
  authUrl: string;
  toolName: string;
  onAuthComplete: () => void;
}) {
  const [status, setStatus] = useState<"initial" | "waiting" | "completed">("initial");
  const pollingRef = useRef<NodeJS.Timeout | null>(null);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
  const hasCompletedRef = useRef(false);
  const onAuthCompleteRef = useRef(onAuthComplete);

  // Keep callback ref updated
  useEffect(() => {
    onAuthCompleteRef.current = onAuthComplete;
  }, [onAuthComplete]);

  // Poll /api/auth/status every 2 seconds after user clicks authorize
  useEffect(() => {
    if (status !== "waiting" || !toolName || hasCompletedRef.current) return;

    const pollStatus = async () => {
      try {
        const res = await fetch("/api/auth/status", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ toolName }),
        });
        const data = await res.json();

        if (data.status === "completed" && !hasCompletedRef.current) {
          hasCompletedRef.current = true;
          if (pollingRef.current) clearInterval(pollingRef.current);
          setStatus("completed");
          timeoutRef.current = setTimeout(() => onAuthCompleteRef.current(), 1500);
        }
      } catch (error) {
        console.error("Polling error:", error);
      }
    };

    pollingRef.current = setInterval(pollStatus, 2000);
    return () => {
      if (pollingRef.current) clearInterval(pollingRef.current);
    };
  }, [status, toolName]);

  const displayName = toolName.split("_")[0] || toolName;

  const handleAuthClick = () => {
    if (!authUrl) return; // Don't open empty URLs
    window.open(authUrl, "_blank");
    setStatus("waiting");
  };

  return (
    <div>
      {status === "completed" ? (
        <p className="text-green-400">✓ {displayName} authorized</p>
      ) : !authUrl ? (
        <p className="text-red-400">Authorization URL not available</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 { messages, sendMessage, regenerate, status } = useChat();
  const isLoading = status === "submitted" || status === "streaming";
  const inputRef = useRef<HTMLTextAreaElement>(null);

  // Refocus input after response completes
  useEffect(() => {
    if (!isLoading && inputRef.current) {
      inputRef.current.focus();
    }
  }, [isLoading]);

  return (
    <div className="flex flex-col h-screen max-w-2xl mx-auto">
      {/* Conversation handles auto-scrolling */}
      <Conversation className="flex-1">
        <ConversationContent>
          {messages.map((message) => {
            // Check if any tool part requires authorization
            const authPart = message.parts?.find((part) => {
              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>;
                  return result?.authorization_required;
                }
              }
              return false;
            });

            // Get text content from message parts
            const textContent = message.parts
              ?.filter((part) => part.type === "text")
              .map((part) => part.text)
              .join("");

            // Skip empty messages without auth prompts
            if (!textContent && !authPart && !(message.role === "assistant" && isLoading)) {
              return null;
            }

            return (
              <Message key={message.id} from={message.role}>
                <MessageContent>
                  {/* Show loader while assistant is thinking */}
                  {message.role === "assistant" && !textContent && !authPart && isLoading ? (
                    <Spinner />
                  ) : authPart ? (
                    // Show auth UI when Arcade needs authorization
                    (() => {
                      const toolPart = authPart as { toolName?: string; output?: unknown };
                      const result = toolPart.output as Record<string, unknown>;
                      const authResponse = result?.authorization_response as { url?: string };
                      // In Vercel AI SDK v6, toolName is a property on the part, not derived from type
                      const toolName = toolPart.toolName || "";
                      return (
                        <AuthPendingUI
                          authUrl={authResponse?.url || ""}
                          toolName={toolName}
                          onAuthComplete={() => regenerate()}
                        />
                      );
                    })()
                  ) : (
                    <MessageResponse>{textContent}</MessageResponse>
                  )}
                </MessageContent>
              </Message>
            );
          })}
        </ConversationContent>
      </Conversation>

      {/* PromptInput handles the form with auto-resize textarea */}
      <div className="p-4">
        <PromptInput
          onSubmit={({ text }) => {
            if (text.trim()) {
              sendMessage({ text });
            }
          }}
        >
          <PromptInputTextarea
            ref={inputRef}
            placeholder="Ask about your emails or Slack..."
            disabled={isLoading}
          />
          <PromptInputFooter>
            <div /> {/* Spacer */}
            <PromptInputSubmit status={status} disabled={isLoading} />
          </PromptInputFooter>
        </PromptInput>
      </div>
    </div>
  );
}