Nuxt MCP Toolkit now supports MCP apps
Quick Answer
The Nuxt MCP Toolkit now enables the development of MCP apps that provide interactive HTML responses for clients like Claude and ChatGPT.
Quick Take
The Nuxt Toolkit now enables the development of MCP apps that provide interactive HTML responses for clients like Claude and ChatGPT. Developers can use the defineMcpApp macro to create tools that can trigger follow-up prompts and call other tools, enhancing user interaction within the UI.
Key Points
- Developers can create interactive tools using the defineMcpApp macro.
- MCP apps can return HTML responses instead of plain text.
- The toolkit bundles Vue SFCs into self-contained HTML files at build time.
- Tools can call themselves with new parameters for dynamic interaction.
- Documentation is available for getting started with the Nuxt MCP Toolkit.
📖 Reader Mode
~1 min read1 min read
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.
— Originally published at vercel.com
Want this in your inbox every morning?
Daily brief at your local 8am — bilingual EN/中文, free.
More from Vercel AI
See more →
The Agent Stack
The Agent Stack by Vercel AI provides essential building blocks for creating production-grade agents, enabling seamless integration across multiple AI models and secure operations. It features components like AI Gateway for model routing, Workflow SDK for durable execution, and Vercel Connect for scoped access, streamlining agent development and deployment across various platforms.
