fix: mcp-toolkit cloudflare async + nuxthub 0.10

Author: onmax

.vitepress/auto-imports.d.ts

@@ -48,7 +48,6 @@ declare global {
   const isRef: typeof import('vue').isRef
   const isShallow: typeof import('vue').isShallow
   const makeDestructurable: typeof import('@vueuse/core').makeDestructurable
-  const manualResetRef: typeof import('@vueuse/core').manualResetRef
   const markRaw: typeof import('vue').markRaw
   const nextTick: typeof import('vue').nextTick
   const onActivated: typeof import('vue').onActivated
@@ -84,7 +83,6 @@ declare global {
   const refAutoReset: typeof import('@vueuse/core').refAutoReset
   const refDebounced: typeof import('@vueuse/core').refDebounced
   const refDefault: typeof import('@vueuse/core').refDefault
-  const refManualReset: typeof import('@vueuse/core').refManualReset
   const refThrottled: typeof import('@vueuse/core').refThrottled
   const refWithControl: typeof import('@vueuse/core').refWithControl
   const resolveComponent: typeof import('vue').resolveComponent

.vitepress/theme/components/Chat/ChatInput.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ loading?: boolean }>()
+const emit = defineEmits<{ submit: [content: string] }>()
+
+const input = ref('')
+
+function handleSubmit() {
+  const content = input.value.trim()
+  if (!content)
+    return
+  emit('submit', content)
+  input.value = ''
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault()
+    handleSubmit()
+  }
+}
+</script>
+
+<template>
+  <form flex="~ gap-12" mt-16 @submit.prevent="handleSubmit">
+    <textarea
+      v-model="input" :disabled="loading"
+
+      border="~ neutral-300 focus:blue"
+      text="14 neutral" placeholder="Ask about Nimiq..."
+      ring="focus:1 focus:blue" outline-none rounded-6 bg-neutral-0 flex-1 max-h-200 min-h-48 resize-y transition-colors f-p-sm
+      @keydown="handleKeydown"
+    />
+    <button
+      type="submit" :disabled="loading || !input.trim()"
+
+      flex="~ items-center justify-center gap-8"
+      px-16 outline-none h-48 transition-opacity nq-pill nq-pill-blue disabled:opacity-50
+    >
+      <span v-if="loading" i-tabler:loader-2 size-18 animate-spin />
+      <span v-else i-tabler:send size-18 />
+    </button>
+  </form>
+</template>

.vitepress/theme/components/Chat/ChatPage.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import type { UIMessage } from 'ai'
+import { computed } from 'vue'
+import { Conversation, ConversationContent, ConversationScrollButton, Message, MessageContent, MessageResponse, Progress, Reasoning, ReasoningContent, ReasoningTrigger, Source, Sources, SourcesContent, SourcesTrigger, Tool, ToolContent, ToolHeader, ToolInput, ToolOutput } from '../ai-elements'
+import ChatInput from './ChatInput.vue'
+import { useChat } from './useChat'
+
+const { messages, isLoading, progress, sendMessage, clearMessages } = useChat()
+
+// Helper to get text content from message
+function getMessageText(msg: UIMessage): string {
+  return msg.parts.filter(p => p.type === 'text').map(p => p.text).join('')
+}
+
+// Helper to check if part is a tool part (type starts with 'tool-')
+function isToolPart(part: UIMessage['parts'][number]): part is UIMessage['parts'][number] & { toolCallId: string, state: string, input?: unknown, output?: unknown, errorText?: string } {
+  return part.type.startsWith('tool-') && part.type !== 'tool'
+}
+
+// Get tool name from tool part type
+function getToolName(part: UIMessage['parts'][number]): string {
+  if (part.type.startsWith('tool-'))
+    return part.type.slice(5) // Remove 'tool-' prefix
+  return 'unknown'
+}
+
+// Get first message text for header
+const headerTitle = computed(() => {
+  const first = messages.value[0]
+  if (!first)
+    return ''
+  const text = getMessageText(first)
+  return text.length > 50 ? `${text.slice(0, 50)}...` : text
+})
+</script>
+
+<template>
+  <div class="chat-page nq-raw" flex="~ col" h="[calc(100vh-200px)]" min-h-400>
+    <!-- Header (only when conversation started) -->
+    <div v-if="messages.length" flex="~ items-center justify-between" mb-16>
+      <div flex="~ items-center gap-12">
+        <span text-blue size-24 i-nimiq:logos-nimiq />
+        <h1 text="16 neutral" font-semibold m-0>
+          {{ headerTitle }}
+        </h1>
+      </div>
+      <button
+        type="button"
+        flex="~ items-center gap-6"
+        text="12 neutral-700" px-12 py-6 outline-none rounded-full bg-neutral-200 cursor-pointer transition-colors
+        @click="clearMessages"
+      >
+        <span i-tabler:trash size-14 />
+        <span>Clear</span>
+      </button>
+    </div>
+
+    <!-- Conversation -->
+    <Conversation flex-1 overflow-hidden>
+      <ConversationContent>
+        <!-- Empty state -->
+        <div v-if="!messages.length" flex="~ col items-center justify-center" text-center h-full>
+          <span text-blue mb-16 size-48 i-nimiq:logos-nimiq />
+          <h2 text="18 neutral" font-semibold mb-8>
+            Nimiq Developer Assistant
+          </h2>
+          <p text="14 neutral/60" max-w-400>
+            Ask questions about Nimiq blockchain development, APIs, and documentation.
+          </p>
+        </div>
+
+        <!-- Messages -->
+        <template v-for="msg in messages" :key="msg.id">
+          <Message :from="msg.role">
+            <div class="flex flex-col gap-2 w-full">
+              <!-- Group sources at top for assistant messages -->
+              <Sources v-if="msg.role === 'assistant' && msg.parts.filter(p => p.type === 'source-url').length">
+                <SourcesTrigger :count="msg.parts.filter(p => p.type === 'source-url').length" />
+                <SourcesContent>
+                  <template v-for="(part, i) in msg.parts" :key="`${msg.id}-source-${i}`">
+                    <Source v-if="part.type === 'source-url'" :href="part.url" :title="part.title ?? 'Source'" />
+                  </template>
+                </SourcesContent>
+              </Sources>
+
+              <!-- Render parts -->
+              <template v-for="(part, i) in msg.parts" :key="`${msg.id}-${i}`">
+                <!-- Reasoning -->
+                <Reasoning v-if="part.type === 'reasoning'" :is-streaming="part.state === 'streaming'">
+                  <ReasoningTrigger />
+                  <ReasoningContent :content="part.text" />
+                </Reasoning>
+
+                <!-- Tool calls (type is 'tool-{toolName}') -->
+                <Tool v-else-if="isToolPart(part)" :default-open="part.state !== 'output-available'">
+                  <ToolHeader :state="part.state" :title="getToolName(part)" />
+                  <ToolContent>
+                    <ToolInput :input="part.input" />
+                    <ToolOutput v-if="part.output || part.errorText" :output="part.output" :error-text="part.errorText" />
+                  </ToolContent>
+                </Tool>
+
+                <!-- Text content -->
+                <MessageContent v-else-if="part.type === 'text'">
+                  <MessageResponse :content="part.text" />
+                </MessageContent>
+
+                <!-- Skip source-url here since we handle them above -->
+              </template>
+            </div>
+          </Message>
+        </template>
+
+        <!-- Progress indicator while searching/generating -->
+        <Progress v-if="isLoading && progress.step" :step="progress.step" :message="progress.message" />
+      </ConversationContent>
+      <ConversationScrollButton />
+    </Conversation>
+
+    <!-- Input -->
+    <ChatInput :loading="isLoading" @submit="sendMessage" />
+  </div>
+</template>
+
+<style>
+/* Remove article padding when chat page is present */
+article.nq-prose:has(.chat-page) {
+  padding-bottom: 0 !important;
+}
+article.nq-prose:has(.chat-page) > div {
+  padding-bottom: 0 !important;
+  height: 100%;
+}
+</style>

.vitepress/theme/components/Chat/useChat.ts

@@ -0,0 +1,58 @@
+import type { UIMessage } from 'ai'
+import { Chat } from '@ai-sdk/vue'
+import { computed, ref } from 'vue'
+
+declare const __NIMIQ_API_URL__: string
+const API_URL = typeof __NIMIQ_API_URL__ !== 'undefined' ? __NIMIQ_API_URL__ : 'http://localhost:3000'
+
+export interface ProgressState {
+  step: string
+  message: string
+}
+
+// Custom data types for our chat
+interface ChatDataTypes {
+  progress: ProgressState
+}
+
+export function useChat() {
+  const progress = ref<ProgressState>({ step: '', message: '' })
+
+  const chat = new Chat<UIMessage<unknown, ChatDataTypes>>({
+    api: `${API_URL}/api/chat`,
+    onData(data) {
+      // Handle custom data parts like progress (type is 'data-progress', data in .data)
+      if (data && typeof data === 'object' && 'type' in data) {
+        if (data.type === 'data-progress' && 'data' in data) {
+          const progressData = (data as any).data
+          progress.value = { step: progressData.step, message: progressData.message }
+        }
+      }
+    },
+  })
+
+  const messages = computed(() => chat.messages.value)
+  const isLoading = computed(() => chat.status.value === 'streaming' || chat.status.value === 'submitted')
+
+  async function sendMessage(content: string) {
+    // Reset progress when starting new message
+    progress.value = { step: '', message: '' }
+    await chat.sendMessage({ text: content })
+  }
+
+  function clearMessages() {
+    chat.setMessages([])
+    progress.value = { step: '', message: '' }
+  }
+
+  return {
+    messages,
+    isLoading,
+    progress,
+    sendMessage,
+    clearMessages,
+  }
+}
+
+// Re-export types from AI SDK
+export type { UIMessage }

.vitepress/theme/components/ai-elements/conversation/Conversation.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { StickToBottom } from 'vue-stick-to-bottom'
+
+withDefaults(defineProps<{
+  ariaLabel?: string
+  initial?: boolean | 'instant' | { damping?: number, stiffness?: number, mass?: number }
+  damping?: number
+  stiffness?: number
+  mass?: number
+}>(), { ariaLabel: 'Conversation', initial: true, damping: 0.7, stiffness: 0.05, mass: 1.25 })
+</script>
+
+<template>
+  <StickToBottom class="flex-1 relative overflow-y-hidden" role="log" :aria-label="ariaLabel" :initial="initial" :damping="damping" :stiffness="stiffness" :mass="mass" anchor="none">
+    <slot />
+  </StickToBottom>
+</template>

.vitepress/theme/components/ai-elements/conversation/ConversationContent.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="p-4 flex flex-col gap-6">
+    <slot />
+  </div>
+</template>

.vitepress/theme/components/ai-elements/conversation/ConversationScrollButton.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useStickToBottomContext } from 'vue-stick-to-bottom'
+
+const { isAtBottom, scrollToBottom } = useStickToBottomContext()
+const showScrollButton = computed(() => !isAtBottom.value)
+
+function handleClick() {
+  scrollToBottom()
+}
+</script>
+
+<template>
+  <button v-if="showScrollButton" type="button" class="p-2 border border-neutral/10 rounded-full bg-white cursor-pointer shadow-lg transition-colors bottom-4 left-1/2 absolute dark:bg-darkblue hover:bg-neutral/5 -translate-x-1/2" @click="handleClick">
+    <div class="i-tabler:arrow-down size-4" />
+  </button>
+</template>

.vitepress/theme/components/ai-elements/conversation/index.ts

@@ -0,0 +1,3 @@
+export { default as Conversation } from './Conversation.vue'
+export { default as ConversationContent } from './ConversationContent.vue'
+export { default as ConversationScrollButton } from './ConversationScrollButton.vue'

.vitepress/theme/components/ai-elements/index.ts

@@ -0,0 +1,7 @@
+export * from './conversation'
+export * from './message'
+export * from './progress'
+export * from './reasoning'
+export * from './shimmer'
+export * from './sources'
+export * from './tool'

.vitepress/theme/components/ai-elements/message/Message.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{ from: 'user' | 'assistant' | 'system' }>()
+</script>
+
+<template>
+  <div class="group flex gap-2 max-w-[85%] w-full" :class="from === 'user' ? 'is-user ml-auto justify-end' : 'is-assistant'">
+    <slot />
+  </div>
+</template>