diff --git a/detect/overview.mdx b/detect/overview.mdx index e640d1fc..4d358fee 100644 --- a/detect/overview.mdx +++ b/detect/overview.mdx @@ -74,11 +74,11 @@ Ready to start monitoring your applications? Choose the approach that best fits Begin with automated testing for development workflows - + Set up basic availability monitoring for critical services - + Create comprehensive user experience validation diff --git a/quickstarts/openapi-spec.mdx b/detect/synthetic-monitoring/api-checks/openapi-spec.mdx similarity index 100% rename from quickstarts/openapi-spec.mdx rename to detect/synthetic-monitoring/api-checks/openapi-spec.mdx diff --git a/quickstarts/api-check.mdx b/detect/synthetic-monitoring/api-checks/quickstart.mdx similarity index 99% rename from quickstarts/api-check.mdx rename to detect/synthetic-monitoring/api-checks/quickstart.mdx index a1f1169a..faece8f8 100644 --- a/quickstarts/api-check.mdx +++ b/detect/synthetic-monitoring/api-checks/quickstart.mdx @@ -1,7 +1,7 @@ --- title: 'Creating An API Check' description: 'Step-by-step guide to creating your first API check in Checkly using the web UI and CLI.' -sidebarTitle: 'API Check' +sidebarTitle: 'Quickstart' --- diff --git a/quickstarts/browser-check.mdx b/detect/synthetic-monitoring/browser-checks/quickstart.mdx similarity index 88% rename from quickstarts/browser-check.mdx rename to detect/synthetic-monitoring/browser-checks/quickstart.mdx index 51d36382..9e98819c 100644 --- a/quickstarts/browser-check.mdx +++ b/detect/synthetic-monitoring/browser-checks/quickstart.mdx @@ -1,7 +1,7 @@ --- title: 'Creating A Browser Check' description: 'Get started with Checkly by creating your first Browser Check' -sidebarTitle: 'Browser Check' +sidebarTitle: 'Quickstart' --- import CliAuth from '/snippets/cli-auth.mdx'; @@ -13,7 +13,7 @@ Learn more about all the [Browser Check capabilities](/detect/synthetic-monitori This guide will walk you through creating your first Browser Check with Checkly. -Browser Checks are perfect for monitoring realistic user flows within your application or services. If you are looking for monitoring general availability, check out the [Uptime Monitor Quickstart](/quickstarts/url-monitor). +Browser Checks are perfect for monitoring realistic user flows within your application or services. If you are looking for monitoring general availability, check out the [Uptime Monitor Quickstart](/detect/uptime-monitoring/url-monitors/quickstart). - A Checkly account (sign up at [checklyhq.com](https://checklyhq.com)) @@ -23,10 +23,21 @@ Browser Checks are perfect for monitoring realistic user flows within your appli - - - - **Head to [Create a Check](https://app.checklyhq.com/accounts/create)** - - **Choose "Browser Check"** for comprehensive website monitoring + + Light mode interface + Dark mode interface + + + 1. **Head to [Create a Check](https://app.checklyhq.com/accounts/create)** + 2. **Choose from one of the Browser Check templates** to start from a working example diff --git a/quickstarts/multistep-check.mdx b/detect/synthetic-monitoring/multistep-checks/quickstart.mdx similarity index 99% rename from quickstarts/multistep-check.mdx rename to detect/synthetic-monitoring/multistep-checks/quickstart.mdx index 8d2ba48d..7bc48ed6 100644 --- a/quickstarts/multistep-check.mdx +++ b/detect/synthetic-monitoring/multistep-checks/quickstart.mdx @@ -1,7 +1,7 @@ --- title: 'Creating A Multistep Check' description: 'Step-by-step guide to creating your first multistep check in Checkly for monitoring complex API workflows and business processes.' -sidebarTitle: 'Multistep Check' +sidebarTitle: 'Quickstart' --- diff --git a/detect/synthetic-monitoring/playwright-checks/overview.mdx b/detect/synthetic-monitoring/playwright-checks/overview.mdx index 96204122..a052c084 100644 --- a/detect/synthetic-monitoring/playwright-checks/overview.mdx +++ b/detect/synthetic-monitoring/playwright-checks/overview.mdx @@ -112,7 +112,7 @@ Customize how your checks run: ## Getting Started - + Deploy your first Playwright Check Suite diff --git a/quickstarts/playwright-check.mdx b/detect/synthetic-monitoring/playwright-checks/quickstart.mdx similarity index 99% rename from quickstarts/playwright-check.mdx rename to detect/synthetic-monitoring/playwright-checks/quickstart.mdx index a8193f75..ee4e5b96 100644 --- a/quickstarts/playwright-check.mdx +++ b/detect/synthetic-monitoring/playwright-checks/quickstart.mdx @@ -1,7 +1,7 @@ --- title: 'Creating a Playwright Check Suite' description: 'Turn your Playwright tests into production monitors by creating a checkly.config.ts file' -sidebarTitle: 'Playwright Check Suite' +sidebarTitle: 'Quickstart' --- import { CopyPromptButton } from "/snippets/copy-prompt-button.jsx"; diff --git a/quickstarts/heartbeat-monitor.mdx b/detect/uptime-monitoring/heartbeat-monitors/quickstart.mdx similarity index 99% rename from quickstarts/heartbeat-monitor.mdx rename to detect/uptime-monitoring/heartbeat-monitors/quickstart.mdx index 53e0c41c..66f4448c 100644 --- a/quickstarts/heartbeat-monitor.mdx +++ b/detect/uptime-monitoring/heartbeat-monitors/quickstart.mdx @@ -1,7 +1,7 @@ --- title: 'Creating A Heartbeat Monitor' description: 'Step-by-step guide to set up your first heartbeat monitor in Checkly. Learn about configuration, timing, alerts, and best practices.' -sidebarTitle: Heartbeat Monitor +sidebarTitle: 'Quickstart' --- diff --git a/quickstarts/tcp-monitor.mdx b/detect/uptime-monitoring/tcp-monitors/quickstart.mdx similarity index 99% rename from quickstarts/tcp-monitor.mdx rename to detect/uptime-monitoring/tcp-monitors/quickstart.mdx index 2f2093ca..1b3523b6 100644 --- a/quickstarts/tcp-monitor.mdx +++ b/detect/uptime-monitoring/tcp-monitors/quickstart.mdx @@ -1,7 +1,7 @@ --- title: 'Creating A TCP Monitor' description: 'Step-by-step guide to set up your first TCP monitor and ensure your network services are always available.' -sidebarTitle: 'TCP Monitor' +sidebarTitle: 'Quickstart' --- diff --git a/quickstarts/url-monitor.mdx b/detect/uptime-monitoring/url-monitors/quickstart.mdx similarity index 99% rename from quickstarts/url-monitor.mdx rename to detect/uptime-monitoring/url-monitors/quickstart.mdx index 75126489..06835b9e 100644 --- a/quickstarts/url-monitor.mdx +++ b/detect/uptime-monitoring/url-monitors/quickstart.mdx @@ -1,7 +1,7 @@ --- title: 'Creating A URL Monitor' description: 'Step-by-step guide to set up your first URL monitor and ensure your websites and APIs are always accessible.' -sidebarTitle: 'URL Monitor' +sidebarTitle: 'Quickstart' --- diff --git a/docs.json b/docs.json index 12651d18..6d36365c 100644 --- a/docs.json +++ b/docs.json @@ -47,19 +47,7 @@ "group": "Getting Started", "pages": [ "/what-is-checkly", - { - "group": "Quickstarts", - "pages": [ - "quickstarts/tcp-monitor", - "quickstarts/url-monitor", - "quickstarts/browser-check", - "quickstarts/playwright-check", - "quickstarts/api-check", - "quickstarts/multistep-check", - "quickstarts/heartbeat-monitor", - "quickstarts/openapi-spec" - ] - }, + "quickstart", { "group": "Concepts", "pages": [ @@ -150,6 +138,7 @@ "group": "URL Monitors", "pages": [ "detect/uptime-monitoring/url-monitors/overview", + "detect/uptime-monitoring/url-monitors/quickstart", "detect/uptime-monitoring/url-monitors/configuration" ] }, @@ -157,6 +146,7 @@ "group": "TCP Monitors", "pages": [ "detect/uptime-monitoring/tcp-monitors/overview", + "detect/uptime-monitoring/tcp-monitors/quickstart", "detect/uptime-monitoring/tcp-monitors/configuration" ] }, @@ -178,6 +168,7 @@ "group": "Heartbeat Monitors", "pages": [ "detect/uptime-monitoring/heartbeat-monitors/overview", + "detect/uptime-monitoring/heartbeat-monitors/quickstart", "detect/uptime-monitoring/heartbeat-monitors/examples" ] } @@ -198,11 +189,13 @@ "group": "API Checks", "pages": [ "detect/synthetic-monitoring/api-checks/overview", + "detect/synthetic-monitoring/api-checks/quickstart", "detect/synthetic-monitoring/api-checks/configuration", "detect/synthetic-monitoring/api-checks/setup-and-teardown", "detect/synthetic-monitoring/api-checks/snippets", "detect/synthetic-monitoring/api-checks/api-structure", "detect/synthetic-monitoring/api-checks/client-certificates", + "detect/synthetic-monitoring/api-checks/openapi-spec", "detect/synthetic-monitoring/api-checks/troubleshooting" ] }, @@ -211,6 +204,7 @@ "group": "Multistep Checks", "pages": [ "detect/synthetic-monitoring/multistep-checks/overview", + "detect/synthetic-monitoring/multistep-checks/quickstart", "detect/synthetic-monitoring/multistep-checks/multistep-structure", "detect/synthetic-monitoring/multistep-checks/degraded-states", "detect/synthetic-monitoring/multistep-checks/file-system", @@ -222,6 +216,7 @@ "group": "Browser Checks", "pages": [ "detect/synthetic-monitoring/browser-checks/overview", + "detect/synthetic-monitoring/browser-checks/quickstart", "detect/synthetic-monitoring/browser-checks/mac-structure", "detect/synthetic-monitoring/browser-checks/performance-metrics", "detect/synthetic-monitoring/browser-checks/visual-regressions", @@ -236,6 +231,7 @@ "group": "Playwright Check Suites", "pages": [ "detect/synthetic-monitoring/playwright-checks/overview", + "detect/synthetic-monitoring/playwright-checks/quickstart", "detect/synthetic-monitoring/playwright-checks/configuration", "detect/synthetic-monitoring/playwright-checks/test-organization", "detect/synthetic-monitoring/playwright-checks/add-to-group", @@ -1327,6 +1323,50 @@ } }, "redirects": [ + { + "source": "/quickstarts/general", + "destination": "/quickstart" + }, + { + "source": "/quickstarts/url-monitor", + "destination": "/detect/uptime-monitoring/url-monitors/quickstart" + }, + { + "source": "/quickstarts/tcp-monitor", + "destination": "/detect/uptime-monitoring/tcp-monitors/quickstart" + }, + { + "source": "/quickstarts/heartbeat-monitor", + "destination": "/detect/uptime-monitoring/heartbeat-monitors/quickstart" + }, + { + "source": "/quickstarts/api-check", + "destination": "/detect/synthetic-monitoring/api-checks/quickstart" + }, + { + "source": "/quickstarts/openapi-spec", + "destination": "/detect/synthetic-monitoring/api-checks/openapi-spec" + }, + { + "source": "/quickstarts/multistep-check", + "destination": "/detect/synthetic-monitoring/multistep-checks/quickstart" + }, + { + "source": "/quickstarts/browser-check", + "destination": "/detect/synthetic-monitoring/browser-checks/quickstart" + }, + { + "source": "/quickstarts/playwright-check", + "destination": "/detect/synthetic-monitoring/playwright-checks/quickstart" + }, + { + "source": "/quickstarts/creating-a-browser-check", + "destination": "/detect/synthetic-monitoring/browser-checks/quickstart" + }, + { + "source": "/detect/synthetic-monitoring/browser-checks/creating-a-browser-check", + "destination": "/detect/synthetic-monitoring/browser-checks/quickstart" + }, { "source": "/ai/rules", "destination": "/ai/overview" @@ -1353,7 +1393,7 @@ }, { "source": "/constructs/quickstarts/playwright-check", - "destination": "/quickstarts/playwright-check" + "destination": "/detect/synthetic-monitoring/playwright-checks/quickstart" }, { "source": "/api-reference/checks/create-an-dns-monitor/", diff --git a/index.mdx b/index.mdx index 3a5b6d5d..80e98ca2 100644 --- a/index.mdx +++ b/index.mdx @@ -15,7 +15,7 @@ Checkly combines **testing**, **monitoring**, and **incident communication**
- + Get up and running with tests and monitors deployed in 5 minutes. @@ -98,7 +98,7 @@ Extend the Checkly platform with our powerful REST API and SDKs. Platform overview - + Monitor APIs diff --git a/quickstart.mdx b/quickstart.mdx new file mode 100644 index 00000000..7cb1bfe2 --- /dev/null +++ b/quickstart.mdx @@ -0,0 +1,237 @@ +--- +title: 'Checkly Quickstart' +description: 'Add synthetic monitoring to your existing project in minutes. Let your AI agent set up Checkly, or follow the steps yourself.' +sidebarTitle: 'Quickstart' +--- + +import CliAuth from '/snippets/cli-auth.mdx'; +import { SetupFlow } from '/snippets/setup-flow.jsx'; + +Add synthetic monitoring to a project you already have, in any language or framework, in minutes. You'll end up with checks running around the clock from global locations, alerting you the moment your site or API breaks. The fastest path is to let your AI coding agent set it up: `npx checkly init` installs the [Checkly CLI](/cli/overview) and [agent skills](/ai/skills), and from there your agent can generate, test, and deploy your monitoring as [Monitoring as Code](/concepts/monitoring-as-code) that lives alongside your application code. + +The steps below explain each phase so you understand what the agent does, and you can run them yourself if you prefer. + + + +_The recommended flow, end to end. Each phase is explained below._ + +## Get started with Monitoring as Code + + +- [Node.js](https://nodejs.org) `20.19+` or `22.12+`, and npm +- A terminal +- (Optional) the URL of an app or API you want to monitor + + +### Let your AI agent set it up (recommended) + +Run `npx checkly init` and answer a few prompts to let your agent take over: + +```text Terminal +npx checkly init + +✔ Do you want your AI agent to set up Checkly? … yes +✔ Install the Checkly skill for your AI coding agent? … yes +✔ Which AI coding agent do you use? › Claude +✔ Run npm install to install them now? … yes + +... + +✔ Copy prompt to clipboard? … yes + +You're ready to go! +``` + +`checkly init` installs the [Checkly CLI](/cli/overview) and [agent skills](/ai/skills), creates a `checkly.config.ts`, installs dependencies, and **copies a starter prompt tailored to your project to your clipboard**. Paste it into your AI agent and follow the instructions. + +From here, what the agent does depends on your project. It might: + +- Scan your project and discover monitoring targets +- Create Checkly monitors in code +- Test them with `npx checkly test` +- Set up alert channels +- Reuse your existing Playwright tests +- Deploy your monitoring with `npx checkly deploy` after your confirmation + +It asks for input along the way. Open [your Checkly dashboard](https://app.checklyhq.com) to see your monitoring live. + +To see what each command does, or to run them yourself, follow the [steps below](#set-it-up-yourself). + +### Set it up yourself + +The steps below use the Checkly CLI directly so you can build and deploy your monitoring by hand. + + + + Run the init command in your project directory and decline the agent setup. It scaffolds a working example you can edit. + + ```text Terminal + npx checkly init + + ✔ Do you want your AI agent to set up Checkly? … no + ✔ Run npm install to install them now? … yes + ✔ Add some demo checks to get started? … yes + ✔ Created __checks__/ with example checks + + ... + + All done! + ``` + + This scaffolds a `checkly.config.ts` file and a `__checks__` folder containing a few starter checks: + + ```bash Project structure + |- checkly.config.ts + |__checks__ + |- api.check.ts + |- heartbeat.check.ts + |- homepage.spec.ts + |- url.check.ts + ``` + + The `checkly.config.ts` file holds your project-wide settings, such as the default run frequency, locations, and which files contain your checks. + + + + Log in to your Checkly account, or create a free one, right from the terminal. + + + + This opens your browser to authenticate. Once you're logged in, you can run and deploy checks from your machine. Run `npx checkly whoami` at any time to confirm which account you're connected to. + + + + Checks are code. The scaffolded `__checks__/homepage.spec.ts` is a [Browser Check](/detect/synthetic-monitoring/browser-checks/quickstart): a standard `@playwright/test` file that Checkly runs as a monitor. Edit it to load a page and assert on what matters: + + + ```ts homepage.spec.ts + import { test, expect } from '@playwright/test' + + test('homepage loads', async ({ page }) => { + const response = await page.goto('https://www.checklyhq.com') + expect(response?.status()).toBeLessThan(400) + await expect(page).toHaveTitle(/Checkly/) + await page.screenshot({ path: 'homepage.jpg' }) + }) + ``` + + ```js homepage.spec.js + const { test, expect } = require('@playwright/test') + + test('homepage loads', async ({ page }) => { + const response = await page.goto('https://www.checklyhq.com') + expect(response?.status()).toBeLessThan(400) + await expect(page).toHaveTitle(/Checkly/) + await page.screenshot({ path: 'homepage.jpg' }) + }) + ``` + + + Checkly turns every `*.spec.ts` file into a Browser Check through the `browserChecks.testMatch` pattern in your `checkly.config.ts`. To monitor an endpoint instead, edit `__checks__/api.check.ts`, which defines an [API Check](/detect/synthetic-monitoring/api-checks/quickstart). For every construct and option, see the [Constructs reference](/constructs/overview). + + + + Dry-run all your checks against Checkly's global infrastructure before you deploy anything: + + ```bash Terminal + npx checkly test + ``` + + You'll see the results in your terminal: + + ``` + Running 2 checks in eu-west-1. + + __checks__/homepage.spec.ts + ✔ homepage loads (24s) + __checks__/api.check.ts + ✔ Hello API (222ms) + + 2 passed, 2 total + ``` + + Runs are recorded as [test sessions](/detect/testing/overview) by default, with full logs, traces, and videos you can review in the [Checkly web app](https://app.checklyhq.com). + + + + Deploy your checks and related resources to Checkly. From now on, they run around the clock from Checkly's global locations: + + ```bash Terminal + npx checkly deploy + ``` + + Open [your Checkly dashboard](https://app.checklyhq.com) and you'll see your checks, ready to start monitoring. + + + + Add an [alert channel](/communicate/alerts/overview) so you're notified when a check fails. Define the channels you want in a new `__checks__/alert-channels.ts` file, then attach them to your checks through the `alertChannels` defaults in your config. + + + + ```ts alert-channels.ts + import { EmailAlertChannel } from 'checkly/constructs' + + export const emailChannel = new EmailAlertChannel('email-alert-channel', { + address: 'alerts@example.com', + }) + ``` + + + + ```ts alert-channels.ts + import { PhoneCallAlertChannel } from 'checkly/constructs' + + export const phoneChannel = new PhoneCallAlertChannel('phone-alert-channel', { + name: 'On-call engineer', + phoneNumber: '+1234567890', + }) + ``` + + + + Import the channels you defined and set them as defaults in your `checkly.config.ts` so every check, including your Browser Check, uses them. This example assumes you defined both, so import only the channels you created: + + ```ts checkly.config.ts + import { defineConfig } from 'checkly' + import { emailChannel, phoneChannel } from './__checks__/alert-channels' + + export default defineConfig({ + projectName: 'My Project', + logicalId: 'my-project', + checks: { + // ...your existing check defaults + alertChannels: [emailChannel, phoneChannel], + }, + }) + ``` + + You can also attach `alertChannels` to an individual check or a [check group](/constructs/check-group-v2) for finer control. Run `npx checkly deploy` again to apply your alerting, and see the [alert channels overview](/communicate/alerts/channels) for every supported channel. + + + + +When you're done experimenting, tear down everything this project created with `npx checkly destroy`. + + +## Go deeper + + + + Every check, monitor, and alert channel you can define as code. + + + All `npx checkly` commands and options. + + + Monitor realistic user flows with Playwright. + + + Monitor your backend services and endpoints. + + + Configure who gets notified, and how. + + + Run and deploy your checks from your pipeline. + + diff --git a/quickstarts/creating-a-browser-check.mdx b/quickstarts/creating-a-browser-check.mdx deleted file mode 100644 index 7ea01055..00000000 --- a/quickstarts/creating-a-browser-check.mdx +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: 'Creating Your First Browser Check' -description: 'Step-by-step guide to creating your first browser check in Checkly using Playwright for automated user workflow testing.' -sidebarTitle: 'Creating a Browser Check' ---- - - -Browser checks simulate real user interactions with your web applications using automated browsers. In this comprehensive guide, you'll create your first browser check to monitor critical user workflows and ensure optimal user experiences. - - -You'll need a web application or website to test. Browser checks work with any publicly accessible or privately hosted web application. - - -## Step-by-Step Setup - - - - - - Light mode interface - Dark mode interface - - - - **Choose "Browser Check"** for comprehensive website monitoring - - **Enter your website URL** (e.g., `https://your-website.com`) - - **Click "Create Check"** - - - -The following test script will check if the homepage is available, performing correctly, and looks visually correct. - -Light mode interface -Dark mode interface - - - - - -Configure your check settings by clicking the "Settings" button in the top right corner of the check editor - -Light mode interface -Dark mode interface - - -For your first check, the default settings work well. You can always adjust them later. - - - - - -Light mode interface -Dark mode interface - - - - -Configure who gets notified when issues are detected: - - -Light mode interface -Dark mode interface - - - - - -Before activating your check: - -1. **Click "Test Check"** to run it once and verify it works -2. **Review the results** to ensure your website loads correctly -3. **Check for any errors** in the console or network tabs -4. **Click "Save and Activate"** to start continuous monitoring - - - -Once your check is active: - - -Light mode interface -Dark mode interface - - - \ No newline at end of file diff --git a/snippets/playwright-check-suite-setup-prompt.mdx b/snippets/playwright-check-suite-setup-prompt.mdx index 4de775a5..bdaeb21a 100644 --- a/snippets/playwright-check-suite-setup-prompt.mdx +++ b/snippets/playwright-check-suite-setup-prompt.mdx @@ -340,7 +340,7 @@ Use these defaults unless the repo makes them invalid. **For values marked "ASK Use these Checkly docs as the source of truth for the implementation: -* [Quickstart — Playwright Check](https://www.checklyhq.com/docs/quickstarts/playwright-check/) +* [Quickstart — Playwright Check](https://www.checklyhq.com/docs/detect/synthetic-monitoring/playwright-checks/quickstart/) * [Test Organization](https://www.checklyhq.com/docs/detect/synthetic-monitoring/playwright-checks/test-organization/) * [Configuration](https://www.checklyhq.com/docs/detect/synthetic-monitoring/playwright-checks/configuration/) * [Environment Variables](https://www.checklyhq.com/docs/detect/synthetic-monitoring/playwright-checks/environment-variables/) diff --git a/snippets/setup-flow.jsx b/snippets/setup-flow.jsx new file mode 100644 index 00000000..e262df68 --- /dev/null +++ b/snippets/setup-flow.jsx @@ -0,0 +1,369 @@ +"use client"; +import { useEffect, useState } from "react"; + +/** + * Note: this component was AI generated. + * + * Interactive pipeline that shows the Checkly workflow on an existing project: + * setup → generate → test → deploy → monitor. + * + * Layout is a CSS grid: alternating auto / 1fr columns (tiles sit in the auto + * columns, connector lines fill the 1fr columns) across two rows (tiles on row + * 1, labels on row 2). `align-items: center` centers the lines on the tile axis + * with no magic offsets. This interactive rail and its detail box are + * desktop-only (>=640px). On mobile they're hidden and a separate static list + * renders instead: each step's icon on the left, its label and description on + * the right, with no selection. The full layout renders at rest at its final + * size, so the entrance animation and selection only change transforms/colors, + * so nothing reflows. + * + * The entrance plays once, when the component scrolls into view: a blue fill + * sweeps left-to-right through the lines and each stage turns blue as the fill + * passes it, then holds. Selecting a stage shows its explanation in the box + * below. The prefers-reduced-motion fallback shows the completed state with no + * motion. + * + * Everything lives inside the component on purpose: Mintlify evaluates the + * exported component in an isolated scope, so module-level helpers/constants + * and local `` are not resolvable here. The logic also sticks to + * constructs Mintlify's snippet evaluator supports (no `in` operator, no + * `.some()`, no `useRef`). + */ +export const SetupFlow = () => { + const steps = [ + { + label: "Setup", + icon: "terminal", + detail: ( + + Execute npx checkly init to + automatically install the checkly{" "} + CLI and the Checkly agent skills, and scaffold a{" "} + checkly.config.ts. + + ), + }, + { + label: "Generate", + icon: "agent", + detail: ( + + Paste the provided prompt into your AI agent. It scans and parses your + project, then creates monitoring resources using Checkly constructs. + + ), + }, + { + label: "Test", + icon: "testing", + detail: ( + + Run npx checkly test to validate + your monitoring setup before it goes live. + + ), + }, + { + label: "Deploy", + icon: "deploy", + detail: ( + + Deploy your code-defined monitoring with a single command:{" "} + npx checkly deploy. + + ), + }, + { + label: "Monitor", + icon: "globe", + detail: ( + + Monitor your application from global locations and get alerted the + moment something breaks. + + ), + }, + ]; + const stepGap = 0.5; // seconds between stages turning blue + const columns = steps + .map((step, i) => (i < steps.length - 1 ? "3.5rem 1fr" : "3.5rem")) + .join(" "); + + const renderIcon = (name) => { + const common = { + width: 24, + height: 24, + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + strokeWidth: 1.7, + strokeLinecap: "round", + strokeLinejoin: "round", + "aria-hidden": true, + }; + if (name === "terminal") { + return ( + + + + + ); + } + if (name === "agent") { + return ( + + + + + ); + } + if (name === "testing") { + return ( + + + + ); + } + if (name === "deploy") { + return ( + + + + ); + } + return ( + + + + + ); + }; + + const [played, setPlayed] = useState(false); + const [selected, setSelected] = useState(0); + + useEffect(() => { + const reduce = + window.matchMedia && + window.matchMedia("(prefers-reduced-motion: reduce)").matches; + const node = document.getElementById("cklyflow-root"); + + if (reduce || !node || typeof IntersectionObserver === "undefined") { + setPlayed(true); + return; + } + + const observer = new IntersectionObserver( + function (entries) { + const entry = entries[0]; + if (entry && entry.isIntersecting) { + setPlayed(true); + observer.disconnect(); + } + }, + { threshold: 0.35 } + ); + observer.observe(node); + + return function () { + observer.disconnect(); + }; + }, []); + + return ( +
+ + +
+
+ {steps.flatMap((step, i) => { + const isActive = selected === i; + const tileCol = String(2 * i + 1); + const items = [ + , +
+ {step.label} +
, + ]; + + if (i < steps.length - 1) { + items.push( + + ); + } + + return items; + })} +
+ +
+ {steps.map((step, i) => ( +
+
+
+ {renderIcon(step.icon)} +
+ {i < steps.length - 1 && ( + + )} +
+
+
+ {step.label} +
+

+ {step.detail} +

+
+
+ ))} +
+ +
+

+ + {steps[selected].label}. + {" "} + {steps[selected].detail} +

+
+
+
+ ); +};