@ frontmcp/ 反应

@frontmcp/react 在 React 应用程序内运行 FrontMCP 服务器。 您使用 create(),在同一进程中,和 FrontMcpProvider 连接客户端到它。 组件调用其工具,读取其资源并用钩子得到其提示,在被挂起时可以添加自有工具,因此一个模型可以填入卡片,绕行应用或读取其状态. 用它来制作一个反应软件 一个代理可以驱动的东西。 要构建用户界面, 请使用 ChatGPT 或 Claude 等 AI 主机内的工具显示 @frontmcp/ui 换句话说.

安装

npm install @frontmcp/react react react-dom

• react 财务报告和审定财务报表 react-dom 18或19是同伴依赖关系.
• @frontmcp/sdk 财务报告和审定财务报表 @frontmcp/utils 带着它,在同一版本. @frontmcp/react 重新从 SDK 中输出应用程序需要的内容(create, (中文(简体) ), connect 及其变体、装饰器及其功能形式、上下文类和 z),所以你不会导入 @frontmcp/sdk 你自己来 npm 7 并随后安装其端点 @frontmcp/lazy-zod,以及 zod 带着它.
• react-router-dom 7是一个可选的同伴,仅需要用于 @frontmcp/react/router。 。 。 .
• 在浏览器中,一个跟随 browser 导出条件, 如 Vite , 选择 SDK 的浏览器构建 (在浏览器中运行) (中文(简体) ). 在Node,用于测试或服务器渲染,使用Node.js 24或后期.

使用量

一个工具,服务器,以及一个调用它的组件:

import { create, FrontMcpProvider, Tool, ToolContext, useCallTool, z } from '@frontmcp/react';

@Tool({ name: 'greet', description: 'Greet someone by name', inputSchema: { name: z.string() } })
class GreetTool extends ToolContext {
  async execute({ name }: { name: string }) {
    return { message: `Hello, ${name}!` };
  }
}

const server = await create({ info: { name: 'my-app', version: '1.0.0' }, tools: [GreetTool] });

function Greeter() {
  const [greet, { data, loading, error }] = useCallTool<{ name: string }, { structuredContent?: { message: string } }>(
    'greet',
  );

  return (
    <div>
      <button disabled={loading} onClick={() => greet({ name: 'Ada' })}>
        Greet
      </button>
      {data?.structuredContent && <p>{data.structuredContent.message}</p>}
      {error && <p role="alert">{error.message}</p>}
    </div>
  );
}

export function App() {
  return (
    <FrontMcpProvider server={server}>
      <Greeter />
    </FrontMcpProvider>
  );
}

单击按钮显示 Hello, Ada!。 。 。 . useCallTool() 返回时 [call, state, reset],以及 data 是客户端得到的 MCP 结果,所以工具的返回值在 data.structuredContent。一个失败的工具会随着 isError: true 内 data· ; error 只有在无法打电话时才设定,例如 FrontMCP not connected装饰者需要 "experimentalDecorators": true 内 tsconfig.json。 。 。 .

入境点

FrontMcpProvider

钩子

钩子都拿来 { server: 'name' } 用来使用提供商之一的 servers。 。 。 .

从组件中给模型一个工具

import { useDynamicTool, z } from '@frontmcp/react';

export function Cart({ isLoggedIn }: { isLoggedIn: boolean }) {
  useDynamicTool({
    name: 'add_to_cart',
    description: 'Add an item to the shopping cart',
    schema: z.object({ itemId: z.string(), quantity: z.number().optional() }),
    execute: async ({ itemId, quantity }) => {
      addToCart(itemId, quantity ?? 1);
      return { content: [{ type: 'text', text: 'Added to cart' }] };
    },
    enabled: isLoggedIn,
  });

  return <div>Cart</div>;
}

对输入进行核对 schema 在此之前 execute 运行,和 execute 把它打出来 一个生的JSON Schema在 inputSchema 还行 提供者将工具登记在服务器上,作为真正的工具,通过 server.registerTool(),所以它的呼叫贯穿了服务器的流量(插件钩子,权威, availableWhen),每个客户端都看到了,一个页面内代理通过 @frontmcp/plugin-webmcp 包含。 服务器已经存在的名称被拒绝并通过提供者报告 onError。 。 。 .

让模型显示组件

mcpComponent() 包入一个组件,使一个模型能够显示它:当它挂载时,它会记录一个工具,以及工具的输入,对照 schema,成为组件的道具.

import { mcpComponent, z } from '@frontmcp/react';

export const WeatherCard = mcpComponent(
  ({ city, temp }) => (
    <div>
      <h2>{city}</h2>
      <p>{temp}°</p>
    </div>
  ),
  {
    name: 'show_weather',
    description: 'Show the weather for a city',
    schema: z.object({ city: z.string(), temp: z.number() }),
    fallback: <p>Waiting for weather data…</p>,
  },
);

// Render it like any component: <WeatherCard />

支持你通过自己,喜欢 <WeatherCard city="Oslo" />并被合并到模型的。 打电话 mcpComponent() 在模块级别,不在一个组件内。 第一个论据也可能是包裹着的懒惰的输入 mcpLazy(() => import('./HeavyChart')),或 null 带有 columns 选项,用于普通表格,工具使用时 { rows: [...] }数字 :

export const OrderTable = mcpComponent(null, {
  name: 'show_orders',
  description: 'Show a list of orders',
  schema: z.object({ id: z.string(), product: z.string(), price: z.number() }),
  columns: [
    { key: 'id', header: 'Order ID' },
    { key: 'product', header: 'Product' },
    { key: 'price', header: 'Price', render: (value) => `$${value}` },
  ],
});

构成部分

显示应用状态

每个适配器在提供者 stores 成为全州的资源(state://<name>),每个选择者的资源(state://<name>/<selector>)和每项行动的工具(<name>_<action>:

import { createStore, FrontMcpProvider, reduxStore, valtioStore } from '@frontmcp/react';

const stores = [
  reduxStore({
    store: todoStore,
    selectors: { todos: (state) => (state as { todos: unknown[] }).todos },
    actions: { addTodo: (text) => ({ type: 'todos/add', text }) },
  }),
  valtioStore({ proxy: settings, subscribe, paths: { userName: 'user.name' } }),
  createStore({ name: 'counter', getState: getCounter, subscribe: onCounterChange }),
];

export function Root() {
  return (
    <FrontMcpProvider server={server} stores={stores}>
      <App />
    </FrontMcpProvider>
  );
}

reduxStore 命名其存储 redux 除非你通过 name,并发送每个动作创建者返回的内容. valtioStore 默认为 valtio传过来 subscribe 从 valtio/utils保留 stores 组件外的数组。 仅在组件挂载时曝光商店, 请使用来自 @frontmcp/react/state 具有相同选项的: useReduxResource(), (中文(简体) ), useValtioResource(),以及 useStoreResource(),这需要 createStore()选择 那个 useStoreResource() 注册商店; 从 @frontmcp/react 读取 state:// 资源.

将 API 操作注册为工具

import { createFetchClient, parseOpenApiSpec, useApiClient } from '@frontmcp/react/api';

const operations = parseOpenApiSpec(openApiDocument);
const client = createFetchClient();

export function ApiTools() {
  useApiClient({ baseUrl: 'https://api.example.com', operations, client });
  return null;
}

每个操作都变成一个工具 api_<operationId> (一组) prefix 更改 api) (中文(简体) ). client 使用任意 HttpClient对象 request({ method, url, headers, body? }),因此您可以使用轴或客户端添加认证头.

把工具交给AI SDK

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

export function useOpenAITools() {
  const { tools, callTool, loading } = useAITools('openai');
  return { tools, callTool, ready: !loading && tools !== null };
}

tools 是服务器的工具列表,组件的工具包含在平台的格式中; callTool(name, args) 运行工具并转换其结果. useAITools() 带 "openai", (中文(简体) ), "claude", (中文(简体) ), "langchain", (中文(简体) ), "vercel-ai" 或者说 "raw"。 。 。 . useTools(platform),用于 "openai", (中文(简体) ), "claude" 或者说 "vercel-ai"返回 processToolCalls(calls) 相反,它运行了一批模型的工具调用并返回要发送的信件. 外面的反应, createToolCallHandler(server, platform) 也给你一样的 callTool。将 API 密钥保存在自己的服务器上.

让一个模型在应用程序周围移动

将路由器条目放入服务器并呼叫 useRouterBridge() 在路由器和提供者的组件中:

import { BrowserRouter, Route, Routes } from 'react-router-dom';

import { create, FrontMcpProvider } from '@frontmcp/react';
import { createRouterEntries, useRouterBridge } from '@frontmcp/react/router';

const { tools, resources } = createRouterEntries();
const server = await create({ info: { name: 'my-app', version: '1.0.0' }, tools, resources });

function RouterBridge() {
  useRouterBridge();
  return null;
}

export function App() {
  return (
    <BrowserRouter>
      <FrontMcpProvider server={server}>
        <RouterBridge />
        <Routes>
          <Route path="/home" element={<h1>Home</h1>} />
          <Route path="/settings" element={<h1>Settings</h1>} />
        </Routes>
      </FrontMcpProvider>
    </BrowserRouter>
  );
}

然后服务器有 navigate 工具 ({ path, replace? }页:1 go_back 工具与工具 route://current 资源. useRouterBridge() 只连接 React 路由器到它们; 没有它挂载, 它们就回答 Router bridge not connected。 。 。 .

文档

• @frontmcp/react 参考文献:提供者, serverRegistry,存储,在浏览器中运行,在节点测试
• 反应钩: 每个钩子,包括 /state, (中文(简体) ), /api 财务报告和审定财务报表 /ai
• 反应组件数字 : mcpComponent(),表单, DynamicRenderer, DOM 资源,路由器工具
• create(): 构建服务商连接到的服务器

相关软件包

• @frontmcp/sdk: 服务器框架; create()工具、资源和提示来自此.
• @frontmcp/plugin-webmcp:向内浏览器代理提供服务器的工具,组件的工具包括.
• @frontmcp/ui: 对在 AI 主机内渲染部件的反应组件和钩子 .

捐款

资料来源: libs/react欢迎提出问题和拉动请求;见 捐款额。 。 。 .

许可证

阿帕奇2.0 (英语). 见 自由主义。 。 。 .