From 1df4623d804fcbad0bfac1d52a9b5075c168559d Mon Sep 17 00:00:00 2001
From: MK <fengmk2@gmail.com>
Date: Fri, 29 May 2026 14:45:23 +0800
Subject: [PATCH 1/2] feat(docs): add Copy Prompt button for AI assistants

Add a reusable `CopyPrompt` Vue component that copies a ready-made
getting-started prompt to the clipboard, similar to the button on
flueframework.com. The prompt introduces Vite+, points the agent at
https://viteplus.dev/llms-full.txt, and lists the install and core `vp`
commands.

The component is registered globally so any Markdown page can use it, and
is placed in the home-page hero CTA row and at the top of the Getting
Started guide.

Pointer clicks drop focus so the theme's outline-based `.button` border is
not stripped by the global `button:focus:not(:focus-visible)` reset (which
only affects real <button> elements, not the theme's <a> buttons).
---
 .../theme/components/CopyPrompt.vue           | 100 ++++++++++++++++++
 .../.vitepress/theme/components/home/Hero.vue |   3 +-
 docs/.vitepress/theme/index.ts                |   5 +
 docs/guide/index.md                           |   4 +
 4 files changed, 111 insertions(+), 1 deletion(-)
 create mode 100644 docs/.vitepress/theme/components/CopyPrompt.vue

diff --git a/docs/.vitepress/theme/components/CopyPrompt.vue b/docs/.vitepress/theme/components/CopyPrompt.vue
new file mode 100644
index 0000000000..0a7fd8d7ff
--- /dev/null
+++ b/docs/.vitepress/theme/components/CopyPrompt.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+import { onBeforeUnmount, ref } from 'vue';
+
+// Default getting-started prompt handed to an AI coding assistant. Every
+// command and URL here is verified against the Getting Started guide and the
+// live llms-full.txt docs dump.
+const DEFAULT_PROMPT = `I want to use Vite+ in my project. Vite+ is the unified toolchain for the web behind the \`vp\` CLI — one tool combining Vite, Rolldown, Vitest, tsdown, Oxlint, Oxfmt, and Vite Task, plus runtime and package-manager management.
+
+First, read https://viteplus.dev/llms-full.txt to learn Vite+'s commands and configuration.
+
+Install the \`vp\` CLI:
+- macOS / Linux: curl -fsSL https://vite.plus | bash
+- Windows (PowerShell): irm https://vite.plus/ps1 | iex
+
+Then open a new terminal and run \`vp help\`. To scaffold a new project run \`vp create\`; to move an existing Vite project onto Vite+ run \`vp migrate\`.
+
+Day-to-day commands: \`vp install\` (dependencies), \`vp dev\` (dev server), \`vp check\` (format + lint + type-check), \`vp test\` (tests), and \`vp build\` (production build).
+
+Help me get set up and explain anything I should know.`;
+
+const props = withDefaults(
+  defineProps<{
+    prompt?: string;
+    label?: string;
+  }>(),
+  {
+    prompt: DEFAULT_PROMPT,
+    label: 'Copy Prompt',
+  },
+);
+
+const state = ref<'idle' | 'copied' | 'error'>('idle');
+let resetTimer: ReturnType<typeof setTimeout> | null = null;
+
+const flash = (next: 'copied' | 'error') => {
+  state.value = next;
+  if (resetTimer) {
+    clearTimeout(resetTimer);
+  }
+  resetTimer = setTimeout(() => {
+    state.value = 'idle';
+    resetTimer = null;
+  }, 1600);
+};
+
+const copyPrompt = async (event: MouseEvent) => {
+  // The theme draws the `.button` border with an `outline`, but a global reset
+  // (`button:focus:not(:focus-visible) { outline: none !important }`) strips it
+  // after a mouse click. The theme only ever uses `.button` on <a> tags, so this
+  // bites only real <button> elements. For pointer activation (event.detail > 0)
+  // drop focus so the button returns to its resting state and keeps its border;
+  // keyboard activation (detail === 0) keeps focus so the a11y focus ring shows.
+  if (event.detail > 0) {
+    (event.currentTarget as HTMLElement | null)?.blur();
+  }
+  try {
+    await navigator.clipboard.writeText(props.prompt);
+    flash('copied');
+  } catch {
+    flash('error');
+  }
+};
+
+onBeforeUnmount(() => {
+  if (resetTimer) {
+    clearTimeout(resetTimer);
+  }
+});
+</script>
+
+<template>
+  <button
+    type="button"
+    class="button"
+    :aria-label="`${label} for setting up Vite+ with an AI assistant`"
+    @click="copyPrompt"
+  >
+    <Icon
+      :icon="
+        state === 'copied'
+          ? 'lucide:check'
+          : state === 'error'
+            ? 'lucide:x'
+            : 'lucide:clipboard'
+      "
+      class="size-4"
+      aria-hidden="true"
+    />
+    <span>{{ state === 'copied' ? 'Copied!' : state === 'error' ? 'Could not copy' : label }}</span>
+  </button>
+</template>
+
+<style scoped>
+.button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/home/Hero.vue b/docs/.vitepress/theme/components/home/Hero.vue
index 4f42426625..2408283338 100644
--- a/docs/.vitepress/theme/components/home/Hero.vue
+++ b/docs/.vitepress/theme/components/home/Hero.vue
@@ -12,7 +12,7 @@
         </p>
         <p class="text-sm text-grey">Free and open source under the MIT license.</p>
       </div>
-      <div class="flex items-center gap-5">
+      <div class="flex flex-wrap items-center justify-center gap-5">
         <a href="/guide" target="_self" class="button button--primary"> Get started </a>
         <a
           href="https://voidzero.dev/posts/announcing-vite-plus-alpha"
@@ -22,6 +22,7 @@
         >
           Read the Announcement
         </a>
+        <CopyPrompt />
       </div>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 9d50a93e76..f9644439ea 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -2,6 +2,7 @@
 import BaseTheme from '@voidzero-dev/vitepress-theme/src/viteplus';
 import type { Theme } from 'vitepress';
 
+import CopyPrompt from './components/CopyPrompt.vue';
 import Layout from './Layout.vue';
 import './styles.css';
 import 'virtual:group-icons.css';
@@ -9,4 +10,8 @@ import 'virtual:group-icons.css';
 export default {
   extends: BaseTheme,
   Layout,
+  enhanceApp({ app }) {
+    // Globally available so Markdown pages can use <CopyPrompt /> without an import.
+    app.component('CopyPrompt', CopyPrompt);
+  },
 } satisfies Theme;
diff --git a/docs/guide/index.md b/docs/guide/index.md
index 5f50a38883..45b2c7f1e1 100644
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -4,6 +4,10 @@ Vite+ is the unified toolchain and entry point for web development. It manages y
 
 Vite+ ships in two parts: `vp`, the global command-line tool, and `vite-plus`, the local package installed in each project. If you already have a Vite project, use [`vp migrate`](/guide/migrate) to migrate it to Vite+, or paste our [migration prompt](/guide/migrate#migration-prompt) into your coding agent.
 
+Building with an AI assistant? Copy a ready-made setup prompt:
+
+<CopyPrompt />
+
 ## Install `vp`
 
 ### macOS / Linux

From a31333f00d3fe8da99cdb72b892904390132099e Mon Sep 17 00:00:00 2001
From: MK <fengmk2@gmail.com>
Date: Fri, 29 May 2026 14:54:02 +0800
Subject: [PATCH 2/2] style(docs): apply oxfmt formatting to CopyPrompt.vue

The pre-commit lint-staged glob excludes .vue files, so repo-wide
`vp check` flagged the unformatted icon ternary. Collapse it onto one
line as oxfmt expects.
---
 docs/.vitepress/theme/components/CopyPrompt.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/docs/.vitepress/theme/components/CopyPrompt.vue b/docs/.vitepress/theme/components/CopyPrompt.vue
index 0a7fd8d7ff..9eef3182e4 100644
--- a/docs/.vitepress/theme/components/CopyPrompt.vue
+++ b/docs/.vitepress/theme/components/CopyPrompt.vue
@@ -78,11 +78,7 @@ onBeforeUnmount(() => {
   >
     <Icon
       :icon="
-        state === 'copied'
-          ? 'lucide:check'
-          : state === 'error'
-            ? 'lucide:x'
-            : 'lucide:clipboard'
+        state === 'copied' ? 'lucide:check' : state === 'error' ? 'lucide:x' : 'lucide:clipboard'
       "
       class="size-4"
       aria-hidden="true"