Add AI setup prompt to Playwright Check Suite quickstart

quickstarts/playwright-check.mdx

@@ -5,13 +5,36 @@ sidebarTitle: 'Playwright Check Suite'
 ---
 
 import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
+import { CopyPromptButton } from "/snippets/copy-prompt-button.jsx"
+import SetupPrompt from "/snippets/playwright-check-suite-setup-prompt.mdx"
 
-Turn your Playwright tests into production monitors. This guide walks through creating a `checkly.config.ts`, testing it, and deploying your first check suites.
+Turn your Playwright tests into production monitors. Generate a working configuration with AI, or configure manually.
+
+## Set up with AI
+
+Copy the setup prompt and paste it into your AI coding tool — Claude Code, Cursor, GitHub Copilot, or similar — from your project directory.
+
+The prompt analyzes your Playwright configuration and generates a `checkly.config.ts` tailored to your project.
+
+<CopyPromptButton />
+
+The prompt guides your AI tool to:
+
+1. Inspect your Playwright configuration and test files
+2. Recommend which tests to monitor first
+3. Generate a minimal `checkly.config.ts` with alert channels
+4. Run `npx checkly test --record` and `npx checkly deploy`
+
+<Accordion title="View the full prompt">
+<SetupPrompt />
+</Accordion>
 
 <Tip>
-Explore all [Playwright Check Suite capabilities](/detect/synthetic-monitoring/playwright-checks/overview).
+This prompt is also available in the Checkly UI when [creating a Playwright Check Suite](https://app.checklyhq.com/checks/playwright/create).
 </Tip>
 
+## Configure manually
+
 <Accordion title="Prerequisites">
 
 - A Checkly account

snippets/copy-prompt-button.jsx

@@ -0,0 +1,51 @@
+"use client";
+import { useState } from "react";
+
+export const CopyPromptButton = ({
+  label = "Copy setup prompt",
+  targetId = "ai-setup-prompt",
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      const el = document.getElementById(targetId);
+      const code = el?.querySelector("code");
+      const text = code?.textContent || el?.textContent || "";
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy prompt:", err);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="inline-flex items-center gap-2 px-5 py-3 rounded-lg font-semibold text-base
+        border border-gray-200 dark:border-gray-700
+        bg-white dark:bg-gray-800
+        text-gray-800 dark:text-gray-200
+        hover:bg-gray-50 dark:hover:bg-gray-700
+        transition-colors cursor-pointer my-2"
+    >
+      {copied ? (
+        <>
+          <svg width="18" height="18" viewBox="0 0 16 16" fill="none">
+            <path d="M13.3 4.3L6 11.6L2.7 8.3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+          Copied!
+        </>
+      ) : (
+        <>
+          <svg width="18" height="18" viewBox="0 0 16 16" fill="none">
+            <rect x="5" y="5" width="9" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.5"/>
+            <path d="M11 5V3.5C11 2.67 10.33 2 9.5 2H3.5C2.67 2 2 2.67 2 3.5V9.5C2 10.33 2.67 11 3.5 11H5" stroke="currentColor" strokeWidth="1.5"/>
+          </svg>
+          {label}
+        </>
+      )}
+    </button>
+  );
+};