docs: let the wizard compose a prompt — Ask AI or Copy prompt

Compose the user's selections into a prompt and add two actions:
- Ask AI queues the prompt and opens the in-docs assistant, which sends it
  and starts a chat. A shared useAssistantPrompt() state carries the prompt;
  AssistantChat.vue is shadowed from the comark-docs layer to consume it.
- Copy prompt copies a self-contained prompt for any external LLM — a short
  Devframe description, the user's intent, and absolute links to every
  recommended doc.

Author: antfubot

docs/app/components/AssistantChat.vue

@@ -0,0 +1,279 @@
+<!--
+  Shadows the comark-docs layer's `AssistantChat.vue`. It mirrors the layer
+  component verbatim and adds one thing: it consumes `useAssistantPrompt()`, so
+  other surfaces (the Getting Started wizard) can queue a prompt and open the
+  panel to start a chat. Keep this in sync with the layer on comark-docs bumps.
+-->
+<script setup lang="ts">
+import type { DynamicToolUIPart, ToolUIPart, UIMessage } from 'ai'
+import { useChat } from '@ai-sdk/vue'
+import highlight from '@comark/nuxt/plugins/highlight'
+import { isPartStreaming, isToolStreaming } from '@nuxt/ui/utils/ai'
+import { DefaultChatTransport, getToolName, isReasoningUIPart, isTextUIPart, isToolUIPart } from 'ai'
+
+const MAX_INPUT = 1000
+
+const open = useAssistant()
+const { assistant } = useAppConfig()
+
+const input = ref('')
+const { messages, status, error, sendMessage, regenerate, stop } = useChat({
+  transport: new DefaultChatTransport({ api: '/api/assistant' }),
+})
+
+const plugins = [highlight()]
+
+// Suggestions grouped by category, shown before the first message.
+const questions = computed(() => assistant?.faqQuestions ?? [])
+
+// devframe addition: a prompt queued from elsewhere (e.g. the Getting Started
+// wizard) is sent as soon as this panel mounts/opens, then cleared.
+const pendingPrompt = useAssistantPrompt()
+watch(pendingPrompt, (text) => {
+  if (!text)
+    return
+  pendingPrompt.value = null
+  sendMessage({ text })
+}, { immediate: true })
+
+watch(input, (value) => {
+  if (value.length > MAX_INPUT)
+    input.value = value.slice(0, MAX_INPUT)
+})
+
+function onSubmit() {
+  const text = input.value.trim()
+  if (!text)
+    return
+  sendMessage({ text })
+  input.value = ''
+}
+
+function ask(question: string) {
+  sendMessage({ text: question })
+}
+
+const copied = ref(false)
+async function copyConversation() {
+  const text = messages.value
+    .map((message) => {
+      const content = message.parts.filter(isTextUIPart).map(part => part.text).join('\n')
+      return `${message.role === 'user' ? 'User' : 'Assistant'}:\n${content}`
+    })
+    .join('\n\n')
+  await navigator.clipboard.writeText(text)
+  copied.value = true
+  setTimeout(() => (copied.value = false), 1500)
+}
+
+function clearChat() {
+  stop()
+  messages.value = []
+}
+
+function toolMeta(part: ToolUIPart | DynamicToolUIPart) {
+  const name = getToolName(part)
+  const streaming = isToolStreaming(part)
+  const input = part.input as Record<string, string> | undefined
+  if (name === 'search_docs') {
+    return { icon: 'i-lucide-text-search', text: streaming ? 'Searching the docs' : 'Searched the docs', suffix: input?.query }
+  }
+  if (name === 'get_page') {
+    return { icon: 'i-lucide-book-open', text: streaming ? 'Reading a page' : 'Read a page', suffix: input?.path }
+  }
+  return { icon: 'i-lucide-wrench', text: name.replace(/_/g, ' ') }
+}
+
+/** Live tool rows show while the answer streams; once done they collapse into one "Used N sources" row. */
+function isMessageStreaming(message: UIMessage) {
+  const last = messages.value[messages.value.length - 1]
+  return (
+    message.role === 'assistant'
+    && message.id === last?.id
+    && (status.value === 'streaming' || status.value === 'submitted')
+  )
+}
+
+/** Unique doc pages the assistant read for this message, in call order. */
+function messageSources(message: UIMessage) {
+  const paths = new Set<string>()
+  for (const part of message.parts) {
+    if (isToolUIPart(part) && getToolName(part) === 'get_page') {
+      const path = (part.input as { path?: string } | undefined)?.path
+      if (path)
+        paths.add(path.startsWith('/') ? path : `/${path}`)
+    }
+  }
+  return [...paths]
+}
+
+function messageToolCount(message: UIMessage) {
+  return message.parts.filter(part => isToolUIPart(part)).length
+}
+
+function sourcesLabel(message: UIMessage) {
+  const count = messageSources(message).length || messageToolCount(message)
+  return `Used ${count} source${count === 1 ? '' : 's'}`
+}
+</script>
+
+<template>
+  <USlideover
+    v-model:open="open"
+    :ui="{ content: 'sm:max-w-md', body: 'flex flex-col' }"
+  >
+    <template #header>
+      <div class="flex items-center justify-between w-full">
+        <h2 class="font-bold text-highlighted">
+          Chat
+        </h2>
+        <div class="flex items-center gap-1">
+          <UButton
+            :icon="copied ? 'i-lucide-check' : 'i-lucide-copy'"
+            color="neutral"
+            variant="ghost"
+            :disabled="!messages.length"
+            :ui="{ leadingIcon: 'size-4' }"
+            aria-label="Copy conversation"
+            @click="copyConversation"
+          />
+          <UButton
+            icon="i-lucide-trash-2"
+            color="neutral"
+            variant="ghost"
+            :disabled="!messages.length"
+            :ui="{ leadingIcon: 'size-4' }"
+            aria-label="Clear conversation"
+            @click="clearChat"
+          />
+          <UButton
+            icon="i-lucide-chevron-right"
+            color="neutral"
+            variant="ghost"
+            :ui="{ leadingIcon: 'size-4' }"
+            aria-label="Close chat"
+            @click="open = false"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template #body>
+      <UChatPalette>
+        <UChatMessages
+          v-if="messages.length"
+          :messages="messages"
+          :status="status"
+          :user="{ side: 'right', variant: 'soft' }"
+          :assistant="{ side: 'left', variant: 'naked' }"
+        >
+          <template #indicator>
+            <AssistantIndicator />
+          </template>
+
+          <template #content="{ message }">
+            <UChatTool
+              v-if="message.role === 'assistant' && !isMessageStreaming(message) && messageToolCount(message)"
+              icon="i-lucide-bookmark"
+              :text="sourcesLabel(message)"
+            >
+              <div
+                v-if="messageSources(message).length"
+                class="flex flex-col items-start gap-1 pt-1"
+              >
+                <ULink
+                  v-for="path in messageSources(message)"
+                  :key="path"
+                  :to="path"
+                  class="text-sm text-muted hover:text-highlighted"
+                >
+                  {{ path }}
+                </ULink>
+              </div>
+            </UChatTool>
+
+            <template
+              v-for="(part, index) in message.parts"
+              :key="`${message.id}-${part.type}-${index}`"
+            >
+              <UChatReasoning
+                v-if="isReasoningUIPart(part)"
+                icon="i-lucide-brain"
+                :text="part.text"
+                :streaming="isPartStreaming(part)"
+              >
+                <Markdown
+                  :value="part.text"
+                  :streaming="isPartStreaming(part)"
+                  :plugins="plugins"
+                  class="text-sm text-muted *:first:mt-0 *:last:mb-0"
+                />
+              </UChatReasoning>
+
+              <UChatTool
+                v-else-if="isToolUIPart(part) && isMessageStreaming(message)"
+                v-bind="toolMeta(part)"
+                :streaming="isToolStreaming(part)"
+              />
+
+              <template v-else-if="isTextUIPart(part)">
+                <Markdown
+                  v-if="message.role === 'assistant'"
+                  :value="part.text"
+                  :streaming="isPartStreaming(part)"
+                  :plugins="plugins"
+                  class="*:first:mt-0 *:last:mb-0"
+                />
+                <p
+                  v-else
+                  class="whitespace-pre-wrap"
+                >
+                  {{ part.text }}
+                </p>
+              </template>
+            </template>
+          </template>
+        </UChatMessages>
+
+        <div
+          v-else
+          class="flex-1 flex flex-col justify-end gap-6 py-4 overflow-y-auto"
+        >
+          <div class="flex flex-col gap-6">
+            <UPageLinks
+              v-for="category in questions"
+              :key="category.category"
+              :title="category.category"
+              :links="category.items.map((item: string) => ({ label: item, onClick: () => ask(item) }))"
+            />
+          </div>
+        </div>
+
+        <template #prompt>
+          <UChatPrompt
+            v-model="input"
+            :error="error"
+            :rows="2"
+            :ui="{ root: 'rounded-lg! px-2.5' }"
+            placeholder="What would you like to know?"
+            autofocus
+            @submit="onSubmit"
+          >
+            <template #footer>
+              <div class="flex items-center justify-between w-full px-2.5">
+                <span class="text-xs text-dimmed tabular-nums">{{ input.length }} / {{ MAX_INPUT }}</span>
+                <UChatPromptSubmit
+                  :status="status"
+                  icon="i-lucide-corner-down-left"
+                  color="neutral"
+                  @stop="stop()"
+                  @reload="regenerate()"
+                />
+              </div>
+            </template>
+          </UChatPrompt>
+        </template>
+      </UChatPalette>
+    </template>
+  </USlideover>
+</template>

docs/app/components/global/GettingStartedWizard.vue

@@ -247,6 +247,81 @@ const recommendedDocs = computed(() => {
 function reset(): void {
   for (const section of sections) selections[section.key] = []
 }
+
+// --- Prompt composition -----------------------------------------------------
+
+const appConfig = useAppConfig()
+const assistantEnabled = computed(() => Boolean((appConfig as { assistant?: { enabled?: boolean } }).assistant?.enabled))
+
+const site = useSiteConfig()
+/** Absolute base for doc links in the copyable prompt (external LLMs need full URLs). */
+const siteOrigin = computed(() => (site.url || 'https://devfra.me').replace(/\/$/, ''))
+
+/** One "Section: label, label" line per answered question. */
+function selectionLines(): string[] {
+  const lines: string[] = []
+  for (const section of sections) {
+    const chosen = section.items.filter(item => selections[section.key]!.includes(item.value))
+    if (chosen.length)
+      lines.push(`- ${section.title}: ${chosen.map(item => item.label).join(', ')}`)
+  }
+  return lines
+}
+
+/**
+ * Prompt for the in-docs Ask AI assistant. It already has the docs as tools
+ * (search/read), so this stays concise and leans on those.
+ */
+function buildAssistantPrompt(): string {
+  const lines = selectionLines()
+  const intro = lines.length
+    ? `I want to build a devtool with Devframe. Here's what I have in mind:\n${lines.join('\n')}`
+    : `I want to get started building a devtool with Devframe.`
+  return `${intro}\n\nWhich Devframe features fit this, and which docs should I read (in order)? Please outline a concrete plan.`
+}
+
+/**
+ * Prompt for pasting into any external LLM. It has no Devframe context, so this
+ * bundles a short description, the intent, and absolute links to every
+ * recommended doc.
+ */
+function buildCopyPrompt(): string {
+  const origin = siteOrigin.value
+  const lines = selectionLines()
+  const docs = recommendedDocs.value.map(doc => `- ${doc.title} (${origin}${doc.path}): ${doc.description}`)
+  return [
+    `I'm building a developer tool with Devframe (${origin}).`,
+    '',
+    'Devframe is a framework-neutral foundation for building a devtool once and running it anywhere: mounted inside any host framework (Vite, Nuxt, Next.js, …), as a standalone CLI or a static build, or exposed to coding agents over MCP. A devframe pairs a node side with a browser side over type-safe RPC and shared state, and ships its UI as a built SPA.',
+    '',
+    lines.length ? `What I want to build:\n${lines.join('\n')}` : 'I am just getting started and want a solid foundation.',
+    '',
+    'Please help me design and implement this with Devframe. Relevant documentation:',
+    ...docs,
+    '',
+    'Explain which Devframe primitives to use and give me a step-by-step implementation plan.',
+  ].join('\n')
+}
+
+const assistantPrompt = useAssistantPrompt()
+const assistantOpen = useAssistant()
+
+function askAI(): void {
+  assistantPrompt.value = buildAssistantPrompt()
+  assistantOpen.value = true
+}
+
+const promptCopied = ref(false)
+async function copyPrompt(): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(buildCopyPrompt())
+    promptCopied.value = true
+    setTimeout(() => (promptCopied.value = false), 1500)
+  }
+  catch {
+    // Clipboard unavailable (e.g. insecure context) - ignore.
+  }
+}
 </script>
 
 <template>
@@ -315,9 +390,31 @@ function reset(): void {
     </div>
 
     <div class="px-5 py-4 sm:px-6 bg-muted">
-      <p class="font-medium text-highlighted mb-3">
-        {{ hasSelections ? 'Recommended docs, based on your answers' : 'Start here' }}
-      </p>
+      <div class="flex flex-wrap items-center justify-between gap-3 mb-3">
+        <p class="font-medium text-highlighted">
+          {{ hasSelections ? 'Recommended docs, based on your answers' : 'Start here' }}
+        </p>
+        <div class="flex items-center gap-2">
+          <UButton
+            v-if="assistantEnabled"
+            label="Ask AI"
+            icon="i-lucide-sparkles"
+            color="primary"
+            size="sm"
+            class="cursor-pointer"
+            @click="askAI"
+          />
+          <UButton
+            :label="promptCopied ? 'Copied!' : 'Copy prompt'"
+            :icon="promptCopied ? 'i-lucide-check' : 'i-lucide-copy'"
+            color="neutral"
+            variant="outline"
+            size="sm"
+            class="cursor-pointer"
+            @click="copyPrompt"
+          />
+        </div>
+      </div>
       <div class="flex flex-col divide-y divide-default rounded-lg border border-default overflow-hidden bg-default">
         <NuxtLink
           v-for="doc in recommendedDocs"