The Nuxt MCP Toolkit now supports MCP apps. Your agent tools can return interactive HTML responses that MCP clients like Claude and ChatGPT render inline, rather than plain-text responses.
Declare a tool with the defineMcpApp macro, then read pre-hydrated data, trigger follow-up prompts, or call other tools from inside the UI with the useMcpApp composable. The toolkit bundles each Vue SFC into a self-contained HTML file at build time and serves it from your MCP endpoint.
<script setup lang="ts">
import { z } from 'zod'
defineMcpApp({
name: 'weather',
description: 'Show the forecast for a city',
inputSchema: {
city: z.string().describe('City to get the forecast for'),
},
handler: async ({ city }) => ({
structuredContent: await $fetch(`/api/weather?city=${city}`),
}),
})
const { data, callTool } = useMcpApp<{ city: string, summary: string, tempC: number }>()
</script>
<template>
<article>
<h1>{{ data?.city }}</h1>
<p>{{ data?.summary }}, {{ data?.tempC }}°C</p>
<button @click="callTool('weather', { city: 'London' })">
Check London
</button>
</article>
</template>
A weather tool that renders inline in the host UI and can call itself with a new city
Read the Nuxt MCP Toolkit documentation to get started.