模式与限制

模式

callTool 期间的骨架屏

pending 仅在进行中的 callTool 调用期间会切换为 true —— 非常适合在不丢失先前数据的情况下进行局部 UI 更新：

<button :disabled="pending" @click="callTool('color-picker', { base: nextBase })">
  {{ pending ? '正在混合…' : '试试这个颜色' }}
</button>

适配全屏与内联

主机可以自行将应用以内联方式（较小）挂载，也可以在调用 requestDisplayMode() 后将其展开为全屏。hostContext.displayMode 会跟随主机报告的每次变化，因此可以据此切换布局：

<section :class="['rail', isFullscreen && 'rail-grid']">
  <!-- 内联时水平滚动，全屏时使用 CSS grid -->
</section>

通过工具读取与写入

在 Claude 中（截至 2026 年 9 月），只有只读工具（annotations: { readOnlyHint: true }）才能通过 iframe 发起调用；写入类工具调用会被丢弃并最终超时，无论该工具对模型可见还是仅供应用使用。使用 callTool / useToolCall 读取数据，并通过 sendPrompt 让模型处理写入操作。

应用间工作流

在应用 A 中使用 sendPrompt，并让 LLM 将请求分发到应用 B。用户会感知到平滑的过渡；LLM 仍然在流程中，并且可以携带参数继续传递：

<button @click="sendPrompt(`Generate a typography scale for ${swatch.hex}.`)">
  与字体搭配
</button>

LLM 会从提示中选择正确的工具——保持名称可预测。

CSS 共置

使用 scoped styles 或任何会输出内联样式的 CSS-in-JS 方案。打包器会将所有样式内联到 HTML 中；不会从 iframe 发起外部 CSS 请求。

你目前无法做的事

MCP 应用运行在一个隔离的 iframe 中，无法访问你的 Nuxt 运行时上下文。这意味着：

• ❌ Nuxt UI / Nuxt Image / NuxtLink —— 它们需要父 Nuxt 应用的运行时。
• ❌ 自动导入的 Nuxt composables（useFetch、useState、useRoute、useNuxtApp、…）。
• ❌ Pinia store 或应用级插件 —— 模块图不同。
• ❌ 来自父页面的 cookies、headers、session —— 沙盒化的 origin。

你可以使用的有：

• ✅ Vue 3 + Composition API（自动导入：ref、computed、watch、onMounted、…）。
• ✅ useMcpApp() —— iframe 中唯一的工具包 composable。
• ✅ handler 内部的 $fetch（服务端）—— 调用任何 Nuxt API。
• ✅ 与 SFC 相邻的共置 .ts / .css 辅助文件（打包器会将它们内联）。
• ✅ 无头 UI 库（Reka UI、Headless UI Vue、Floating UI）—— 它们与框架无关。

参考

在寻找底层工具 / 资源 API？请参阅 工具 和 资源。