Build an AI Chatbot with Arcade and TanStack AI

@import "tailwindcss";
@plugin "@tailwindcss/typography";

ARCADE_API_KEY={arcade_api_key}
ARCADE_USER_ID={arcade_user_id}
OPENAI_API_KEY=your_openai_api_key

import { createFileRoute } from "@tanstack/react-router";
import { toServerSentEventsResponse, chat, toolDefinition } from "@tanstack/ai";
import type { JSONSchema } from "@tanstack/ai";
import { openaiText } from "@tanstack/ai-openai";
import { Arcade } from "@arcadeai/arcadejs";
 
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
 
For Slack:
- Use Slack.ListConversations to see channels and DMs
- Use Slack.ListMessages to read messages from a channel or DM
- Use Slack.SendDmToUser to send a direct message
- Use Slack.SendMessageToChannel to post in a channel
 
After completing any action, 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.`,
};
 
// Empty JSON Schema for tools with no parameters
const emptySchema: JSONSchema = { type: "object", properties: {} };
 
// Strip null values from tool inputs
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;
}
 
// Maximum characters for any string field in tool output
const MAX_STRING_CHARS = 300;
 
/**
 * Recursively truncates all large strings in objects/arrays.
 * This prevents token overflow when tool results pass back to the LLM.
 */
function truncateDeep(obj: unknown): unknown {
  if (obj === null || obj === undefined) return obj;
 
  if (typeof obj === "string") {
    if (obj.length > MAX_STRING_CHARS) {
      return obj.slice(0, MAX_STRING_CHARS) + "...";
    }
    return obj;
  }
 
  if (Array.isArray(obj)) {
    return obj.map(truncateDeep);
  }
 
  if (typeof obj === "object") {
    const result: Record<string, unknown> = {};
    for (const [key, value] of Object.entries(obj as Record<string, unknown>)) {
      result[key] = truncateDeep(value);
    }
    return result;
  }
 
  return obj;
}
 
// Maximum number of recent messages to keep in context
const MAX_MESSAGES = 10;
 
/**
 * Truncates message content and limits message history to prevent context overflow.
 */
function prepareMessages(messages: unknown[]): unknown[] {
  const recentMessages = messages.slice(-MAX_MESSAGES);
  return recentMessages.map((msg) => truncateDeep(msg));
}
 
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 TanStack AI tool format
  return uniqueTools.map((tool) => {
    // Use Arcade's JSON Schema directly - TanStack AI accepts it natively
    const params = tool.input?.parameters as JSONSchema | undefined;
    const hasValidSchema = params && params.type && params.type !== "None";
    const inputSchema = hasValidSchema ? params : emptySchema;
 
    return toolDefinition({
      name: tool.qualified_name.replace(".", "_"),
      description: tool.description || "",
      inputSchema,
    }).server(async (input: unknown) => {
      const typedInput = input as Record<string, unknown>;
      const cleanedInput = stripNullValues(typedInput);
 
      try {
        // Check authorization status first
        const authResponse = await arcade.tools.authorize({
          tool_name: tool.qualified_name,
          user_id: userId,
        });
 
        if (authResponse.status !== "completed") {
          return {
            authorization_required: true,
            authorization_response: {
              url: authResponse.url,
            },
            tool_name: tool.qualified_name,
          };
        }
 
        // Execute the tool
        const result = await arcade.tools.execute({
          tool_name: tool.qualified_name,
          user_id: userId,
          input: cleanedInput,
        });
 
        // Truncate large strings to prevent context window overflow
        const output = result.output?.value ?? result;
        return truncateDeep(output);
      } catch (error) {
        console.error(`Tool execution error for ${tool.qualified_name}:`, error);
        throw error;
      }
    });
  });
}
 
// Server route with POST handler for chat streaming
export const Route = createFileRoute("/api/chat")({
  server: {
    handlers: {
      POST: async ({ request }) => {
        const body = await request.json();
        const userId = process.env.ARCADE_USER_ID || "default-user";
        const tools = await getArcadeTools(userId);
 
        // Prepare messages: limit history and truncate large content
        const preparedMessages = prepareMessages(body.messages || []);
 
        const stream = chat({
          adapter: openaiText("gpt-4o"),
          systemPrompts: [config.systemPrompt],
          messages: preparedMessages,
          tools,
        });
 
        return toServerSentEventsResponse(stream);
      },
    },
  },
});

import { createServerFn } from "@tanstack/react-start";
import { Arcade } from "@arcadeai/arcadejs";
 
export const checkAuthStatus = createServerFn({ method: "POST" })
  .inputValidator((data: { toolName: string }) => data)
  .handler(async ({ data }) => {
    if (!data.toolName) {
      throw new Error("toolName required");
    }
 
    const arcade = new Arcade();
    const userId = process.env.ARCADE_USER_ID || "default-user";
 
    const authResponse = await arcade.tools.authorize({
      tool_name: data.toolName,
      user_id: userId,
    });
 
    return { status: authResponse.status };
  });

import { createFileRoute } from "@tanstack/react-router";
import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
import { useState, useRef, useEffect } from "react";
import ReactMarkdown from "react-markdown";
import { checkAuthStatus } from "../functions/auth";
 
// 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 hasCompletedRef = useRef(false);
  const onAuthCompleteRef = useRef(onAuthComplete);
 
  useEffect(() => {
    onAuthCompleteRef.current = onAuthComplete;
  }, [onAuthComplete]);
 
  // Poll for auth completion after user clicks authorize
  useEffect(() => {
    if (status !== "waiting" || !toolName || hasCompletedRef.current) return;
 
    const pollStatus = async () => {
      try {
        const result = await checkAuthStatus({ data: { toolName } });
 
        if (result.status === "completed" && !hasCompletedRef.current) {
          hasCompletedRef.current = true;
          if (pollingRef.current) clearInterval(pollingRef.current);
          setStatus("completed");
          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;
    window.open(authUrl, "_blank");
    setStatus("waiting");
  };
 
  return (
    <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
      {status === "completed" ? (
        <p className="text-green-600 font-medium">
          {displayName} authorized successfully
        </p>
      ) : !authUrl ? (
        <p className="text-red-600">Authorization URL not available</p>
      ) : (
        <div className="flex items-center gap-3">
          <span>Authorize access to {displayName}?</span>
          <button
            onClick={handleAuthClick}
            className="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium"
          >
            {status === "waiting" ? "Retry" : "Authorize"}
          </button>
        </div>
      )}
    </div>
  );
}
 
function Chat() {
  const [input, setInput] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);
 
  const { messages, sendMessage, reload, isLoading } = useChat({
    connection: fetchServerSentEvents("/api/chat"),
  });
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (input.trim() && !isLoading) {
      sendMessage(input);
      setInput("");
    }
  };
 
  // 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 p-4">
      <h1 className="text-2xl font-bold mb-4">Arcade + TanStack AI Chat</h1>
 
      {/* Messages */}
      <div className="flex-1 overflow-y-auto space-y-4 mb-4">
        {messages
          .filter((message) => {
            // Filter out empty assistant messages (tool calls without text)
            if (message.role === "assistant") {
              const textParts = (message.parts || []).filter(
                (p: { type: string }) => p.type === "text"
              );
              const textContent = textParts
                .map((p: any) => p.content || "")
                .join("")
                .trim();
              const toolResultParts = (message.parts || []).filter(
                (p: { type: string }) => p.type === "tool-result"
              );
              const authRequired = toolResultParts.find(
                (result: any) => result.output?.authorization_required
              );
              return textContent.length > 0 || authRequired;
            }
            return true;
          })
          .map((message) => {
            const textParts = (message.parts || []).filter(
              (p: { type: string }) => p.type === "text"
            );
            const toolResultParts = (message.parts || []).filter(
              (p: { type: string }) => p.type === "tool-result"
            );
            const textContent = textParts
              .map((p: { content?: string }) => p.content || "")
              .join("");
            const authRequired = toolResultParts.find(
              (result: { output?: { authorization_required?: boolean } }) =>
                result.output?.authorization_required
            );
 
            return (
              <div
                key={message.id}
                className={`p-4 rounded-lg ${
                  message.role === "assistant"
                    ? "bg-gray-100"
                    : "bg-blue-100 ml-8"
                }`}
              >
                <div className="font-semibold text-sm text-gray-500 mb-1">
                  {message.role === "assistant" ? "Assistant" : "You"}
                </div>
 
                {authRequired ? (
                  <AuthPendingUI
                    authUrl={
                      (
                        authRequired as {
                          output?: {
                            authorization_response?: { url?: string };
                          };
                        }
                      )?.output?.authorization_response?.url || ""
                    }
                    toolName={
                      (authRequired as { output?: { tool_name?: string } })
                        ?.output?.tool_name || ""
                    }
                    onAuthComplete={() => reload()}
                  />
                ) : (
                  <div className="prose prose-sm max-w-none">
                    <ReactMarkdown>{textContent}</ReactMarkdown>
                  </div>
                )}
              </div>
            );
          })}
 
        {isLoading &&
          (() => {
            // Only show loading if there's no assistant message with content
            const lastMessage = messages[messages.length - 1];
            const hasAssistantContent =
              lastMessage?.role === "assistant" &&
              (lastMessage.parts || [])
                .filter((p: { type: string }) => p.type === "text")
                .some((p: any) => (p.content || "").trim().length > 0);
 
            if (hasAssistantContent) return null;
 
            return (
              <div className="p-4 rounded-lg bg-gray-100">
                <div className="font-semibold text-sm text-gray-500 mb-1">
                  Assistant
                </div>
                <div className="animate-pulse">Thinking...</div>
              </div>
            );
          })()}
      </div>
 
      {/* Input form */}
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          ref={inputRef}
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Ask about your emails or Slack..."
          disabled={isLoading}
          className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button
          type="submit"
          disabled={isLoading || !input.trim()}
          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          Send
        </button>
      </form>
    </div>
  );
}
 
export const Route = createFileRoute("/")({
  component: Chat,
});