From 4584f2996d785783a687c4ef266a63fcbdf6d2a1 Mon Sep 17 00:00:00 2001 From: Muhammad-Owais-Warsi Date: Sat, 16 May 2026 11:04:27 +0100 Subject: [PATCH 1/3] feat(prompt install button): add button to setup paykit via prompt --- apps/web/src/components/docs/package-command.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/apps/web/src/components/docs/package-command.tsx b/apps/web/src/components/docs/package-command.tsx index 3c4ad3b7..6bb87d20 100644 --- a/apps/web/src/components/docs/package-command.tsx +++ b/apps/web/src/components/docs/package-command.tsx @@ -4,9 +4,22 @@ import { Tab, Tabs } from "fumadocs-ui/components/tabs"; import { shikiHighlightOptions } from "@/lib/shiki-themes"; -const managers = ["pnpm", "bun", "npm"] as const; +const managers = ["pnpm", "bun", "npm", "prompt"] as const; + +const PROMPT = `Set up authentication in my project using Paykit (paykitjs npm package) + +1. Install paykitjs. If I already have a database configured in this project, use that - don't set up a new one. +2. Check the runtime used in the project and use the same - don't simply go with npm +3. Create \`src/lib/paykit.ts\` - call createPayKit() with: + - My existing database connection by passing the url directly \`database: \` (or a new pg.Pool() if none exists) + - Add payment provider based on the auth credentials in my env. Example: \`bun add @paykitjs/stripe\` + +4. Set up the route handlers according to the current project framework +5. Create \`src/lib/paykit-client.ts\` - call \`createPayKitClient()\` where \`paykit\` is the object we created when initializing Paykit in \`src/lib/paykit.ts\` +`; function installCommand(pkg: string, manager: string) { + if (manager === "prompt") return PROMPT; if (manager === "npm") return `npm install ${pkg}`; return `${manager} add ${pkg}`; } From 1cb2bfec21ddaa67b3c103be1756c1eb2104b7e1 Mon Sep 17 00:00:00 2001 From: Muhammad-Owais-Warsi Date: Sun, 17 May 2026 10:04:49 +0100 Subject: [PATCH 2/3] feat(prompt install button): fix leak of prompt in docs --- .../src/components/docs/package-command.tsx | 15 +- .../web/hero-title-install-button.tsx | 90 +++++++++++ apps/web/src/components/web/hero-title.tsx | 153 ++++++++---------- apps/web/src/lib/consts.ts | 12 ++ 4 files changed, 166 insertions(+), 104 deletions(-) create mode 100644 apps/web/src/components/web/hero-title-install-button.tsx diff --git a/apps/web/src/components/docs/package-command.tsx b/apps/web/src/components/docs/package-command.tsx index 6bb87d20..3c4ad3b7 100644 --- a/apps/web/src/components/docs/package-command.tsx +++ b/apps/web/src/components/docs/package-command.tsx @@ -4,22 +4,9 @@ import { Tab, Tabs } from "fumadocs-ui/components/tabs"; import { shikiHighlightOptions } from "@/lib/shiki-themes"; -const managers = ["pnpm", "bun", "npm", "prompt"] as const; - -const PROMPT = `Set up authentication in my project using Paykit (paykitjs npm package) - -1. Install paykitjs. If I already have a database configured in this project, use that - don't set up a new one. -2. Check the runtime used in the project and use the same - don't simply go with npm -3. Create \`src/lib/paykit.ts\` - call createPayKit() with: - - My existing database connection by passing the url directly \`database: \` (or a new pg.Pool() if none exists) - - Add payment provider based on the auth credentials in my env. Example: \`bun add @paykitjs/stripe\` - -4. Set up the route handlers according to the current project framework -5. Create \`src/lib/paykit-client.ts\` - call \`createPayKitClient()\` where \`paykit\` is the object we created when initializing Paykit in \`src/lib/paykit.ts\` -`; +const managers = ["pnpm", "bun", "npm"] as const; function installCommand(pkg: string, manager: string) { - if (manager === "prompt") return PROMPT; if (manager === "npm") return `npm install ${pkg}`; return `${manager} add ${pkg}`; } diff --git a/apps/web/src/components/web/hero-title-install-button.tsx b/apps/web/src/components/web/hero-title-install-button.tsx new file mode 100644 index 00000000..36b09b9e --- /dev/null +++ b/apps/web/src/components/web/hero-title-install-button.tsx @@ -0,0 +1,90 @@ +"use client"; + +import { AnimatePresence, motion } from "framer-motion"; +import { Check, ChevronRight, Copy } from "lucide-react"; +import { useCallback, useState } from "react"; + +import { Button } from "../ui/button"; + +export default function HeroTitleInstallButton() { + const [copied, setCopied] = useState(false); + const [hovered, setHovered] = useState(false); + + const handleCopy = useCallback(() => { + void navigator.clipboard.writeText("npx paykitjs init"); + setCopied(true); + setTimeout(() => setCopied(false), 1500); + }, []); + + return ( + + ); +} diff --git a/apps/web/src/components/web/hero-title.tsx b/apps/web/src/components/web/hero-title.tsx index 1d9b7e5a..405108b8 100644 --- a/apps/web/src/components/web/hero-title.tsx +++ b/apps/web/src/components/web/hero-title.tsx @@ -1,21 +1,26 @@ "use client"; -import { AnimatePresence, motion } from "framer-motion"; -import { Check, ChevronRight, Copy, Sparkle } from "lucide-react"; +import { Sparkle } from "lucide-react"; import Link from "next/link"; -import { useCallback, useState } from "react"; + +import { PROMPT } from "@/lib/consts"; import { Button } from "../ui/button"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "../ui/dialog"; +import { ScrollArea } from "../ui/scroll-area"; +import { useCopyButton } from "../ui/use-copy-button"; +import HeroTitleInstallButton from "./hero-title-install-button"; export function HeroTitle() { - const [copied, setCopied] = useState(false); - const [hovered, setHovered] = useState(false); - - const handleCopy = useCallback(() => { - void navigator.clipboard.writeText("npx paykitjs init"); - setCopied(true); - setTimeout(() => setCopied(false), 1500); - }, []); + const [copied, handleCopy] = useCopyButton(() => navigator.clipboard.writeText(PROMPT)); return (
@@ -39,85 +44,53 @@ export function HeroTitle() { inside your app.

-
- - +
+
+
+ + + + } + > + or copy the prompt + + + + Copy the install command + Run this in your terminal to get started. + + +
+ + {PROMPT} + +
+ + + + + + +
+ + +
diff --git a/apps/web/src/lib/consts.ts b/apps/web/src/lib/consts.ts index 8065ac03..d8f07832 100644 --- a/apps/web/src/lib/consts.ts +++ b/apps/web/src/lib/consts.ts @@ -73,3 +73,15 @@ export const homePageStructuredData = [ softwareApplicationSchema, faqSchema, ]; + +export const PROMPT = [ + "Set up authentication in my project using Paykit (paykitjs npm package)", + "", + "1. Install paykitjs. If I already have a database configured in this project, use that - don't set up a new one.", + "2. Check the runtime used in the project and use the same - don't simply go with npm.", + "3. Create `src/lib/paykit.ts` - call createPayKit() with:", + " - My existing database connection by passing the url directly `database: ` (or a new pg.Pool() if none exists)", + " - Add payment provider based on the auth credentials in my env. Example: `bun add @paykitjs/stripe`", + "4. Set up the route handlers according to the current project framework.", + "5. Create `src/lib/paykit-client.ts` - call `createPayKitClient()` where `paykit` is the object we created when initializing Paykit in `src/lib/paykit.ts`.", +].join("\n"); From 0d103a7306e12775d7b5f215b592b56933232d52 Mon Sep 17 00:00:00 2001 From: Muhammad-Owais-Warsi Date: Sun, 17 May 2026 10:07:44 +0100 Subject: [PATCH 3/3] feat(prompt install button): fix the description --- apps/web/src/components/web/hero-title.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/src/components/web/hero-title.tsx b/apps/web/src/components/web/hero-title.tsx index 405108b8..15d04cd9 100644 --- a/apps/web/src/components/web/hero-title.tsx +++ b/apps/web/src/components/web/hero-title.tsx @@ -70,8 +70,8 @@ export function HeroTitle() { - Copy the install command - Run this in your terminal to get started. + Copy the prompt + Give this to your agent to get started.