@apify/mcp-widgets

反应组件,使 MCP 工具的输出得到认证 。 每个主机的一个源: 认证 Console 使其在自己的反应树中 认证 MCP 服务器 将它们捆绑入它为MCP Apps主机(Claude, ChatGPT)服务的HTML.

安装

pnpm add @apify/mcp-widgets

同伴依赖性 : react, (中文(简体) ), react-dom, (中文(简体) ), styled-components。这些组成部分建立在 @apify/ui-library因此,树也必须被包裹在它的 UiDependencyProvider。 。 。 .

使用量

工具的组件 structuredContent 作为道具,并通过 WidgetHostProvider数字 :

import { ActorSearchWidget, WidgetHostProvider } from '@apify/mcp-widgets';

<WidgetHostProvider host={{ openLink: (url) => window.open(url, '_blank', 'noopener') }}>
    <ActorSearchWidget output={toolResult.structuredContent} />
</WidgetHostProvider>;

ActorRunWidget 只能使它得到什么. LiveActorRunWidget 保持运行新鲜 通过主机 callTool,从小到小 { runId }。 。 。 .

WidgetHost 拥有一名必要的成员, openLink。 。 。 . requestDisplayMode, (中文(简体) ), maxHeight, (中文(简体) ), isInPage 财务报告和审定财务报表 callTool 是可选的:主机具有单一显示模式,没有高度限制,自身iframe或者无法调用MCP工具将其放出.

输出 : ActorSearchWidget, (中文(简体) ), ActorRunWidget, (中文(简体) ), LiveActorRunWidget, (中文(简体) ), ActorSearchDetail, (中文(简体) ), ActorCard, (中文(简体) ), ActorSearchResultsSkeleton, (中文(简体) ), ActorSearchDetailSkeleton, (中文(简体) ), WidgetLayout, (中文(简体) ), SkeletonBlock, (中文(简体) ), WidgetHostProvider, (中文(简体) ), useWidgetHost 和工具输出类型。 Playwright 的测试身份 @apify/mcp-widgets/test-ids。 。 。 .

发展

在平分核心单核内:

pnpm run storybook                        # shared Storybook, section "MCP-Widgets"
pnpm --filter @apify/mcp-widgets test     # unit tests
pnpm --filter @apify/mcp-widgets build    # dist/ (components + d.ts)