Nuxt MCP Toolkit now supports MCP apps
Mirrored from Vercel — AI for archival readability. Support the source by reading on the original site.
1 min read
May 19, 2026
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.
app/mcp/weather.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>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.
Discussion (0)
Sign in to join the discussion. Free account, 30 seconds — email code or GitHub.
Sign in →No comments yet. Sign in and be the first to say something.