diff --git a/apps/facehash-landing/src/app/page.tsx b/apps/facehash-landing/src/app/page.tsx
index 8ee99792..8535e508 100644
--- a/apps/facehash-landing/src/app/page.tsx
+++ b/apps/facehash-landing/src/app/page.tsx
@@ -2,6 +2,7 @@ import { Github } from "lucide-react";
import { ApiRouteExample } from "@/components/api-route-example";
import { AvatarGenerator } from "@/components/avatar-generator";
import { CodeExample } from "@/components/code-example";
+import { CopyAiPromptButton } from "@/components/copy-ai-prompt";
import { CossistantLogo } from "@/components/cossistant-logo";
import { FloatingAvatars } from "@/components/floating-avatars";
import { InlineAvatar } from "@/components/inline-avatar";
@@ -53,6 +54,12 @@ export default function Home() {
a React component that generates unique avatar faces from any
string. zero dependencies. works with Next.js, Vite, Remix.
+
+
+ let ai implement facehash?
+
+
+
{/* Install */}
diff --git a/apps/facehash-landing/src/components/copy-ai-prompt.tsx b/apps/facehash-landing/src/components/copy-ai-prompt.tsx
new file mode 100644
index 00000000..588990c8
--- /dev/null
+++ b/apps/facehash-landing/src/components/copy-ai-prompt.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+
+const MARKDOWN = `You are helping implement Facehash avatars in a React/Next.js project.
+
+## What is Facehash?
+A React component that generates unique, deterministic avatar faces from any string (emails, usernames, UUIDs). Zero dependencies, works offline, accessible by default.
+
+Key behavior: same input = same face, always. No API calls, no storage, no randomness.
+
+## Installation
+\`\`\`bash
+npm install facehash
+\`\`\`
+
+## Basic Usage
+\`\`\`tsx
+import { Facehash } from "facehash";
+
+// Pass any string - emails, usernames, IDs all work
+
+\`\`\`
+
+## Available Props
+- \`name\` (string, required): Input string that determines the face
+- \`size\` (number, default: 40): Avatar size in pixels
+- \`colors\` (string[]): Custom color palette, e.g. \`["#264653", "#2a9d8f", "#e9c46a"]\`
+- \`intensity3d\` ("none" | "subtle" | "medium" | "dramatic"): 3D effect intensity, default "dramatic"
+- \`showInitial\` (boolean, default: true): Show first letter on face
+- \`variant\` ("gradient" | "solid"): Background style, default "gradient"
+- \`enableBlink\` (boolean): Enable blinking animation
+- \`onRenderMouth\` (() => ReactNode): Custom mouth renderer (e.g., for loading spinners)
+- \`className\` (string): CSS classes - controls face color via \`text-*\` and font styles
+
+## Next.js Image Route Handler
+For generating avatar URLs (useful for emails, OG images, external services):
+
+\`\`\`ts
+// app/api/avatar/route.ts
+import { toFacehashHandler } from "facehash/next";
+
+export const { GET } = toFacehashHandler();
+\`\`\`
+
+Then use as: \`\` or \`https://yoursite.com/api/avatar?name=john\`
+
+## Avatar with Image Fallback
+When you need to show a user photo with Facehash as fallback:
+
+\`\`\`tsx
+import { Avatar, AvatarImage, AvatarFallback } from "facehash";
+
+
+
+
+
+\`\`\`
+
+## Implementation Guidelines
+1. Replace existing avatar placeholders or boring initials with Facehash
+2. Use the user's email, username, or ID as the \`name\` prop for consistency
+3. Match the \`size\` prop to the existing avatar dimensions
+4. For dark backgrounds, add \`className="text-white"\` for better contrast
+5. If the project uses Next.js and needs avatar URLs, add the route handler
+`;
+
+export function CopyAiPromptButton() {
+ const [copied, setCopied] = useState(false);
+
+ const handleCopy = async () => {
+ await navigator.clipboard.writeText(MARKDOWN);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ };
+
+ return (
+
+ );
+}