useMcpApp() 桥接

const {
  initialData,        // Ref<T | null>          — 视图收到的首个有效载荷快照，此后不会更新
  data,               // Ref<T | null>          — 主机推送的 structuredContent，可由 callTool 刷新
  loading,            // Ref<boolean>           — 收到首个有效载荷或调用失败前为 true
  error,              // Ref<Error | null>      — 桥接、传输或有效载荷错误
  pending,            // Ref<boolean>           — callTool() 执行期间为 true
  hostContext,        // Ref<HostContext | null> — 主题、显示模式、区域设置等
  hostCapabilities,   // Ref<HostCapabilities | null> — 主机支持的功能
  callTool,           // (name, params?) => Promise<T | null> — 重新调用任意 MCP 工具
  sendPrompt,         // (prompt: string) => void              — 将消息推送到聊天中
  openLink,           // (url: string) => void                 — 请求主机打开 URL
  requestDisplayMode, // (mode) => Promise<DisplayMode> — 切换内联、全屏或画中画模式
  updateModelContext, // ({ content?, structuredContent? }) => Promise<void> — 为下一轮对话更新上下文
  downloadFile,       // (contents) => Promise<void> — 通过主机保存文件
} = useMcpApp<MyPayload>()

<script setup lang="ts">
const { initialData, data, callTool } = useMcpApp<{ listId: string }>()

async function refresh() {
  const result = await callTool('list_todos', { listId: initialData.value!.listId })
  // `data` 现在保存最新的工具结果；`initialData` 仍然包含 `{ listId }`
}
</script>

<template>
  <section v-if="loading" class="skeleton" />
  <section v-else-if="data" class="content">
    {{ data.swatches.length }} 个色板，来自 {{ data.base }}
  </section>
</template>

type DisplayMode = 'inline' | 'fullscreen' | 'pip'

interface HostContext {
  theme?: 'light' | 'dark'
  displayMode?: DisplayMode
  availableDisplayModes?: DisplayMode[]
  containerDimensions?: { width?: number, height?: number, maxWidth?: number, maxHeight?: number }
  locale?: string
  timeZone?: string
  platform?: 'web' | 'desktop' | 'mobile'
}

<script setup lang="ts">
const { hostContext } = useMcpApp()
const isDark = computed(() => hostContext.value?.theme === 'dark')
const isFullscreen = computed(() => hostContext.value?.displayMode === 'fullscreen')
</script>

<template>
  <main :data-theme="isDark ? 'dark' : 'light'" :data-mode="isFullscreen ? 'fullscreen' : 'inline'">
    …
  </main>
</template>

<script setup lang="ts">
const { hostCapabilities } = useMcpApp()
const canDownload = computed(() => !!hostCapabilities.value?.downloadFile)
</script>

<button @click="sendPrompt(`Use ${swatch.name} (${swatch.hex}) as the brand colour.`)">
  使用此颜色
</button>

<script setup lang="ts">
const { data, pending, callTool } = useMcpApp<PalettePayload>()

async function refresh(base: string) {
  await callTool('color-picker', { base })
}
</script>

<button @click="openLink(`https://example.com/colors/${swatch.hex.slice(1)}`)">
  在网页中查看
</button>

<script setup lang="ts">
const { hostContext, requestDisplayMode } = useMcpApp()
const isFullscreen = computed(() => hostContext.value?.displayMode === 'fullscreen')
</script>

<template>
  <button @click="requestDisplayMode(isFullscreen ? 'inline' : 'fullscreen')">
    {{ isFullscreen ? '收起' : '展开' }}
  </button>
</template>

const { updateModelContext } = useMcpApp()

await updateModelContext({
  content: [{ type: 'text', text: `The user selected ${swatch.name} (${swatch.hex}).` }],
  structuredContent: { selected: swatch.hex },
})

const { downloadFile } = useMcpApp()

await downloadFile([{
  type: 'resource',
  resource: { uri: 'file:///palette.json', mimeType: 'application/json', text: JSON.stringify(palette) },
}])

import type { McpAppRequestError } from '@nuxtjs/mcp-toolkit/app'

try {
  await downloadFile([file])
}
catch (error) {
  if (!(error as McpAppRequestError).cancelled) showError()
}

import { useToolCall } from '@nuxtjs/mcp-toolkit/app'

const png = useToolCall<{ filename: string, png: string }>('get_icon_png')

const result = await png.call({ iconId }) // `png.pending`, `png.error`, `png.result` track the call