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/ModuleInstallGroup.vue b/app/components/module/ModuleInstallGroup.vue
new file mode 100644
index 000000000..24f701b72
--- /dev/null
+++ b/app/components/module/ModuleInstallGroup.vue
@@ -0,0 +1,75 @@
+<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 { installCommand, copyInstall, copyPrompt, openCursor, openClaude, openVSCode } = useModuleInstallActions(() => props.module, 'install-group')
+
+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
+    },
+    {
+      label: 'Open in VS Code',
+      icon: 'i-simple-icons-visualstudiocode',
+      onSelect: openVSCode
+    }
+  ]
+])
+</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 e710ce96f..850681285 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,17 +13,25 @@ const props = withDefaults(
     showBadge?: boolean
     isAdded: boolean
     showAddButton?: boolean
+    selectable?: boolean
     sortKey?: string
   }>(),
   {
     showBadge: true,
     showAddButton: true,
+    selectable: false,
     sortKey: 'downloads'
   }
 )
 
-const { copy } = useClipboard()
 const { track } = useAnalytics()
+const {
+  copyInstall: copyInstallCommand,
+  copyPrompt: copyAgentPrompt,
+  openCursor: openPromptInCursor,
+  openClaude: openPromptInClaudeCode,
+  openVSCode: openPromptInVSCode
+} = useModuleInstallActions(() => props.module, 'context-menu')
 
 const publishedAgo = useTimeAgo(() => props.module.stats.publishedAt)
 const createdAgo = useTimeAgo(() => props.module.stats.createdAt)
@@ -37,12 +46,6 @@ const staticModuleDate = computed(() =>
     : formatDateByLocale('en', props.module.stats.createdAt)
 )
 
-function copyInstallCommand(moduleName: string) {
-  track('Module Install Command Copied', { module: moduleName })
-  const command = `npx nuxt@latest module add ${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 })
@@ -54,9 +57,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)
   }
 }
 
@@ -70,7 +74,29 @@ 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
+    },
+    {
+      label: 'Open in VS Code',
+      icon: 'i-simple-icons-visualstudiocode',
+      onSelect: openPromptInVSCode
     }
   ],
   [
@@ -237,7 +263,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 2d92dbb4f..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(() => `npx nuxt@latest module add ${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')
-})
-
-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' })
-}
+const { copyInstall, copyPrompt } = useModuleInstallActions(() => ({
+  name: props.slug,
+  npm: props.npm || '',
+  description: props.description || '',
+  website: props.website || '',
+  repo: props.repo || ''
+}), 'nuxt-agent')
 </script>
 
 <template>
diff --git a/app/components/tools/PromptCard.vue b/app/components/tools/PromptCard.vue
index 34167be05..fb6f91079 100644
--- a/app/components/tools/PromptCard.vue
+++ b/app/components/tools/PromptCard.vue
@@ -1,23 +1,17 @@
 <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
-    claude: string
-  }
 }>()
 
-const { copied } = useClipboard()
-const toast = useToast()
+const { copied, copy } = useClipboard()
 const { track } = useAnalytics()
+const {
+  openInCursor: openPromptInCursor,
+  openInClaudeCode: openPromptInClaudeCode,
+  openInVSCode: openPromptInVSCode
+} = useIdeDeeplink()
 const expanded = ref(false)
 
 const previewLimit = 200
@@ -27,57 +21,24 @@ 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() {
+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)
+  openPromptInCursor(props.prompt)
 }
 
-async function openInClaudeCode() {
+function openInClaudeCode() {
   track('Nuxi Prompt Opened', { ide: 'claude', source: 'nuxt-agent' })
+  openPromptInClaudeCode(props.prompt)
+}
 
-  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)
+function openInVSCode() {
+  track('Nuxi Prompt Opened', { ide: 'vscode', source: 'nuxt-agent' })
+  openPromptInVSCode(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'
@@ -152,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
new file mode 100644
index 000000000..c246107fd
--- /dev/null
+++ b/app/composables/useIdeDeeplink.ts
@@ -0,0 +1,57 @@
+import {
+  buildClaudeCodeBrowserUrl,
+  buildCursorBrowserUrl,
+  buildVSCodeBrowserUrl
+} from '~~/layers/nuxi/shared/utils/ide-deeplinks'
+
+/** Opens a prompt in Cursor, Claude Code or VS Code (Copilot Chat) via browser deeplinks. */
+export const useIdeDeeplink = () => {
+  const toast = useToast()
+
+  const pasteShortcut = computed(() =>
+    typeof navigator !== 'undefined' && navigator.platform?.includes('Mac') ? '⌘V' : 'Ctrl+V'
+  )
+
+  function openDeeplink(url: string) {
+    window.open(url, '_self')
+  }
+
+  /** 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: `The opened prompt was shortened — paste the full prompt with ${pasteShortcut.value} if needed`,
+        icon: 'i-lucide-clipboard-check'
+      })
+    } catch {
+      // Clipboard can fail without blocking the deeplink handoff.
+    }
+  }
+
+  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) {
+    openWithFallback(buildClaudeCodeBrowserUrl, prompt)
+  }
+
+  function openInVSCode(prompt: string) {
+    openWithFallback(buildVSCodeBrowserUrl, prompt)
+  }
+
+  return {
+    pasteShortcut,
+    openInCursor,
+    openInClaudeCode,
+    openInVSCode
+  }
+}
diff --git a/app/composables/useModules.ts b/app/composables/useModules.ts
index e462ee81b..beaf7031c 100644
--- a/app/composables/useModules.ts
+++ b/app/composables/useModules.ts
@@ -39,6 +39,95 @@ export const moduleIcon = function (category: string) {
   return iconsMap[category as keyof typeof iconsMap] || 'i-lucide-box'
 }
 
+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
+  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}`)
+  // 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.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')
+  }).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 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, openInVSCode } = 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)
+  }
+
+  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[] = [
+  { 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 +159,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/[slug].vue b/app/pages/modules/[slug].vue
index 46f70a951..514a21b80 100644
--- a/app/pages/modules/[slug].vue
+++ b/app/pages/modules/[slug].vue
@@ -118,7 +118,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>
@@ -142,6 +152,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://npmx.dev/package-stats/${module.npm}/v/${module.stats.version}?granularity=monthly`" target="_blank">
@@ -193,6 +207,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 3a5b6a415..2f77d6be5 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'
 
@@ -15,6 +16,7 @@ const { replaceRoute } = useFilters('modules')
 const { fetchList, filteredModules, q, categories, modules, stats, selectedSort, selectedOrder, selectedCategory, sorts } = useModules()
 const { health } = useModuleHealth()
 const { track } = useAnalytics()
+const { openInCursor, openInClaudeCode, openInVSCode } = useIdeDeeplink()
 
 // Merge via computed, not mutation: useFetch `data` is a shallowRef (Nuxt 4
 // default), so writing module.health in place would not trigger a re-render.
@@ -59,9 +61,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
+    toggleModuleSelection(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()
+    }
   }
 })
 
@@ -117,14 +165,15 @@ watch(
   () => {
     clearLoadMoreTimer()
     isLoading.value = false
+    lastSelectedIndex.value = null
     visibleCount.value = INITIAL_VISIBLE
   }
 )
 
 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`
@@ -132,22 +181,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!',
@@ -156,8 +191,47 @@ Steps:
   })
 }
 
+function openBulkPromptInCursor() {
+  track('Modules Agent Prompt Opened', { count: modulesToAdd.value.length, ide: 'cursor' })
+  openInCursor(buildBulkModuleAgentPrompt(modulesToAdd.value))
+}
+
+function openBulkPromptInClaudeCode() {
+  track('Modules Agent Prompt Opened', { count: modulesToAdd.value.length, ide: 'claude' })
+  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',
+    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
+  },
+  {
+    label: 'Open in VS Code',
+    icon: 'i-simple-icons-visualstudiocode',
+    onSelect: openBulkPromptInVSCode
+  }
+])
+
 const clearAllModules = () => {
   modulesToAdd.value = []
+  lastSelectedIndex.value = null
 }
 </script>
 
@@ -292,8 +366,9 @@ const clearAllModules = () => {
       <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
@@ -306,10 +381,12 @@ const clearAllModules = () => {
             v-for="module in displayedModules"
             :key="module.name"
             :module="module"
+            :is-added="addedModuleNames.has(module.name)"
             :sort-key="String(selectedSort.key)"
-            :is-added="modulesToAdd.some(m => m.name === module.name)"
+            selectable
             @add="modulesToAdd.push(module)"
             @remove="modulesToAdd = modulesToAdd.filter(m => m.name !== module.name)"
+            @select="handleModuleSelect"
           />
 
           <template v-if="isLoading">
@@ -350,15 +427,34 @@ const clearAllModules = () => {
           :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"
@@ -372,35 +468,40 @@ const clearAllModules = () => {
                   </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
-                    }"
-                  >
+                  <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>
@@ -413,3 +514,24 @@ const clearAllModules = () => {
     </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>
diff --git a/layers/nuxi/agent/lib/base-instructions.ts b/layers/nuxi/agent/lib/base-instructions.ts
index 4721b0715..66775aeab 100644
--- a/layers/nuxi/agent/lib/base-instructions.ts
+++ b/layers/nuxi/agent/lib/base-instructions.ts
@@ -40,7 +40,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/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>
 
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..6819511b9 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
@@ -55,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)}`,
@@ -75,57 +57,42 @@ 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('&')}`
+/** 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=')
 }
 
-/** Browser Claude deeplink — prefills `q` when the URL fits, else signals clipboard fallback. */
-export function buildClaudeCodeBrowserUrl(prompt: string, repo?: 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 }
-  }
+/** 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)}`
+}
 
-  baseParams.push(`q=${encodeURIComponent(q)}`)
-  const url = `claude-cli://open?${baseParams.join('&')}`
+/** Browser-safe Claude deeplink — fits under Chrome custom-scheme URL limit. */
+export function buildClaudeCodeBrowserUrl(prompt: string) {
+  return buildBrowserDeeplink(prompt, 'claude://code/new?q=')
+}
 
-  if (url.length > CLAUDE_BROWSER_MAX_URL) {
-    const fallbackUrl = normalizedRepo
-      ? `claude-cli://open?repo=${encodeURIComponent(normalizedRepo)}`
-      : 'claude-cli://open'
-    return { url: fallbackUrl, needsClipboardFallback: true }
-  }
+/** 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)}`
+}
 
-  return {
-    url,
-    needsClipboardFallback: false
-  }
+/** 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, 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 +103,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 +116,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,