From 764301f7632ce8561d759f0720605ed28e77379f Mon Sep 17 00:00:00 2001 From: "Anthony Fu (via agent)" Date: Thu, 27 Aug 2026 06:25:32 +0000 Subject: [PATCH 1/4] =?UTF-8?q?docs:=20let=20the=20wizard=20compose=20a=20?= =?UTF-8?q?prompt=20=E2=80=94=20Ask=20AI=20or=20Copy=20prompt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- docs/app/components/AssistantChat.vue | 279 ++++++++++++++++++ .../global/GettingStartedWizard.vue | 103 ++++++- docs/app/composables/useAssistantPrompt.ts | 11 + 3 files changed, 390 insertions(+), 3 deletions(-) create mode 100644 docs/app/components/AssistantChat.vue create mode 100644 docs/app/composables/useAssistantPrompt.ts diff --git a/docs/app/components/AssistantChat.vue b/docs/app/components/AssistantChat.vue new file mode 100644 index 00000000..6685b0ff --- /dev/null +++ b/docs/app/components/AssistantChat.vue @@ -0,0 +1,279 @@ + + + + diff --git a/docs/app/components/global/GettingStartedWizard.vue b/docs/app/components/global/GettingStartedWizard.vue index 4e2ddd94..f51298d5 100644 --- a/docs/app/components/global/GettingStartedWizard.vue +++ b/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 { + try { + await navigator.clipboard.writeText(buildCopyPrompt()) + promptCopied.value = true + setTimeout(() => (promptCopied.value = false), 1500) + } + catch { + // Clipboard unavailable (e.g. insecure context) - ignore. + } +}