Nuxt MCP Toolkit now supports MCP apps

1 min read

<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>