AI SDK Integration

import { useAITools } from '@frontmcp/react/ai';

function AIChat() {
  const { tools, callTool, loading, error } = useAITools('openai');

  // `tools` is formatted for the OpenAI SDK
  // `callTool(name, args)` calls the MCP tool and formats the result
}

import { useTools } from '@frontmcp/react/ai';

function ChatAgent() {
  const { tools, processToolCalls, loading } = useTools('openai');

  // Process a batch of tool calls from the AI response
  const results = await processToolCalls(toolCalls);
}

import { createToolCallHandler } from '@frontmcp/react/ai';

const handler = createToolCallHandler(server, 'openai');
const result = await handler.callTool('search', { query: 'react hooks' });

import { useTools } from '@frontmcp/react/ai';
import OpenAI from 'openai';

function OpenAIChat() {
  const { tools, processToolCalls } = useTools('openai');
  // ⚠️ dangerouslyAllowBrowser exposes your API key in client-side code.
  // In production, proxy requests through your backend instead.
  const openai = new OpenAI({ apiKey: '...', dangerouslyAllowBrowser: true });

  async function chat(message: string) {
    const response = await openai.chat.completions.create({
      model: 'gpt-4o',
      messages: [{ role: 'user', content: message }],
      tools: tools ?? undefined,
    });

    const toolCalls = response.choices[0].message.tool_calls;
    if (toolCalls) {
      const results = await processToolCalls(toolCalls);
      // Continue the conversation with tool results...
    }
  }
}

import { useTools } from '@frontmcp/react/ai';
import { useChat } from 'ai/react';

function VercelAIChat() {
  const { tools, processToolCalls } = useTools('vercel-ai');

  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/chat',
    // Pass tools to the chat configuration
  });
}

import { useTools } from '@frontmcp/react/ai';

function ClaudeChat() {
  const { tools, processToolCalls } = useTools('claude');

  // `tools` is formatted as Claude tool_use blocks
  // Each tool has: { name, description, input_schema }
}

const { tools: analyticsTools } = useAITools('openai', { server: 'analytics' });
const { tools: mainTools } = useAITools('openai'); // defaults to primary server