Skip to main content
The @frontmcp/react/ai entry point bridges FrontMCP tools to popular AI SDK formats. Tools are automatically formatted for the target platform and results are converted back.

​
useAITools

The core hook that formats MCP tools for a specific platform. 
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
}

​
Parameters

ParameterTypeDescription
platformSupportedPlatform'openai' | 'claude' | 'vercel-ai'
options.serverstringTarget a named server

​
Return Value

FieldTypeDescription
toolsPlatformToolsMap[P] | nullTools formatted for the target platform
callTool(name, args) => Promise<FormattedToolResult>Execute a tool and format the result
loadingbooleanTrue while formatting tools
errorError | nullFormatting or execution error

​
useTools

Higher-level hook that adds batch tool call processing via processPlatformToolCalls. 
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);
}

​
Return Value

FieldTypeDescription
toolsPlatformToolsMap[P] | nullFormatted tools
processToolCalls(calls) => Promise<PlatformToolCallsOutput[P]>Batch process tool calls
loadingbooleanLoading state
errorError | nullError state

​
createToolCallHandler

Non-React utility for vanilla JavaScript usage. Creates a handler that executes tools and formats results. 
import { createToolCallHandler } from '@frontmcp/react/ai';

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

​
Platform Examples

​
OpenAI

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...
    }
  }
}

​
Vercel AI SDK

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
  });
}

​
Claude (Anthropic)

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 }
}

​
Multi-Server AI Tools

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