From 8a77d48a1d1dddaaf5ee0197c35b00a08c8d77d4 Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@vercel.com>
Date: Wed, 22 Jul 2026 13:58:39 +0100
Subject: [PATCH 1/5] feat: improve module installation flow

---
 app/app.vue                          |   2 +-
 app/components/module/ModuleItem.vue |  19 ++--
 app/composables/useModules.ts        |  24 ++---
 app/pages/modules/index.vue          | 125 ++++++++++++++++++++++-----
 4 files changed, 128 insertions(+), 42 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index f33762424..0a445696c 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -69,7 +69,7 @@ provide('navigation', versionNavigation)
 </script>
 
 <template>
-  <UApp :tooltip="{ delayDuration: 500 }">
+  <UApp :tooltip="{ delayDuration: 300 }">
     <NuxtLoadingIndicator color="var(--ui-primary)" />
 
     <div class="flex">
diff --git a/app/components/module/ModuleItem.vue b/app/components/module/ModuleItem.vue
index 21062cf3a..74212e132 100644
--- a/app/components/module/ModuleItem.vue
+++ b/app/components/module/ModuleItem.vue
@@ -4,6 +4,7 @@ import type { Module } from '#shared/types'
 const emit = defineEmits<{
   add: [module: Module]
   remove: [module: Module]
+  select: [module: Module, event: MouseEvent]
 }>()
 
 const props = withDefaults(
@@ -12,22 +13,23 @@ const props = withDefaults(
     showBadge?: boolean
     isAdded: boolean
     showAddButton?: boolean
+    selectable?: boolean
   }>(),
   {
     showBadge: true,
-    showAddButton: true
+    showAddButton: true,
+    selectable: false
   }
 )
 
 const { copy } = useClipboard()
-const { selectedSort } = useModules()
 const { track } = useAnalytics()
 
-const publishedAgo = useTimeAgo(() => props.module.stats.publishedAt)
-const createdAgo = useTimeAgo(() => props.module.stats.createdAt)
+const route = useRoute()
+const selectedSort = computed(() => sorts.find(sort => sort.key === route.query.sortBy) || sorts[0])
 
-const relativeDate = computed(() =>
-  selectedSort.value.key === 'publishedAt' ? publishedAgo.value : createdAgo.value
+const relativeDate = useTimeAgo(() =>
+  selectedSort.value.key === 'publishedAt' ? props.module.stats.publishedAt : props.module.stats.createdAt
 )
 
 const staticModuleDate = computed(() =>
@@ -53,9 +55,10 @@ function toggleModule(m: Module) {
 }
 
 function handleCardClick(event: MouseEvent) {
-  if (event.shiftKey) {
+  if (!props.selectable) return
+  if (event.shiftKey || event.metaKey || event.ctrlKey) {
     event.preventDefault()
-    toggleModule(props.module)
+    emit('select', props.module, event)
   }
 }
 
diff --git a/app/composables/useModules.ts b/app/composables/useModules.ts
index 768d20454..3e850213c 100644
--- a/app/composables/useModules.ts
+++ b/app/composables/useModules.ts
@@ -39,6 +39,18 @@ export const moduleIcon = function (category: string) {
   return iconsMap[category as keyof typeof iconsMap] || 'i-lucide-box'
 }
 
+export const sorts: Filter[] = [
+  { key: 'downloads', label: 'Downloads' },
+  { key: 'stars', label: 'Stars' },
+  { key: 'publishedAt', label: 'Updated' },
+  { key: 'createdAt', label: 'Created' }
+]
+
+const orders: Filter[] = [
+  { key: 'desc', label: 'Desc', icon: 'i-lucide-arrow-down-wide-narrow' },
+  { key: 'asc', label: 'Asc', icon: 'i-lucide-arrow-up-wide-narrow' }
+]
+
 export const useModules = () => {
   const route = useRoute()
   const router = useRouter()
@@ -70,18 +82,6 @@ export const useModules = () => {
 
   // Data
 
-  const sorts: Filter[] = [
-    { key: 'downloads', label: 'Downloads' },
-    { key: 'stars', label: 'Stars' },
-    { key: 'publishedAt', label: 'Updated' },
-    { key: 'createdAt', label: 'Created' }
-  ]
-
-  const orders: Filter[] = [
-    { key: 'desc', label: 'Desc', icon: 'i-lucide-arrow-down-wide-narrow' },
-    { key: 'asc', label: 'Asc', icon: 'i-lucide-arrow-up-wide-narrow' }
-  ]
-
   const categories = computed<Filter[]>(() => {
     return Object.keys(iconsMap)
       .map((category) => {
diff --git a/app/pages/modules/index.vue b/app/pages/modules/index.vue
index c31fcaabf..4b9ba797f 100644
--- a/app/pages/modules/index.vue
+++ b/app/pages/modules/index.vue
@@ -49,9 +49,55 @@ if (import.meta.server) {
 
 await fetchList()
 
+const lastSelectedIndex = ref<number | null>(null)
+
+// O(1) membership lookup so re-rendering the grid on every add/remove doesn't
+// re-scan the whole selection for each card (was `modulesToAdd.some(...)`).
+const addedModuleNames = computed(() => new Set(modulesToAdd.value.map(m => m.name)))
+
+function toggleModuleSelection(module: Module) {
+  const idx = modulesToAdd.value.findIndex(m => m.name === module.name)
+  if (idx === -1) {
+    modulesToAdd.value.push(module)
+  } else {
+    modulesToAdd.value.splice(idx, 1)
+  }
+}
+
+function selectModuleRange(module: Module) {
+  const currentIndex = displayedModules.value.findIndex(m => m.name === module.name)
+  if (currentIndex === -1) return
+
+  if (lastSelectedIndex.value === null) {
+    lastSelectedIndex.value = currentIndex
+    modulesToAdd.value = [module]
+    return
+  }
+
+  const [start, end] = [lastSelectedIndex.value, currentIndex].sort((a, b) => a - b)
+  modulesToAdd.value = displayedModules.value.slice(start, end + 1)
+}
+
+function handleModuleSelect(module: Module, event: MouseEvent) {
+  if (event.shiftKey) {
+    selectModuleRange(module)
+    return
+  }
+
+  // metaKey = Cmd on macOS, ctrlKey = Ctrl on Windows/Linux
+  toggleModuleSelection(module)
+  lastSelectedIndex.value = displayedModules.value.findIndex(m => m.name === module.name)
+}
+
 defineShortcuts({
   '/': () => {
     input.value?.inputRef?.focus()
+  },
+  'escape': {
+    usingInput: true,
+    handler: () => {
+      if (modulesToAdd.value.length) clearAllModules()
+    }
   }
 })
 
@@ -96,6 +142,7 @@ watch(scrollY, (y) => {
 watch(filteredModules, () => {
   isLoading.value = false
   displayedModules.value = []
+  lastSelectedIndex.value = null
   initializeModules()
 })
 
@@ -136,6 +183,7 @@ Steps:
 
 const clearAllModules = () => {
   modulesToAdd.value = []
+  lastSelectedIndex.value = null
 }
 
 initializeModules()
@@ -272,8 +320,9 @@ initializeModules()
       <UPageBody>
         <div class="flex justify-between mb-4 text-muted text-xs">
           <div class="flex items-center gap-2">
-            <UIcon name="i-lucide-info" class="size-4" />
-            <span>Shift+click to select modules for bulk installation</span>
+            <span class="flex items-center gap-1.5">
+              <UKbd value="meta" size="sm" />+click to select · Shift+click for a range · Esc to clear
+            </span>
           </div>
           <ULink to="/docs/guide/modules/getting-started" class="hidden md:flex items-center gap-1">
             Create your own module
@@ -286,9 +335,11 @@ initializeModules()
             v-for="module in displayedModules"
             :key="module.name"
             :module="module"
-            :is-added="modulesToAdd.some(m => m.name === module.name)"
+            :is-added="addedModuleNames.has(module.name)"
+            selectable
             @add="modulesToAdd.push(module)"
             @remove="modulesToAdd = modulesToAdd.filter(m => m.name !== module.name)"
+            @select="handleModuleSelect"
           />
 
           <template v-if="isLoading">
@@ -329,15 +380,34 @@ initializeModules()
           :exit="{ y: 100, opacity: 0 }"
           :transition="{ type: 'spring', stiffness: 400, damping: 30 }"
         >
-          <div layout class="flex justify-center mb-6">
-            <div class="bg-default/80 backdrop-blur-lg rounded-full p-1 border border-default dark:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.9)] shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] flex items-center gap-4">
-              <motion.div class="flex items-center gap-1">
-                <UTooltip text="Copy install command">
-                  <Motion
-                    :press="{
-                      scale: 0.99
+          <div class="flex flex-col items-center mb-6">
+            <div class="relative flex mb-0.5 p-1 rounded-full border border-default bg-default/90 backdrop-blur-lg">
+              <UAvatarGroup size="3xs" :max="6">
+                <TransitionGroup name="avatar-pop">
+                  <UTooltip
+                    v-for="m in modulesToAdd"
+                    :key="m.name"
+                    :text="m.npm"
+                    :content="{
+                      side: 'top'
                     }"
                   >
+                    <UAvatar
+                      :src="moduleImage(m.icon)"
+                      :icon="moduleIcon(m.category)"
+                      :alt="m.name"
+                      :ui="{ root: 'size-3.5 text-[6px]' }"
+                      class="rounded-full bg-default ring-1 ring-default"
+                    />
+                  </UTooltip>
+                </TransitionGroup>
+              </UAvatarGroup>
+            </div>
+
+            <div class="relative z-10 bg-default/80 backdrop-blur-lg rounded-full p-1 border border-default dark:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.9)] shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] flex items-center gap-4">
+              <motion.div class="flex items-center gap-1">
+                <UTooltip text="Copy install command">
+                  <Motion :press="{ scale: 0.99 }">
                     <UButton
                       color="primary"
                       variant="soft"
@@ -352,11 +422,7 @@ initializeModules()
                 </UTooltip>
 
                 <UTooltip text="Copy agent prompt to install & configure">
-                  <Motion
-                    :press="{
-                      scale: 0.99
-                    }"
-                  >
+                  <Motion :press="{ scale: 0.99 }">
                     <UButton
                       color="neutral"
                       variant="soft"
@@ -369,17 +435,13 @@ initializeModules()
                 </UTooltip>
 
                 <UTooltip text="Clear selection">
-                  <Motion
-                    :press="{
-                      scale: 0.99
-                    }"
-                  >
+                  <Motion :press="{ scale: 0.99 }">
                     <UButton
                       color="neutral"
                       variant="soft"
                       size="lg"
                       icon="i-lucide-x"
-                      class="hover:bg-error/10 hover:text-error rounded-full"
+                      class="rounded-full"
                       @click="clearAllModules"
                     />
                   </Motion>
@@ -392,3 +454,24 @@ initializeModules()
     </UPage>
   </UContainer>
 </template>
+
+<style scoped>
+.avatar-pop-move {
+  transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.avatar-pop-enter-active {
+  transition: opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1), scale 0.15s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.avatar-pop-leave-active {
+  position: absolute;
+  transition: opacity 0.1s ease-in, scale 0.1s ease-in;
+}
+
+.avatar-pop-enter-from,
+.avatar-pop-leave-to {
+  opacity: 0;
+  scale: 0.9;
+}
+</style>

From f7ee8a3cefe394772f44cc8b0bf9e2f4e026d1a6 Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@vercel.com>
Date: Wed, 22 Jul 2026 14:47:37 +0100
Subject: [PATCH 2/5] streamline module installation and ide prompts

---
 app/components/module/ModuleInstallGroup.vue | 99 ++++++++++++++++++++
 app/components/module/ModuleItem.vue         |  2 +-
 app/components/tools/ModuleCard.vue          | 16 ++--
 app/components/tools/PromptCard.vue          | 54 +----------
 app/composables/useIdeDeeplink.ts            | 57 +++++++++++
 app/composables/useModules.ts                | 35 +++++++
 app/pages/modules/[slug].vue                 | 18 +++-
 app/pages/modules/index.vue                  | 89 ++++++++++++------
 layers/nuxi/agent/lib/base-instructions.ts   |  1 -
 layers/nuxi/agent/tools/show_prompt.ts       | 13 +--
 layers/nuxi/shared/types/tools.ts            |  1 -
 layers/nuxi/shared/utils/ide-deeplinks.ts    | 67 +++----------
 12 files changed, 298 insertions(+), 154 deletions(-)
 create mode 100644 app/components/module/ModuleInstallGroup.vue
 create mode 100644 app/composables/useIdeDeeplink.ts

diff --git a/app/components/module/ModuleInstallGroup.vue b/app/components/module/ModuleInstallGroup.vue
new file mode 100644
index 000000000..cfc5a62c0
--- /dev/null
+++ b/app/components/module/ModuleInstallGroup.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { Module } from '#shared/types'
+
+const props = withDefaults(
+  defineProps<{
+    module: Pick<Module, 'name' | 'npm' | 'description' | 'website' | 'repo'>
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+    label?: string
+  }>(),
+  {
+    size: 'md',
+    label: 'Install this module'
+  }
+)
+
+const { copy } = useClipboard()
+const { track } = useAnalytics()
+const { openInCursor, openInClaudeCode } = useIdeDeeplink()
+
+const installCommand = computed(() => buildModuleInstallCommand(props.module.name))
+const agentPrompt = computed(() => buildModuleAgentPrompt(props.module))
+
+function copyInstall() {
+  track('Module Install Command Copied', { module: props.module.name, source: 'install-group' })
+  copy(installCommand.value, { title: 'Command copied to clipboard:', description: installCommand.value })
+}
+
+function copyPrompt() {
+  track('Module Agent Prompt Copied', { module: props.module.name, source: 'install-group' })
+  copy(agentPrompt.value, {
+    title: 'Agent prompt copied!',
+    description: props.module.npm || props.module.name,
+    icon: 'i-custom-ai'
+  })
+}
+
+async function openCursor() {
+  track('Module Prompt Opened', { module: props.module.name, ide: 'cursor', source: 'install-group' })
+  await openInCursor(agentPrompt.value)
+}
+
+async function openClaude() {
+  track('Module Prompt Opened', { module: props.module.name, ide: 'claude', source: 'install-group' })
+  await openInClaudeCode(agentPrompt.value)
+}
+
+const items = computed<DropdownMenuItem[][]>(() => [
+  [
+    {
+      label: 'Copy install command',
+      icon: 'i-lucide-terminal',
+      onSelect: copyInstall
+    },
+    {
+      label: 'Copy agent prompt',
+      icon: 'i-custom-ai',
+      onSelect: copyPrompt
+    }
+  ],
+  [
+    {
+      label: 'Open in Cursor',
+      icon: 'i-simple-icons-cursor',
+      onSelect: openCursor
+    },
+    {
+      label: 'Open in Claude Code',
+      icon: 'i-simple-icons-anthropic',
+      onSelect: openClaude
+    }
+  ]
+])
+</script>
+
+<template>
+  <UFieldGroup :size="size">
+    <UTooltip :text="`Copy: ${installCommand}`" class="grow">
+      <UButton
+        color="neutral"
+        variant="solid"
+        icon="i-lucide-terminal"
+        :label="label"
+        block
+        @click="copyInstall"
+      />
+    </UTooltip>
+
+    <UDropdownMenu :items="items" :content="{ align: 'end' }">
+      <UButton
+        color="neutral"
+        variant="solid"
+        icon="i-lucide-chevron-down"
+        aria-label="More install options"
+        class="shrink-0"
+      />
+    </UDropdownMenu>
+  </UFieldGroup>
+</template>
diff --git a/app/components/module/ModuleItem.vue b/app/components/module/ModuleItem.vue
index 74212e132..16d2d3e87 100644
--- a/app/components/module/ModuleItem.vue
+++ b/app/components/module/ModuleItem.vue
@@ -40,7 +40,7 @@ const staticModuleDate = computed(() =>
 
 function copyInstallCommand(moduleName: string) {
   track('Module Install Command Copied', { module: moduleName })
-  const command = `npx nuxt@latest module add ${moduleName}`
+  const command = buildModuleInstallCommand(moduleName)
   copy(command, { title: 'Command copied to clipboard:', description: command })
 }
 
diff --git a/app/components/tools/ModuleCard.vue b/app/components/tools/ModuleCard.vue
index 2d92dbb4f..8bf3aa9cf 100644
--- a/app/components/tools/ModuleCard.vue
+++ b/app/components/tools/ModuleCard.vue
@@ -24,15 +24,15 @@ const displayTitle = computed(() => {
   return props.slug?.trim() || 'Module'
 })
 
-const installCommand = computed(() => `npx nuxt@latest module add ${props.slug}`)
+const installCommand = computed(() => buildModuleInstallCommand(props.slug))
 
-const agentPrompt = computed(() => {
-  const lines = [`Install and configure the Nuxt module **${props.npm || props.slug}**: ${props.description || ''}`]
-  if (props.website) lines.push(`Docs: ${props.website}`)
-  if (props.repo) lines.push(`GitHub: https://github.com/${props.repo}`)
-  lines.push(`\nSteps:\n1. Run \`${installCommand.value}\`\n2. Read the module documentation and add recommended configuration in \`nuxt.config.ts\`\n3. List any required environment variables in \`.env.example\` without filling in actual values`)
-  return lines.join('\n')
-})
+const agentPrompt = computed(() => buildModuleAgentPrompt({
+  name: props.slug,
+  npm: props.npm || '',
+  description: props.description || '',
+  website: props.website || '',
+  repo: props.repo || ''
+}))
 
 function copyInstall() {
   track('Module Install Command Copied', { module: props.slug, source: 'nuxt-agent' })
diff --git a/app/components/tools/PromptCard.vue b/app/components/tools/PromptCard.vue
index 34167be05..f74386f3d 100644
--- a/app/components/tools/PromptCard.vue
+++ b/app/components/tools/PromptCard.vue
@@ -1,13 +1,7 @@
 <script setup lang="ts">
-import {
-  buildClaudeCodeBrowserUrl,
-  buildCursorBrowserUrl
-} from '../../../layers/nuxi/shared/utils/ide-deeplinks'
-
 const props = defineProps<{
   description: string
   prompt: string
-  repo?: string
   icon?: string
   deeplinks: {
     cursor: string
@@ -15,9 +9,9 @@ const props = defineProps<{
   }
 }>()
 
-const { copied } = useClipboard()
-const toast = useToast()
+const { copied, copy } = useClipboard()
 const { track } = useAnalytics()
+const { openInCursor: openPromptInCursor, openInClaudeCode: openPromptInClaudeCode } = useIdeDeeplink()
 const expanded = ref(false)
 
 const previewLimit = 200
@@ -27,57 +21,19 @@ const previewText = computed(() => {
   return `${props.prompt.slice(0, previewLimit)}…`
 })
 
-const pasteShortcut = computed(() =>
-  typeof navigator !== 'undefined' && navigator.platform?.includes('Mac') ? '⌘V' : 'Ctrl+V'
-)
-
-function openIdeDeeplink(url: string) {
-  window.location.assign(url)
-}
-
-async function copyPromptToClipboard(options: { title: string, description: string, icon: string }) {
-  try {
-    await navigator.clipboard.writeText(props.prompt)
-    toast.add(options)
-  } catch {
-    // Clipboard can fail without blocking the deeplink handoff.
-  }
-}
-
 async function openInCursor() {
   track('Nuxi Prompt Opened', { ide: 'cursor', source: 'nuxt-agent' })
-
-  const { url, needsClipboardFallback } = buildCursorBrowserUrl(props.prompt)
-  if (needsClipboardFallback) {
-    await copyPromptToClipboard({
-      title: 'Prompt copied',
-      description: `Paste with ${pasteShortcut.value} when your IDE opens`,
-      icon: 'i-lucide-clipboard-check'
-    })
-  }
-
-  openIdeDeeplink(url)
+  await openPromptInCursor(props.prompt)
 }
 
 async function openInClaudeCode() {
   track('Nuxi Prompt Opened', { ide: 'claude', source: 'nuxt-agent' })
-
-  const { url, needsClipboardFallback } = buildClaudeCodeBrowserUrl(props.prompt, props.repo)
-
-  if (needsClipboardFallback) {
-    await copyPromptToClipboard({
-      title: 'Prompt copied',
-      description: `Paste with ${pasteShortcut.value} when your IDE opens`,
-      icon: 'i-lucide-clipboard-check'
-    })
-  }
-
-  openIdeDeeplink(url)
+  await openPromptInClaudeCode(props.prompt)
 }
 
 function copyPrompt() {
   track('Nuxi Prompt Copied', { source: 'nuxt-agent' })
-  void copyPromptToClipboard({
+  copy(props.prompt, {
     title: 'Prompt copied!',
     description: props.description,
     icon: 'i-lucide-clipboard-check'
diff --git a/app/composables/useIdeDeeplink.ts b/app/composables/useIdeDeeplink.ts
new file mode 100644
index 000000000..4eba4b596
--- /dev/null
+++ b/app/composables/useIdeDeeplink.ts
@@ -0,0 +1,57 @@
+import {
+  buildClaudeCodeBrowserUrl,
+  buildCursorBrowserUrl
+} from '~~/layers/nuxi/shared/utils/ide-deeplinks'
+
+/**
+ * Opens a prompt in Cursor or Claude Code via browser deeplinks.
+ *
+ * Both Cursor and Claude Desktop have known, unresolved bugs in their deeplink
+ * URL parsers that can reject an otherwise-valid, correctly-encoded prompt
+ * (e.g. Cursor's "Invalid text for prompt" — see
+ * https://forum.cursor.com/t/error-handling-deep-link-invalid-text-for-prompt/149270).
+ * Since the webpage has no way to detect that failure, the prompt is always
+ * copied to the clipboard first as a safety net, regardless of URL length.
+ */
+export const useIdeDeeplink = () => {
+  const toast = useToast()
+
+  const pasteShortcut = computed(() =>
+    typeof navigator !== 'undefined' && navigator.platform?.includes('Mac') ? '⌘V' : 'Ctrl+V'
+  )
+
+  function openDeeplink(url: string) {
+    window.location.assign(url)
+  }
+
+  async function copyPromptToClipboard(prompt: string) {
+    try {
+      await navigator.clipboard.writeText(prompt)
+      toast.add({
+        title: 'Prompt copied',
+        description: `Paste with ${pasteShortcut.value} if it doesn't appear automatically`,
+        icon: 'i-lucide-clipboard-check'
+      })
+    } catch {
+      // Clipboard can fail without blocking the deeplink handoff.
+    }
+  }
+
+  async function openInCursor(prompt: string) {
+    const { url } = buildCursorBrowserUrl(prompt)
+    await copyPromptToClipboard(prompt)
+    openDeeplink(url)
+  }
+
+  async function openInClaudeCode(prompt: string) {
+    const { url } = buildClaudeCodeBrowserUrl(prompt)
+    await copyPromptToClipboard(prompt)
+    openDeeplink(url)
+  }
+
+  return {
+    pasteShortcut,
+    openInCursor,
+    openInClaudeCode
+  }
+}
diff --git a/app/composables/useModules.ts b/app/composables/useModules.ts
index 3e850213c..1f7324938 100644
--- a/app/composables/useModules.ts
+++ b/app/composables/useModules.ts
@@ -39,6 +39,41 @@ export const moduleIcon = function (category: string) {
   return iconsMap[category as keyof typeof iconsMap] || 'i-lucide-box'
 }
 
+type ModulePromptInfo = Pick<Module, 'name' | 'npm' | 'description' | 'website' | 'repo'>
+
+export function buildModuleInstallCommand(names: string | string[]): string {
+  const moduleNames = Array.isArray(names) ? names.join(' ') : names
+  return `npx nuxt@latest module add ${moduleNames}`
+}
+
+export function buildModuleAgentPrompt(module: ModulePromptInfo): string {
+  const lines = [`Install and configure the Nuxt module **${module.npm || module.name}**: ${module.description || ''}`]
+  if (module.website) lines.push(`Docs: ${module.website}`)
+  if (module.repo) lines.push(`GitHub: https://github.com/${module.repo}`)
+  lines.push(`\nSteps:\n1. Run \`${buildModuleInstallCommand(module.name)}\`\n2. Read the module documentation and add recommended configuration in \`nuxt.config.ts\`\n3. List any required environment variables in \`.env.example\` without filling in actual values`)
+  return lines.join('\n')
+}
+
+export function buildBulkModuleAgentPrompt(modules: ModulePromptInfo[]): string {
+  const modulesList = modules.map((m) => {
+    const lines = [`- ${m.npm}: ${m.description}`]
+    if (m.website) lines.push(`  Docs: ${m.website}`)
+    if (m.repo) lines.push(`  GitHub: https://github.com/${m.repo}`)
+    return lines.join('\n')
+  }).join('\n')
+  const moduleNames = modules.map(m => m.name)
+
+  return `Install and configure the following Nuxt modules in my project:
+
+${modulesList}
+
+Steps:
+1. Run \`${buildModuleInstallCommand(moduleNames)}\` to install all modules at once
+2. For each module, read its documentation and add the recommended configuration in \`nuxt.config.ts\`
+3. List any required environment variables in \`.env.example\` without filling in actual values
+4. Verify the setup is correct by checking that the modules are properly registered`
+}
+
 export const sorts: Filter[] = [
   { key: 'downloads', label: 'Downloads' },
   { key: 'stars', label: 'Stars' },
diff --git a/app/pages/modules/[slug].vue b/app/pages/modules/[slug].vue
index 413615acf..c54ba9058 100644
--- a/app/pages/modules/[slug].vue
+++ b/app/pages/modules/[slug].vue
@@ -108,7 +108,17 @@ if (import.meta.server) {
         </template>
       </UAlert>
     </div>
-    <UPageHeader :description="module.description" :ui="{ headline: 'mb-8' }">
+    <UPageHeader
+      :description="module.description"
+      :ui="{
+        headline: 'mb-8',
+        wrapper: isAgentDocked
+          ? 'flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between'
+          : 'flex flex-col gap-4 lg:grid lg:grid-cols-12 lg:gap-10 lg:items-center',
+        title: isAgentDocked ? '' : 'lg:col-span-9',
+        links: isAgentDocked ? '' : 'lg:col-span-3 lg:justify-start lg:pl-6'
+      }"
+    >
       <template #headline>
         <UBreadcrumb :items="[{ label: 'Modules', to: '/modules' }, { to: { name: 'modules', query: { category: module.category } }, label: module.category }, { label: module.npm }]" />
       </template>
@@ -132,6 +142,10 @@ if (import.meta.server) {
         </div>
       </template>
 
+      <template #links>
+        <ModuleInstallGroup :module="module" class="hidden lg:flex" />
+      </template>
+
       <div class="flex flex-col lg:flex-row lg:items-center gap-3 mt-4">
         <UTooltip text="Monthly NPM Downloads">
           <NuxtLink class="flex items-center gap-1.5" :to="`https://npm.chart.dev/${module.npm}`" target="_blank">
@@ -169,6 +183,8 @@ if (import.meta.server) {
           <span v-if="index < module.maintainers.length - 1" class="hidden lg:block text-muted">&bull;</span>
         </div>
       </div>
+
+      <ModuleInstallGroup :module="module" class="w-full mt-6 lg:hidden" />
     </UPageHeader>
 
     <UPage
diff --git a/app/pages/modules/index.vue b/app/pages/modules/index.vue
index 4b9ba797f..8e18ae88f 100644
--- a/app/pages/modules/index.vue
+++ b/app/pages/modules/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { motion, AnimatePresence } from 'motion-v'
+import type { DropdownMenuItem } from '@nuxt/ui'
 import type { Module } from '#shared/types'
 import { joinURL } from 'ufo'
 
@@ -14,6 +15,7 @@ const el = useTemplateRef<HTMLElement>('el')
 const { replaceRoute } = useFilters('modules')
 const { fetchList, filteredModules, q, categories, modules, stats, selectedSort, selectedOrder, selectedCategory, sorts } = useModules()
 const { track } = useAnalytics()
+const { openInCursor, openInClaudeCode } = useIdeDeeplink()
 
 const cacheControl = useResponseHeader('Cache-Control')
 const cdnCacheControl = useResponseHeader('CDN-Cache-Control')
@@ -147,9 +149,9 @@ watch(filteredModules, () => {
 })
 
 const copyAllInstallCommands = () => {
-  const moduleNames = modulesToAdd.value.map(module => module.name).join(' ')
-  const command = `npx nuxt@latest module add ${moduleNames}`
-  track('Modules Bulk Install Copied', { count: modulesToAdd.value.length, modules: moduleNames })
+  const moduleNames = modulesToAdd.value.map(module => module.name)
+  const command = buildModuleInstallCommand(moduleNames)
+  track('Modules Bulk Install Copied', { count: modulesToAdd.value.length, modules: moduleNames.join(' ') })
   copy(command, {
     title: 'Install command copied to clipboard:',
     description: `Ready to install ${modulesToAdd.value.length} module${modulesToAdd.value.length > 1 ? 's' : ''} at once`
@@ -157,22 +159,8 @@ const copyAllInstallCommands = () => {
 }
 
 const copyAgentPrompt = () => {
-  const modulesList = modulesToAdd.value.map((m) => {
-    const lines = [`- ${m.npm}: ${m.description}`]
-    if (m.website) lines.push(`  Docs: ${m.website}`)
-    if (m.repo) lines.push(`  GitHub: https://github.com/${m.repo}`)
-    return lines.join('\n')
-  }).join('\n')
+  const prompt = buildBulkModuleAgentPrompt(modulesToAdd.value)
   const moduleNames = modulesToAdd.value.map(m => m.name).join(' ')
-  const prompt = `Install and configure the following Nuxt modules in my project:
-
-${modulesList}
-
-Steps:
-1. Run \`npx nuxt@latest module add ${moduleNames}\` to install all modules at once
-2. For each module, read its documentation and add the recommended configuration in \`nuxt.config.ts\`
-3. List any required environment variables in \`.env.example\` without filling in actual values
-4. Verify the setup is correct by checking that the modules are properly registered`
   track('Modules Agent Prompt Copied', { count: modulesToAdd.value.length, modules: moduleNames })
   copy(prompt, {
     title: 'Agent prompt copied to clipboard!',
@@ -181,6 +169,34 @@ Steps:
   })
 }
 
+async function openBulkPromptInCursor() {
+  track('Modules Agent Prompt Opened', { count: modulesToAdd.value.length, ide: 'cursor' })
+  await openInCursor(buildBulkModuleAgentPrompt(modulesToAdd.value))
+}
+
+async function openBulkPromptInClaudeCode() {
+  track('Modules Agent Prompt Opened', { count: modulesToAdd.value.length, ide: 'claude' })
+  await openInClaudeCode(buildBulkModuleAgentPrompt(modulesToAdd.value))
+}
+
+const agentPromptItems = computed<DropdownMenuItem[]>(() => [
+  {
+    label: 'Copy agent prompt',
+    icon: 'i-custom-ai',
+    onSelect: copyAgentPrompt
+  },
+  {
+    label: 'Open in Cursor',
+    icon: 'i-simple-icons-cursor',
+    onSelect: openBulkPromptInCursor
+  },
+  {
+    label: 'Open in Claude Code',
+    icon: 'i-simple-icons-anthropic',
+    onSelect: openBulkPromptInClaudeCode
+  }
+])
+
 const clearAllModules = () => {
   modulesToAdd.value = []
   lastSelectedIndex.value = null
@@ -421,18 +437,31 @@ initializeModules()
                   </Motion>
                 </UTooltip>
 
-                <UTooltip text="Copy agent prompt to install & configure">
-                  <Motion :press="{ scale: 0.99 }">
-                    <UButton
-                      color="neutral"
-                      variant="soft"
-                      size="lg"
-                      icon="i-custom-ai"
-                      class="rounded-full"
-                      @click="copyAgentPrompt"
-                    />
-                  </Motion>
-                </UTooltip>
+                <Motion :press="{ scale: 0.99 }">
+                  <UFieldGroup>
+                    <UTooltip text="Copy agent prompt to install & configure">
+                      <UButton
+                        color="neutral"
+                        variant="soft"
+                        size="lg"
+                        icon="i-custom-ai"
+                        class="rounded-s-full"
+                        @click="copyAgentPrompt"
+                      />
+                    </UTooltip>
+
+                    <UDropdownMenu :items="agentPromptItems" :content="{ align: 'end' }">
+                      <UButton
+                        color="neutral"
+                        variant="soft"
+                        size="lg"
+                        icon="i-lucide-chevron-down"
+                        class="rounded-e-full"
+                        aria-label="More agent prompt options"
+                      />
+                    </UDropdownMenu>
+                  </UFieldGroup>
+                </Motion>
 
                 <UTooltip text="Clear selection">
                   <Motion :press="{ scale: 0.99 }">
diff --git a/layers/nuxi/agent/lib/base-instructions.ts b/layers/nuxi/agent/lib/base-instructions.ts
index 2e8eb4303..02b202cda 100644
--- a/layers/nuxi/agent/lib/base-instructions.ts
+++ b/layers/nuxi/agent/lib/base-instructions.ts
@@ -38,7 +38,6 @@ Do NOT call \`list-*\` first when the page is given — call the get tool direct
 - \`description\`: short card label (what they will apply).
 - \`prompt\`: fully self-contained — max **800 characters** (required for browser deeplinks). Dense numbered steps and file paths only. No prose, no duplicating your chat reply, no fenced code blocks — reference files by path instead. Write as instructions to an IDE agent.
 - If the fix needs more detail than 800 chars, split into multiple \`show_prompt\` calls or keep the extra context in your text reply only.
-- \`repo\`: pass \`owner/name\` when known (e.g. \`nuxt/nuxt\` for core framework issues, a module's GitHub repo from \`show_module\`). Omit if unknown.
 - Always add a brief text reply alongside the card — summarize what the prompt does; do not duplicate the full prompt in text.
 
 **Tools:**
diff --git a/layers/nuxi/agent/tools/show_prompt.ts b/layers/nuxi/agent/tools/show_prompt.ts
index f9bd83dcc..2b1847d2b 100644
--- a/layers/nuxi/agent/tools/show_prompt.ts
+++ b/layers/nuxi/agent/tools/show_prompt.ts
@@ -1,27 +1,22 @@
 import { defineTool } from 'eve/tools'
 import { z } from 'zod'
-import { buildIdeDeeplinks, normalizeRepo, PROMPT_CARD_MAX_LENGTH, REPO_PATTERN, truncatePrompt } from '../../shared/utils/ide-deeplinks.js'
-
-const repoSchema = z.string().regex(REPO_PATTERN, 'Must be owner/name (e.g. nuxt/nuxt)').optional()
+import { buildIdeDeeplinks, PROMPT_CARD_MAX_LENGTH, truncatePrompt } from '../../shared/utils/ide-deeplinks.js'
 
 export default defineTool({
-  description: 'Display an actionable prompt card with deeplinks to open the prompt in Cursor or Claude Code. Proactively offer this when a ready IDE prompt would help the user add, modify, remove, or configure something in their codebase — the user does not need to ask for a prompt explicitly. Good after explaining how to do something, diagnosing errors, migrations, refactors, or module setup. Do NOT use for pure doc answers or nuxt.com navigation. The prompt must be self-contained (context, likely files, concrete steps). Pass repo when the target GitHub repository is known (e.g. nuxt/nuxt, or a module repo from show_module).',
+  description: 'Display an actionable prompt card with deeplinks to open the prompt in Cursor or Claude Code. Proactively offer this when a ready IDE prompt would help the user add, modify, remove, or configure something in their codebase — the user does not need to ask for a prompt explicitly. Good after explaining how to do something, diagnosing errors, migrations, refactors, or module setup. Do NOT use for pure doc answers or nuxt.com navigation. The prompt must be self-contained (context, likely files, concrete steps).',
   inputSchema: z.object({
     description: z.string().max(120).describe('Short label shown on the card (max 120 chars)'),
     prompt: z.string().min(1).max(PROMPT_CARD_MAX_LENGTH).describe('Dense IDE prompt (max 800 chars): numbered steps, target files only — no prose, no code blocks, no chat duplication'),
-    repo: repoSchema.describe('GitHub owner/name for Claude Code repo resolution (optional)'),
     icon: z.string().optional().describe('Optional icon (e.g. i-lucide-wrench)')
   }),
-  async execute({ description, prompt, repo, icon }) {
+  async execute({ description, prompt, icon }) {
     const normalizedPrompt = truncatePrompt(prompt, PROMPT_CARD_MAX_LENGTH)
-    const normalizedRepo = normalizeRepo(repo)
 
     return {
       description: description.trim(),
       prompt: normalizedPrompt,
-      ...(normalizedRepo ? { repo: normalizedRepo } : {}),
       ...(icon?.trim() ? { icon: icon.trim() } : {}),
-      deeplinks: buildIdeDeeplinks(normalizedPrompt, normalizedRepo)
+      deeplinks: buildIdeDeeplinks(normalizedPrompt)
     }
   }
 })
diff --git a/layers/nuxi/shared/types/tools.ts b/layers/nuxi/shared/types/tools.ts
index 4eb1802aa..e1cc1ef1e 100644
--- a/layers/nuxi/shared/types/tools.ts
+++ b/layers/nuxi/shared/types/tools.ts
@@ -52,7 +52,6 @@ export interface PlaygroundCardData {
 export interface PromptCardData {
   description: string
   prompt: string
-  repo?: string
   icon?: string
   deeplinks: {
     cursor: string
diff --git a/layers/nuxi/shared/utils/ide-deeplinks.ts b/layers/nuxi/shared/utils/ide-deeplinks.ts
index 628d70230..65ada8962 100644
--- a/layers/nuxi/shared/utils/ide-deeplinks.ts
+++ b/layers/nuxi/shared/utils/ide-deeplinks.ts
@@ -3,14 +3,9 @@ export const MAX_PROMPT_LENGTH = 5000
 /** Max prompt length for show_prompt cards — must fit in browser deeplink URLs. */
 export const PROMPT_CARD_MAX_LENGTH = 800
 
-/** Claude `q` in deeplinks. */
-export const CLAUDE_DEEPLINK_MAX_Q = 1500
-
 /** Chrome truncates custom-scheme URLs around ~2048 chars — stay well under. */
 export const CLAUDE_BROWSER_MAX_URL = 1800
 
-export const REPO_PATTERN = /^[\w-]+\/[\w.-]+$/
-
 /** Slice on Unicode code-point boundaries so surrogate pairs stay valid for encodeURIComponent. */
 function sliceCodePoints(text: string, maxLength: number): string {
   if (maxLength <= 0) return ''
@@ -25,12 +20,6 @@ export function truncatePrompt(prompt: string, max = MAX_PROMPT_LENGTH): string
   return `${sliceCodePoints(trimmed, max - 1)}…`
 }
 
-export function normalizeRepo(repo?: string): string | undefined {
-  const trimmed = repo?.trim()
-  if (!trimmed || !REPO_PATTERN.test(trimmed)) return undefined
-  return trimmed
-}
-
 function fitEncodedQuery(prompt: string, prefix: string, maxUrlLength: number): { q: string, truncated: boolean } {
   const trimmed = truncatePrompt(prompt)
   const budget = maxUrlLength - prefix.length
@@ -75,57 +64,29 @@ export function buildCursorBrowserUrl(prompt: string): {
   }
 }
 
-/** Claude Code terminal deeplink — https://code.claude.com/docs/en/deep-links */
-export function buildClaudeCodeUrl(prompt: string, repo?: string): string {
-  const q = truncatePrompt(prompt, CLAUDE_DEEPLINK_MAX_Q)
-  const parts = [`q=${encodeURIComponent(q)}`]
-  const normalizedRepo = normalizeRepo(repo)
-  if (normalizedRepo) parts.push(`repo=${encodeURIComponent(normalizedRepo)}`)
-  return `claude-cli://open?${parts.join('&')}`
+/** Claude Desktop deeplink — aligned with Nuxt UI ProsePrompt. https://support.claude.com/en/articles/14729294 */
+export function buildClaudeCodeUrl(prompt: string): string {
+  const text = truncatePrompt(prompt)
+  return `claude://code/new?q=${encodeURIComponent(text)}`
 }
 
-/** Browser Claude deeplink — prefills `q` when the URL fits, else signals clipboard fallback. */
-export function buildClaudeCodeBrowserUrl(prompt: string, repo?: string): {
+/** Browser-safe Claude deeplink — fits under Chrome custom-scheme URL limit. */
+export function buildClaudeCodeBrowserUrl(prompt: string): {
   url: string
   needsClipboardFallback: boolean
 } {
-  const normalizedRepo = normalizeRepo(repo)
-  const baseParams: string[] = []
-  if (normalizedRepo) baseParams.push(`repo=${encodeURIComponent(normalizedRepo)}`)
-
-  const prefix = `claude-cli://open?${baseParams.length ? `${baseParams.join('&')}&` : ''}q=`
-  const { q, truncated } = fitEncodedQuery(
-    truncatePrompt(prompt, PROMPT_CARD_MAX_LENGTH),
-    prefix,
-    CLAUDE_BROWSER_MAX_URL
-  )
-
-  if (truncated) {
-    const url = baseParams.length
-      ? `claude-cli://open?${baseParams.join('&')}`
-      : 'claude-cli://open'
-    return { url, needsClipboardFallback: true }
-  }
-
-  baseParams.push(`q=${encodeURIComponent(q)}`)
-  const url = `claude-cli://open?${baseParams.join('&')}`
-
-  if (url.length > CLAUDE_BROWSER_MAX_URL) {
-    const fallbackUrl = normalizedRepo
-      ? `claude-cli://open?repo=${encodeURIComponent(normalizedRepo)}`
-      : 'claude-cli://open'
-    return { url: fallbackUrl, needsClipboardFallback: true }
-  }
-
+  const normalized = truncatePrompt(prompt, PROMPT_CARD_MAX_LENGTH)
+  const prefix = 'claude://code/new?q='
+  const { q, truncated } = fitEncodedQuery(normalized, prefix, CLAUDE_BROWSER_MAX_URL)
   return {
-    url,
-    needsClipboardFallback: false
+    url: `${prefix}${encodeURIComponent(q)}`,
+    needsClipboardFallback: truncated || q !== normalized
   }
 }
 
-export function buildIdeDeeplinks(prompt: string, repo?: string) {
+export function buildIdeDeeplinks(prompt: string) {
   const cursor = buildCursorBrowserUrl(prompt)
-  const claude = buildClaudeCodeBrowserUrl(prompt, repo)
+  const claude = buildClaudeCodeBrowserUrl(prompt)
   return {
     cursor: cursor.url,
     claude: claude.url,
@@ -136,7 +97,6 @@ export function buildIdeDeeplinks(prompt: string, repo?: string) {
 export function parsePromptCardOutput(output: unknown): {
   description: string
   prompt: string
-  repo?: string
   deeplinks: { cursor: string, claude: string }
 } | null {
   if (!output || typeof output !== 'object') return null
@@ -150,7 +110,6 @@ export function parsePromptCardOutput(output: unknown): {
   return {
     description: o.description,
     prompt: o.prompt,
-    repo: typeof o.repo === 'string' ? o.repo : undefined,
     deeplinks: {
       cursor: links.cursor,
       claude: links.claude,

From 9de0ce53dc4257a104ffe7acfbc9e2c5d5c267e4 Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@vercel.com>
Date: Wed, 22 Jul 2026 15:17:53 +0100
Subject: [PATCH 3/5] up

---
 app/components/module/ModuleInstallGroup.vue  | 31 +-----------
 app/components/module/ModuleItem.vue          | 38 ++++++++++-----
 app/components/tools/ModuleCard.vue           | 19 +-------
 app/components/tools/PromptCard.vue           | 12 ++---
 app/composables/useIdeDeeplink.ts             | 31 +++++-------
 app/composables/useModules.ts                 | 47 +++++++++++++++++--
 app/pages/modules/index.vue                   | 10 ++--
 .../nuxi/app/components/chat/ChatContent.vue  |  4 +-
 8 files changed, 95 insertions(+), 97 deletions(-)

diff --git a/app/components/module/ModuleInstallGroup.vue b/app/components/module/ModuleInstallGroup.vue
index cfc5a62c0..754eaa378 100644
--- a/app/components/module/ModuleInstallGroup.vue
+++ b/app/components/module/ModuleInstallGroup.vue
@@ -14,36 +14,7 @@ const props = withDefaults(
   }
 )
 
-const { copy } = useClipboard()
-const { track } = useAnalytics()
-const { openInCursor, openInClaudeCode } = useIdeDeeplink()
-
-const installCommand = computed(() => buildModuleInstallCommand(props.module.name))
-const agentPrompt = computed(() => buildModuleAgentPrompt(props.module))
-
-function copyInstall() {
-  track('Module Install Command Copied', { module: props.module.name, source: 'install-group' })
-  copy(installCommand.value, { title: 'Command copied to clipboard:', description: installCommand.value })
-}
-
-function copyPrompt() {
-  track('Module Agent Prompt Copied', { module: props.module.name, source: 'install-group' })
-  copy(agentPrompt.value, {
-    title: 'Agent prompt copied!',
-    description: props.module.npm || props.module.name,
-    icon: 'i-custom-ai'
-  })
-}
-
-async function openCursor() {
-  track('Module Prompt Opened', { module: props.module.name, ide: 'cursor', source: 'install-group' })
-  await openInCursor(agentPrompt.value)
-}
-
-async function openClaude() {
-  track('Module Prompt Opened', { module: props.module.name, ide: 'claude', source: 'install-group' })
-  await openInClaudeCode(agentPrompt.value)
-}
+const { installCommand, copyInstall, copyPrompt, openCursor, openClaude } = useModuleInstallActions(() => props.module, 'install-group')
 
 const items = computed<DropdownMenuItem[][]>(() => [
   [
diff --git a/app/components/module/ModuleItem.vue b/app/components/module/ModuleItem.vue
index 16d2d3e87..28840586c 100644
--- a/app/components/module/ModuleItem.vue
+++ b/app/components/module/ModuleItem.vue
@@ -22,11 +22,14 @@ const props = withDefaults(
   }
 )
 
-const { copy } = useClipboard()
 const { track } = useAnalytics()
-
-const route = useRoute()
-const selectedSort = computed(() => sorts.find(sort => sort.key === route.query.sortBy) || sorts[0])
+const { selectedSort } = useModules()
+const {
+  copyInstall: copyInstallCommand,
+  copyPrompt: copyAgentPrompt,
+  openCursor: openPromptInCursor,
+  openClaude: openPromptInClaudeCode
+} = useModuleInstallActions(() => props.module, 'context-menu')
 
 const relativeDate = useTimeAgo(() =>
   selectedSort.value.key === 'publishedAt' ? props.module.stats.publishedAt : props.module.stats.createdAt
@@ -38,12 +41,6 @@ const staticModuleDate = computed(() =>
     : formatDateByLocale('en', props.module.stats.createdAt)
 )
 
-function copyInstallCommand(moduleName: string) {
-  track('Module Install Command Copied', { module: moduleName })
-  const command = buildModuleInstallCommand(moduleName)
-  copy(command, { title: 'Command copied to clipboard:', description: command })
-}
-
 function toggleModule(m: Module) {
   const action = props.isAdded ? 'remove' : 'add'
   track('Module Toggled', { module: m.name, action })
@@ -72,7 +69,24 @@ const items = computed(() => [
     {
       label: 'Copy install command',
       icon: 'i-lucide-terminal',
-      onSelect: () => copyInstallCommand(props.module.name)
+      onSelect: copyInstallCommand
+    },
+    {
+      label: 'Copy agent prompt',
+      icon: 'i-custom-ai',
+      onSelect: copyAgentPrompt
+    }
+  ],
+  [
+    {
+      label: 'Open in Cursor',
+      icon: 'i-simple-icons-cursor',
+      onSelect: openPromptInCursor
+    },
+    {
+      label: 'Open in Claude Code',
+      icon: 'i-simple-icons-anthropic',
+      onSelect: openPromptInClaudeCode
     }
   ],
   [
@@ -224,7 +238,7 @@ const items = computed(() => [
                 color="neutral"
                 size="xs"
                 variant="outline"
-                @click="copyInstallCommand(module.name)"
+                @click="copyInstallCommand"
               >
                 <span class="sr-only">Copy command to install {{ module.name }}</span>
               </UButton>
diff --git a/app/components/tools/ModuleCard.vue b/app/components/tools/ModuleCard.vue
index 8bf3aa9cf..12c07de7b 100644
--- a/app/components/tools/ModuleCard.vue
+++ b/app/components/tools/ModuleCard.vue
@@ -15,34 +15,19 @@ const props = defineProps<{
   stars?: number
 }>()
 
-const { copy } = useClipboard()
-const { track } = useAnalytics()
-
 const displayTitle = computed(() => {
   const fromNpm = props.npm?.trim()
   if (fromNpm) return fromNpm
   return props.slug?.trim() || 'Module'
 })
 
-const installCommand = computed(() => buildModuleInstallCommand(props.slug))
-
-const agentPrompt = computed(() => buildModuleAgentPrompt({
+const { copyInstall, copyPrompt } = useModuleInstallActions(() => ({
   name: props.slug,
   npm: props.npm || '',
   description: props.description || '',
   website: props.website || '',
   repo: props.repo || ''
-}))
-
-function copyInstall() {
-  track('Module Install Command Copied', { module: props.slug, source: 'nuxt-agent' })
-  copy(installCommand.value, { title: 'Command copied to clipboard:', description: installCommand.value })
-}
-
-function copyPrompt() {
-  track('Module Agent Prompt Copied', { module: props.slug, source: 'nuxt-agent' })
-  copy(agentPrompt.value, { title: 'Agent prompt copied!', description: props.npm || props.slug, icon: 'i-custom-ai' })
-}
+}), 'nuxt-agent')
 </script>
 
 <template>
diff --git a/app/components/tools/PromptCard.vue b/app/components/tools/PromptCard.vue
index f74386f3d..f4b44ccb6 100644
--- a/app/components/tools/PromptCard.vue
+++ b/app/components/tools/PromptCard.vue
@@ -3,10 +3,6 @@ const props = defineProps<{
   description: string
   prompt: string
   icon?: string
-  deeplinks: {
-    cursor: string
-    claude: string
-  }
 }>()
 
 const { copied, copy } = useClipboard()
@@ -21,14 +17,14 @@ const previewText = computed(() => {
   return `${props.prompt.slice(0, previewLimit)}…`
 })
 
-async function openInCursor() {
+function openInCursor() {
   track('Nuxi Prompt Opened', { ide: 'cursor', source: 'nuxt-agent' })
-  await openPromptInCursor(props.prompt)
+  openPromptInCursor(props.prompt)
 }
 
-async function openInClaudeCode() {
+function openInClaudeCode() {
   track('Nuxi Prompt Opened', { ide: 'claude', source: 'nuxt-agent' })
-  await openPromptInClaudeCode(props.prompt)
+  openPromptInClaudeCode(props.prompt)
 }
 
 function copyPrompt() {
diff --git a/app/composables/useIdeDeeplink.ts b/app/composables/useIdeDeeplink.ts
index 4eba4b596..3cea763e8 100644
--- a/app/composables/useIdeDeeplink.ts
+++ b/app/composables/useIdeDeeplink.ts
@@ -3,16 +3,7 @@ import {
   buildCursorBrowserUrl
 } from '~~/layers/nuxi/shared/utils/ide-deeplinks'
 
-/**
- * Opens a prompt in Cursor or Claude Code via browser deeplinks.
- *
- * Both Cursor and Claude Desktop have known, unresolved bugs in their deeplink
- * URL parsers that can reject an otherwise-valid, correctly-encoded prompt
- * (e.g. Cursor's "Invalid text for prompt" — see
- * https://forum.cursor.com/t/error-handling-deep-link-invalid-text-for-prompt/149270).
- * Since the webpage has no way to detect that failure, the prompt is always
- * copied to the clipboard first as a safety net, regardless of URL length.
- */
+/** Opens a prompt in Cursor or Claude Code via browser deeplinks, copying it to the clipboard as a fallback. */
 export const useIdeDeeplink = () => {
   const toast = useToast()
 
@@ -21,15 +12,17 @@ export const useIdeDeeplink = () => {
   )
 
   function openDeeplink(url: string) {
-    window.location.assign(url)
+    window.open(url, '_self')
   }
 
-  async function copyPromptToClipboard(prompt: string) {
+  async function copyPromptToClipboard(prompt: string, wasShortened = false) {
     try {
       await navigator.clipboard.writeText(prompt)
       toast.add({
         title: 'Prompt copied',
-        description: `Paste with ${pasteShortcut.value} if it doesn't appear automatically`,
+        description: wasShortened
+          ? `The opened prompt was shortened — paste the full prompt with ${pasteShortcut.value} if needed`
+          : `Paste with ${pasteShortcut.value} if it doesn't appear automatically`,
         icon: 'i-lucide-clipboard-check'
       })
     } catch {
@@ -37,16 +30,16 @@ export const useIdeDeeplink = () => {
     }
   }
 
-  async function openInCursor(prompt: string) {
-    const { url } = buildCursorBrowserUrl(prompt)
-    await copyPromptToClipboard(prompt)
+  function openInCursor(prompt: string) {
+    const { url, needsClipboardFallback } = buildCursorBrowserUrl(prompt)
     openDeeplink(url)
+    void copyPromptToClipboard(prompt, needsClipboardFallback)
   }
 
-  async function openInClaudeCode(prompt: string) {
-    const { url } = buildClaudeCodeBrowserUrl(prompt)
-    await copyPromptToClipboard(prompt)
+  function openInClaudeCode(prompt: string) {
+    const { url, needsClipboardFallback } = buildClaudeCodeBrowserUrl(prompt)
     openDeeplink(url)
+    void copyPromptToClipboard(prompt, needsClipboardFallback)
   }
 
   return {
diff --git a/app/composables/useModules.ts b/app/composables/useModules.ts
index 1f7324938..c006b7bc7 100644
--- a/app/composables/useModules.ts
+++ b/app/composables/useModules.ts
@@ -39,7 +39,7 @@ export const moduleIcon = function (category: string) {
   return iconsMap[category as keyof typeof iconsMap] || 'i-lucide-box'
 }
 
-type ModulePromptInfo = Pick<Module, 'name' | 'npm' | 'description' | 'website' | 'repo'>
+export type ModulePromptInfo = Pick<Module, 'name' | 'npm' | 'description' | 'website' | 'repo'>
 
 export function buildModuleInstallCommand(names: string | string[]): string {
   const moduleNames = Array.isArray(names) ? names.join(' ') : names
@@ -47,16 +47,17 @@ export function buildModuleInstallCommand(names: string | string[]): string {
 }
 
 export function buildModuleAgentPrompt(module: ModulePromptInfo): string {
-  const lines = [`Install and configure the Nuxt module **${module.npm || module.name}**: ${module.description || ''}`]
+  const lines = [`Install and configure the Nuxt module ${module.npm || module.name}: ${module.description || ''}`]
   if (module.website) lines.push(`Docs: ${module.website}`)
   if (module.repo) lines.push(`GitHub: https://github.com/${module.repo}`)
-  lines.push(`\nSteps:\n1. Run \`${buildModuleInstallCommand(module.name)}\`\n2. Read the module documentation and add recommended configuration in \`nuxt.config.ts\`\n3. List any required environment variables in \`.env.example\` without filling in actual values`)
+  // Avoid the literal `.env` string: Cursor's deeplink handler rejects prompts matching /\.env(\b|\W)/ with "Invalid text for prompt".
+  lines.push(`\nSteps:\n1. Run \`${buildModuleInstallCommand(module.name)}\`\n2. Read the module documentation and add recommended configuration in \`nuxt.config.ts\`\n3. List any required environment variables in the example env file without filling in actual values`)
   return lines.join('\n')
 }
 
 export function buildBulkModuleAgentPrompt(modules: ModulePromptInfo[]): string {
   const modulesList = modules.map((m) => {
-    const lines = [`- ${m.npm}: ${m.description}`]
+    const lines = [`- ${m.npm || m.name}: ${m.description || ''}`]
     if (m.website) lines.push(`  Docs: ${m.website}`)
     if (m.repo) lines.push(`  GitHub: https://github.com/${m.repo}`)
     return lines.join('\n')
@@ -70,10 +71,46 @@ ${modulesList}
 Steps:
 1. Run \`${buildModuleInstallCommand(moduleNames)}\` to install all modules at once
 2. For each module, read its documentation and add the recommended configuration in \`nuxt.config.ts\`
-3. List any required environment variables in \`.env.example\` without filling in actual values
+3. List any required environment variables in the example env file without filling in actual values
 4. Verify the setup is correct by checking that the modules are properly registered`
 }
 
+/** Shared copy/open actions for a single module's install command & agent prompt, tagged with an analytics `source`. */
+export function useModuleInstallActions(module: () => ModulePromptInfo, source: string) {
+  const { copy } = useClipboard()
+  const { track } = useAnalytics()
+  const { openInCursor, openInClaudeCode } = useIdeDeeplink()
+
+  const installCommand = computed(() => buildModuleInstallCommand(module().name))
+  const agentPrompt = computed(() => buildModuleAgentPrompt(module()))
+
+  function copyInstall() {
+    track('Module Install Command Copied', { module: module().name, source })
+    copy(installCommand.value, { title: 'Command copied to clipboard:', description: installCommand.value })
+  }
+
+  function copyPrompt() {
+    track('Module Agent Prompt Copied', { module: module().name, source })
+    copy(agentPrompt.value, {
+      title: 'Agent prompt copied!',
+      description: module().npm || module().name,
+      icon: 'i-custom-ai'
+    })
+  }
+
+  function openCursor() {
+    track('Module Prompt Opened', { module: module().name, ide: 'cursor', source })
+    openInCursor(agentPrompt.value)
+  }
+
+  function openClaude() {
+    track('Module Prompt Opened', { module: module().name, ide: 'claude', source })
+    openInClaudeCode(agentPrompt.value)
+  }
+
+  return { installCommand, agentPrompt, copyInstall, copyPrompt, openCursor, openClaude }
+}
+
 export const sorts: Filter[] = [
   { key: 'downloads', label: 'Downloads' },
   { key: 'stars', label: 'Stars' },
diff --git a/app/pages/modules/index.vue b/app/pages/modules/index.vue
index 8e18ae88f..37b11a908 100644
--- a/app/pages/modules/index.vue
+++ b/app/pages/modules/index.vue
@@ -72,7 +72,7 @@ function selectModuleRange(module: Module) {
 
   if (lastSelectedIndex.value === null) {
     lastSelectedIndex.value = currentIndex
-    modulesToAdd.value = [module]
+    toggleModuleSelection(module)
     return
   }
 
@@ -169,14 +169,14 @@ const copyAgentPrompt = () => {
   })
 }
 
-async function openBulkPromptInCursor() {
+function openBulkPromptInCursor() {
   track('Modules Agent Prompt Opened', { count: modulesToAdd.value.length, ide: 'cursor' })
-  await openInCursor(buildBulkModuleAgentPrompt(modulesToAdd.value))
+  openInCursor(buildBulkModuleAgentPrompt(modulesToAdd.value))
 }
 
-async function openBulkPromptInClaudeCode() {
+function openBulkPromptInClaudeCode() {
   track('Modules Agent Prompt Opened', { count: modulesToAdd.value.length, ide: 'claude' })
-  await openInClaudeCode(buildBulkModuleAgentPrompt(modulesToAdd.value))
+  openInClaudeCode(buildBulkModuleAgentPrompt(modulesToAdd.value))
 }
 
 const agentPromptItems = computed<DropdownMenuItem[]>(() => [
diff --git a/layers/nuxi/app/components/chat/ChatContent.vue b/layers/nuxi/app/components/chat/ChatContent.vue
index d83a017cb..d8f7ea175 100644
--- a/layers/nuxi/app/components/chat/ChatContent.vue
+++ b/layers/nuxi/app/components/chat/ChatContent.vue
@@ -214,7 +214,9 @@ function getUserTextParts(message: UIMessage) {
         <UChatTool v-bind="getRichToolHeader(part as ToolPart, 'show_prompt')" />
         <ToolsPromptCard
           v-if="showPromptCard(part as ToolPart) && getPromptOutput(part.output)"
-          v-bind="getPromptOutput(part.output)!"
+          :description="getPromptOutput(part.output)!.description"
+          :prompt="getPromptOutput(part.output)!.prompt"
+          :icon="getPromptOutput(part.output)!.icon"
         />
       </template>
 

From f8cbfef767cbcb044f2ab91ae0864ac50f5ca575 Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@vercel.com>
Date: Wed, 22 Jul 2026 16:16:57 +0100
Subject: [PATCH 4/5] up

---
 app/composables/useIdeDeeplink.ts | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/composables/useIdeDeeplink.ts b/app/composables/useIdeDeeplink.ts
index 3cea763e8..c1357df0c 100644
--- a/app/composables/useIdeDeeplink.ts
+++ b/app/composables/useIdeDeeplink.ts
@@ -3,7 +3,7 @@ import {
   buildCursorBrowserUrl
 } from '~~/layers/nuxi/shared/utils/ide-deeplinks'
 
-/** Opens a prompt in Cursor or Claude Code via browser deeplinks, copying it to the clipboard as a fallback. */
+/** Opens a prompt in Cursor or Claude Code via browser deeplinks. */
 export const useIdeDeeplink = () => {
   const toast = useToast()
 
@@ -15,14 +15,13 @@ export const useIdeDeeplink = () => {
     window.open(url, '_self')
   }
 
-  async function copyPromptToClipboard(prompt: string, wasShortened = false) {
+  /** Only needed when the URL had to be shortened to fit the browser length limit — the opened prompt is incomplete. */
+  async function copyShortenedPromptToClipboard(prompt: string) {
     try {
       await navigator.clipboard.writeText(prompt)
       toast.add({
         title: 'Prompt copied',
-        description: wasShortened
-          ? `The opened prompt was shortened — paste the full prompt with ${pasteShortcut.value} if needed`
-          : `Paste with ${pasteShortcut.value} if it doesn't appear automatically`,
+        description: `The opened prompt was shortened — paste the full prompt with ${pasteShortcut.value} if needed`,
         icon: 'i-lucide-clipboard-check'
       })
     } catch {
@@ -33,13 +32,13 @@ export const useIdeDeeplink = () => {
   function openInCursor(prompt: string) {
     const { url, needsClipboardFallback } = buildCursorBrowserUrl(prompt)
     openDeeplink(url)
-    void copyPromptToClipboard(prompt, needsClipboardFallback)
+    if (needsClipboardFallback) void copyShortenedPromptToClipboard(prompt)
   }
 
   function openInClaudeCode(prompt: string) {
     const { url, needsClipboardFallback } = buildClaudeCodeBrowserUrl(prompt)
     openDeeplink(url)
-    void copyPromptToClipboard(prompt, needsClipboardFallback)
+    if (needsClipboardFallback) void copyShortenedPromptToClipboard(prompt)
   }
 
   return {

From 285b7c81e43f64a2685826b2a101323c4a300907 Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@vercel.com>
Date: Wed, 22 Jul 2026 17:07:55 +0100
Subject: [PATCH 5/5] add vscode button

---
 app/components/module/ModuleInstallGroup.vue |  7 ++-
 app/components/module/ModuleItem.vue         |  8 +++-
 app/components/tools/PromptCard.vue          | 29 +++++++++++-
 app/composables/useIdeDeeplink.ts            | 24 ++++++----
 app/composables/useModules.ts                |  9 +++-
 app/pages/modules/index.vue                  | 12 ++++-
 layers/nuxi/shared/utils/ide-deeplinks.ts    | 46 +++++++++++---------
 7 files changed, 101 insertions(+), 34 deletions(-)

diff --git a/app/components/module/ModuleInstallGroup.vue b/app/components/module/ModuleInstallGroup.vue
index 754eaa378..24f701b72 100644
--- a/app/components/module/ModuleInstallGroup.vue
+++ b/app/components/module/ModuleInstallGroup.vue
@@ -14,7 +14,7 @@ const props = withDefaults(
   }
 )
 
-const { installCommand, copyInstall, copyPrompt, openCursor, openClaude } = useModuleInstallActions(() => props.module, 'install-group')
+const { installCommand, copyInstall, copyPrompt, openCursor, openClaude, openVSCode } = useModuleInstallActions(() => props.module, 'install-group')
 
 const items = computed<DropdownMenuItem[][]>(() => [
   [
@@ -39,6 +39,11 @@ const items = computed<DropdownMenuItem[][]>(() => [
       label: 'Open in Claude Code',
       icon: 'i-simple-icons-anthropic',
       onSelect: openClaude
+    },
+    {
+      label: 'Open in VS Code',
+      icon: 'i-simple-icons-visualstudiocode',
+      onSelect: openVSCode
     }
   ]
 ])
diff --git a/app/components/module/ModuleItem.vue b/app/components/module/ModuleItem.vue
index 28840586c..a91efb2ac 100644
--- a/app/components/module/ModuleItem.vue
+++ b/app/components/module/ModuleItem.vue
@@ -28,7 +28,8 @@ const {
   copyInstall: copyInstallCommand,
   copyPrompt: copyAgentPrompt,
   openCursor: openPromptInCursor,
-  openClaude: openPromptInClaudeCode
+  openClaude: openPromptInClaudeCode,
+  openVSCode: openPromptInVSCode
 } = useModuleInstallActions(() => props.module, 'context-menu')
 
 const relativeDate = useTimeAgo(() =>
@@ -87,6 +88,11 @@ const items = computed(() => [
       label: 'Open in Claude Code',
       icon: 'i-simple-icons-anthropic',
       onSelect: openPromptInClaudeCode
+    },
+    {
+      label: 'Open in VS Code',
+      icon: 'i-simple-icons-visualstudiocode',
+      onSelect: openPromptInVSCode
     }
   ],
   [
diff --git a/app/components/tools/PromptCard.vue b/app/components/tools/PromptCard.vue
index f4b44ccb6..fb6f91079 100644
--- a/app/components/tools/PromptCard.vue
+++ b/app/components/tools/PromptCard.vue
@@ -7,7 +7,11 @@ const props = defineProps<{
 
 const { copied, copy } = useClipboard()
 const { track } = useAnalytics()
-const { openInCursor: openPromptInCursor, openInClaudeCode: openPromptInClaudeCode } = useIdeDeeplink()
+const {
+  openInCursor: openPromptInCursor,
+  openInClaudeCode: openPromptInClaudeCode,
+  openInVSCode: openPromptInVSCode
+} = useIdeDeeplink()
 const expanded = ref(false)
 
 const previewLimit = 200
@@ -27,6 +31,11 @@ function openInClaudeCode() {
   openPromptInClaudeCode(props.prompt)
 }
 
+function openInVSCode() {
+  track('Nuxi Prompt Opened', { ide: 'vscode', source: 'nuxt-agent' })
+  openPromptInVSCode(props.prompt)
+}
+
 function copyPrompt() {
   track('Nuxi Prompt Copied', { source: 'nuxt-agent' })
   copy(props.prompt, {
@@ -104,6 +113,24 @@ function copyPrompt() {
         </span>
       </UTooltip>
 
+      <UTooltip
+        arrow
+        :delay-duration="700"
+        :content="{ side: 'top', sideOffset: 6 }"
+        text="Open prompt in VS Code (Copilot Chat)"
+      >
+        <span class="inline-flex">
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="outline"
+            icon="i-simple-icons-visualstudiocode"
+            label="Open in VS Code"
+            @click="openInVSCode"
+          />
+        </span>
+      </UTooltip>
+
       <UTooltip
         arrow
         :delay-duration="700"
diff --git a/app/composables/useIdeDeeplink.ts b/app/composables/useIdeDeeplink.ts
index c1357df0c..c246107fd 100644
--- a/app/composables/useIdeDeeplink.ts
+++ b/app/composables/useIdeDeeplink.ts
@@ -1,9 +1,10 @@
 import {
   buildClaudeCodeBrowserUrl,
-  buildCursorBrowserUrl
+  buildCursorBrowserUrl,
+  buildVSCodeBrowserUrl
 } from '~~/layers/nuxi/shared/utils/ide-deeplinks'
 
-/** Opens a prompt in Cursor or Claude Code via browser deeplinks. */
+/** Opens a prompt in Cursor, Claude Code or VS Code (Copilot Chat) via browser deeplinks. */
 export const useIdeDeeplink = () => {
   const toast = useToast()
 
@@ -29,21 +30,28 @@ export const useIdeDeeplink = () => {
     }
   }
 
-  function openInCursor(prompt: string) {
-    const { url, needsClipboardFallback } = buildCursorBrowserUrl(prompt)
+  function openWithFallback(build: (prompt: string) => { url: string, needsClipboardFallback: boolean }, prompt: string) {
+    const { url, needsClipboardFallback } = build(prompt)
     openDeeplink(url)
     if (needsClipboardFallback) void copyShortenedPromptToClipboard(prompt)
   }
 
+  function openInCursor(prompt: string) {
+    openWithFallback(buildCursorBrowserUrl, prompt)
+  }
+
   function openInClaudeCode(prompt: string) {
-    const { url, needsClipboardFallback } = buildClaudeCodeBrowserUrl(prompt)
-    openDeeplink(url)
-    if (needsClipboardFallback) void copyShortenedPromptToClipboard(prompt)
+    openWithFallback(buildClaudeCodeBrowserUrl, prompt)
+  }
+
+  function openInVSCode(prompt: string) {
+    openWithFallback(buildVSCodeBrowserUrl, prompt)
   }
 
   return {
     pasteShortcut,
     openInCursor,
-    openInClaudeCode
+    openInClaudeCode,
+    openInVSCode
   }
 }
diff --git a/app/composables/useModules.ts b/app/composables/useModules.ts
index c006b7bc7..bdd97874c 100644
--- a/app/composables/useModules.ts
+++ b/app/composables/useModules.ts
@@ -79,7 +79,7 @@ Steps:
 export function useModuleInstallActions(module: () => ModulePromptInfo, source: string) {
   const { copy } = useClipboard()
   const { track } = useAnalytics()
-  const { openInCursor, openInClaudeCode } = useIdeDeeplink()
+  const { openInCursor, openInClaudeCode, openInVSCode } = useIdeDeeplink()
 
   const installCommand = computed(() => buildModuleInstallCommand(module().name))
   const agentPrompt = computed(() => buildModuleAgentPrompt(module()))
@@ -108,7 +108,12 @@ export function useModuleInstallActions(module: () => ModulePromptInfo, source:
     openInClaudeCode(agentPrompt.value)
   }
 
-  return { installCommand, agentPrompt, copyInstall, copyPrompt, openCursor, openClaude }
+  function openVSCode() {
+    track('Module Prompt Opened', { module: module().name, ide: 'vscode', source })
+    openInVSCode(agentPrompt.value)
+  }
+
+  return { installCommand, agentPrompt, copyInstall, copyPrompt, openCursor, openClaude, openVSCode }
 }
 
 export const sorts: Filter[] = [
diff --git a/app/pages/modules/index.vue b/app/pages/modules/index.vue
index 37b11a908..1949896bd 100644
--- a/app/pages/modules/index.vue
+++ b/app/pages/modules/index.vue
@@ -15,7 +15,7 @@ const el = useTemplateRef<HTMLElement>('el')
 const { replaceRoute } = useFilters('modules')
 const { fetchList, filteredModules, q, categories, modules, stats, selectedSort, selectedOrder, selectedCategory, sorts } = useModules()
 const { track } = useAnalytics()
-const { openInCursor, openInClaudeCode } = useIdeDeeplink()
+const { openInCursor, openInClaudeCode, openInVSCode } = useIdeDeeplink()
 
 const cacheControl = useResponseHeader('Cache-Control')
 const cdnCacheControl = useResponseHeader('CDN-Cache-Control')
@@ -179,6 +179,11 @@ function openBulkPromptInClaudeCode() {
   openInClaudeCode(buildBulkModuleAgentPrompt(modulesToAdd.value))
 }
 
+function openBulkPromptInVSCode() {
+  track('Modules Agent Prompt Opened', { count: modulesToAdd.value.length, ide: 'vscode' })
+  openInVSCode(buildBulkModuleAgentPrompt(modulesToAdd.value))
+}
+
 const agentPromptItems = computed<DropdownMenuItem[]>(() => [
   {
     label: 'Copy agent prompt',
@@ -194,6 +199,11 @@ const agentPromptItems = computed<DropdownMenuItem[]>(() => [
     label: 'Open in Claude Code',
     icon: 'i-simple-icons-anthropic',
     onSelect: openBulkPromptInClaudeCode
+  },
+  {
+    label: 'Open in VS Code',
+    icon: 'i-simple-icons-visualstudiocode',
+    onSelect: openBulkPromptInVSCode
   }
 ])
 
diff --git a/layers/nuxi/shared/utils/ide-deeplinks.ts b/layers/nuxi/shared/utils/ide-deeplinks.ts
index 65ada8962..6819511b9 100644
--- a/layers/nuxi/shared/utils/ide-deeplinks.ts
+++ b/layers/nuxi/shared/utils/ide-deeplinks.ts
@@ -44,19 +44,12 @@ function fitEncodedQuery(prompt: string, prefix: string, maxUrlLength: number):
   return { q: `${q.trimEnd()}…`, truncated: true }
 }
 
-/** Cursor deeplink — aligned with Nuxt UI ProsePrompt. */
-export function buildCursorPromptUrl(prompt: string): string {
-  const text = truncatePrompt(prompt)
-  return `cursor://anysphere.cursor-deeplink/prompt?text=${encodeURIComponent(text)}`
-}
-
-/** Browser-safe Cursor deeplink — fits under Chrome custom-scheme URL limit. */
-export function buildCursorBrowserUrl(prompt: string): {
+/** Browser-safe custom-scheme deeplink — fits under Chrome's URL length limit. */
+function buildBrowserDeeplink(prompt: string, prefix: string): {
   url: string
   needsClipboardFallback: boolean
 } {
   const normalized = truncatePrompt(prompt, PROMPT_CARD_MAX_LENGTH)
-  const prefix = 'cursor://anysphere.cursor-deeplink/prompt?text='
   const { q, truncated } = fitEncodedQuery(normalized, prefix, CLAUDE_BROWSER_MAX_URL)
   return {
     url: `${prefix}${encodeURIComponent(q)}`,
@@ -64,6 +57,17 @@ export function buildCursorBrowserUrl(prompt: string): {
   }
 }
 
+/** Cursor deeplink — aligned with Nuxt UI ProsePrompt. */
+export function buildCursorPromptUrl(prompt: string): string {
+  const text = truncatePrompt(prompt)
+  return `cursor://anysphere.cursor-deeplink/prompt?text=${encodeURIComponent(text)}`
+}
+
+/** Browser-safe Cursor deeplink — fits under Chrome custom-scheme URL limit. */
+export function buildCursorBrowserUrl(prompt: string) {
+  return buildBrowserDeeplink(prompt, 'cursor://anysphere.cursor-deeplink/prompt?text=')
+}
+
 /** Claude Desktop deeplink — aligned with Nuxt UI ProsePrompt. https://support.claude.com/en/articles/14729294 */
 export function buildClaudeCodeUrl(prompt: string): string {
   const text = truncatePrompt(prompt)
@@ -71,17 +75,19 @@ export function buildClaudeCodeUrl(prompt: string): string {
 }
 
 /** Browser-safe Claude deeplink — fits under Chrome custom-scheme URL limit. */
-export function buildClaudeCodeBrowserUrl(prompt: string): {
-  url: string
-  needsClipboardFallback: boolean
-} {
-  const normalized = truncatePrompt(prompt, PROMPT_CARD_MAX_LENGTH)
-  const prefix = 'claude://code/new?q='
-  const { q, truncated } = fitEncodedQuery(normalized, prefix, CLAUDE_BROWSER_MAX_URL)
-  return {
-    url: `${prefix}${encodeURIComponent(q)}`,
-    needsClipboardFallback: truncated || q !== normalized
-  }
+export function buildClaudeCodeBrowserUrl(prompt: string) {
+  return buildBrowserDeeplink(prompt, 'claude://code/new?q=')
+}
+
+/** VS Code + GitHub Copilot Chat deeplink. */
+export function buildVSCodeUrl(prompt: string): string {
+  const text = truncatePrompt(prompt)
+  return `vscode://GitHub.Copilot-Chat/chat?agent=agent&prompt=${encodeURIComponent(text)}`
+}
+
+/** Browser-safe VS Code deeplink — fits under Chrome custom-scheme URL limit. */
+export function buildVSCodeBrowserUrl(prompt: string) {
+  return buildBrowserDeeplink(prompt, 'vscode://GitHub.Copilot-Chat/chat?agent=agent&prompt=')
 }
 
 export function buildIdeDeeplinks(prompt: string) {