# Nuxt MCP Toolkit now supports MCP apps

**Published:** May 19, 2026 | **Authors:** Hugo Richard, Ben Sabic

---

The [Nuxt MCP Toolkit](https://mcp-toolkit.nuxt.dev/) now supports [MCP apps](https://modelcontextprotocol.io/extensions/apps/overview). Your agent tools can return interactive HTML responses that MCP clients like Claude and ChatGPT render inline, rather than plain-text responses.

[Video: Video demo in Claude.ai showing an MCP app made in Nuxt](//videos.ctfassets.net/e5382hct74si/3lqlO1TtxMbKsOS1S0V7rH/c6f8be29a7ef523690eb311a21af18e0/mcp-apps-1080p.mp4)

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.

**app/mcp/weather.vue**
```vue
<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>
```

Read the [Nuxt MCP Toolkit documentation](https://mcp-toolkit.nuxt.dev/apps/overview) to get started.

---

📚 **More updates:** [View all changelog entries](/changelog/sitemap.md) | [Blog](/blog/sitemap.md)