From 91b1c523591b37c2efc18596b2d6de0ebfcb9290 Mon Sep 17 00:00:00 2001 From: Dan Giordano Date: Tue, 16 Jun 2026 16:12:19 -0400 Subject: [PATCH 01/18] ai quickstart --- docs.json | 1 + quickstarts/general.mdx | 211 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 212 insertions(+) create mode 100644 quickstarts/general.mdx diff --git a/docs.json b/docs.json index 8e42572b..bf0af640 100644 --- a/docs.json +++ b/docs.json @@ -50,6 +50,7 @@ { "group": "Quickstarts", "pages": [ + "quickstarts/general", "quickstarts/tcp-monitor", "quickstarts/url-monitor", "quickstarts/browser-check", diff --git a/quickstarts/general.mdx b/quickstarts/general.mdx new file mode 100644 index 00000000..3bb8fb89 --- /dev/null +++ b/quickstarts/general.mdx @@ -0,0 +1,211 @@ +--- +title: 'Checkly Quickstart' +description: 'Go from an empty folder to synthetic monitoring running in production with the Checkly CLI.' +sidebarTitle: 'General' +--- + +import CliAuth from '/snippets/cli-auth.mdx'; +import CliProjectInit from '/snippets/cli-project-init.mdx'; + +This quickstart walks you through the complete Checkly workflow with the [Checkly CLI](/cli/overview): bootstrap a project, write a check as code, test it against Checkly's global infrastructure, and deploy it to run around the clock. This is the [Monitoring as Code](/concepts/monitoring-as-code) path — your monitoring lives in your repository, right next to your application code. + +If you'd rather create a single check in the web UI, start with one of the check-type quickstarts like the [API Check](/quickstarts/api-check) or [Browser Check](/quickstarts/browser-check) instead. + + +- [Node.js](https://nodejs.org) 18 or later, and npm +- A terminal +- (Optional) the URL of an app or API you want to monitor + + + + + Run the init command in your project directory. It guides you through the required steps to set up a fully working example. + + + + 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 + ``` + + 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 plain TypeScript or JavaScript. Open `__checks__/api.check.ts` and point it at an endpoint you care about. An [API Check](/quickstarts/api-check) sends an HTTP request and asserts on the response: + + + ```ts api.check.ts + import { ApiCheck, AssertionBuilder, Frequency } from 'checkly/constructs' + + new ApiCheck('hello-api-1', { + name: 'Hello API', + activated: true, + frequency: Frequency.EVERY_1M, + request: { + method: 'GET', + url: 'https://mac-demo-repo.vercel.app/api/hello', + assertions: [ + AssertionBuilder.statusCode().equals(200), + ], + }, + }) + ``` + + ```js api.check.js + const { ApiCheck, AssertionBuilder, Frequency } = require('checkly/constructs') + + new ApiCheck('hello-api-1', { + name: 'Hello API', + activated: true, + frequency: Frequency.EVERY_1M, + request: { + method: 'GET', + url: 'https://mac-demo-repo.vercel.app/api/hello', + assertions: [ + AssertionBuilder.statusCode().equals(200), + ], + }, + }) + ``` + + + To monitor a realistic user flow instead, edit `__checks__/homepage.spec.ts` — it's a standard `@playwright/test` file that runs as a [Browser Check](/quickstarts/browser-check). 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__/api.check.ts + ✔ Hello API (222ms) + __checks__/homepage.spec.ts + ✔ Homepage (24s) + + 2 passed, 2 total + ``` + + Add `--record` to capture full logs, traces, and videos and review them 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 the moment a check fails. Define it as a construct and attach it to your check through the `alertChannels` array. + + + + ```ts alert-channels.ts + import { SlackAppAlertChannel } from 'checkly/constructs' + + export const slackChannel = new SlackAppAlertChannel('slack-alert-channel', { + slackChannels: ['#alerts'], + sendFailure: true, + sendRecovery: true, + sendDegraded: false, + }) + ``` + + + + ```ts alert-channels.ts + import { PhoneCallAlertChannel } from 'checkly/constructs' + + export const phoneChannel = new PhoneCallAlertChannel('phone-alert-channel', { + name: 'On-call engineer', + phoneNumber: '+1234567890', + }) + ``` + + + + ```ts alert-channels.ts + import { EmailAlertChannel } from 'checkly/constructs' + + export const emailChannel = new EmailAlertChannel('email-alert-channel', { + address: 'alerts@example.com', + }) + ``` + + + + Import the channel into your check and add it to `alertChannels`: + + ```ts api.check.ts + import { ApiCheck, AssertionBuilder, Frequency } from 'checkly/constructs' + import { slackChannel } from './alert-channels' + + new ApiCheck('hello-api-1', { + name: 'Hello API', + activated: true, + frequency: Frequency.EVERY_1M, + alertChannels: [slackChannel], + request: { + method: 'GET', + url: 'https://mac-demo-repo.vercel.app/api/hello', + assertions: [ + AssertionBuilder.statusCode().equals(200), + ], + }, + }) + ``` + + Run `npx checkly deploy` again to apply your alerting. See the [alert channels overview](/communicate/alerts/channels) for every supported channel. + + + + +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. + + From 2a0e7b21e0a274bd06ce99ad31d39503a0131c6f Mon Sep 17 00:00:00 2001 From: Dan Giordano Date: Tue, 16 Jun 2026 16:27:00 -0400 Subject: [PATCH 02/18] cleaned --- quickstarts/general.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/quickstarts/general.mdx b/quickstarts/general.mdx index 3bb8fb89..95dbd1cd 100644 --- a/quickstarts/general.mdx +++ b/quickstarts/general.mdx @@ -7,7 +7,7 @@ sidebarTitle: 'General' import CliAuth from '/snippets/cli-auth.mdx'; import CliProjectInit from '/snippets/cli-project-init.mdx'; -This quickstart walks you through the complete Checkly workflow with the [Checkly CLI](/cli/overview): bootstrap a project, write a check as code, test it against Checkly's global infrastructure, and deploy it to run around the clock. This is the [Monitoring as Code](/concepts/monitoring-as-code) path — your monitoring lives in your repository, right next to your application code. +This quickstart walks you through the complete Checkly workflow with the [Checkly CLI](/cli/overview): bootstrap a project, write a check as code, test it against Checkly's global infrastructure, and deploy it to run around the clock. This is the [Monitoring as Code](/concepts/monitoring-as-code) path, where your monitoring lives in your repository alongside your application code. If you'd rather create a single check in the web UI, start with one of the check-type quickstarts like the [API Check](/quickstarts/api-check) or [Browser Check](/quickstarts/browser-check) instead. @@ -37,7 +37,7 @@ If you'd rather create a single check in the web UI, start with one of the check - Log in to your Checkly account — or create a free one — right from the terminal. + Log in to your Checkly account, or create a free one, right from the terminal. @@ -45,7 +45,7 @@ If you'd rather create a single check in the web UI, start with one of the check - Checks are plain TypeScript or JavaScript. Open `__checks__/api.check.ts` and point it at an endpoint you care about. An [API Check](/quickstarts/api-check) sends an HTTP request and asserts on the response: + Checks are plain TypeScript or JavaScript. Open `__checks__/api.check.ts` and point it at an endpoint you want to monitor. An [API Check](/quickstarts/api-check) sends an HTTP request and asserts on the response: ```ts api.check.ts @@ -83,7 +83,7 @@ If you'd rather create a single check in the web UI, start with one of the check ``` - To monitor a realistic user flow instead, edit `__checks__/homepage.spec.ts` — it's a standard `@playwright/test` file that runs as a [Browser Check](/quickstarts/browser-check). For every construct and option, see the [Constructs reference](/constructs/overview). + To monitor a realistic user flow instead, edit `__checks__/homepage.spec.ts`, a standard `@playwright/test` file that runs as a [Browser Check](/quickstarts/browser-check). For every construct and option, see the [Constructs reference](/constructs/overview). @@ -120,7 +120,7 @@ If you'd rather create a single check in the web UI, start with one of the check - Add an [alert channel](/communicate/alerts/overview) so you're notified the moment a check fails. Define it as a construct and attach it to your check through the `alertChannels` array. + Add an [alert channel](/communicate/alerts/overview) so you're notified when a check fails. Define it as a construct and attach it to your check through the `alertChannels` array. @@ -184,7 +184,7 @@ If you'd rather create a single check in the web UI, start with one of the check -Done experimenting? Tear down everything this project created with `npx checkly destroy`. +When you're done experimenting, tear down everything this project created with `npx checkly destroy`. ## Go deeper From 70d6660fdb47043628d90df494329cd30535d5db Mon Sep 17 00:00:00 2001 From: Dan Giordano Date: Wed, 17 Jun 2026 11:30:08 -0400 Subject: [PATCH 03/18] Browser Check --- quickstarts/general.mdx | 85 +++++++++++++++++------------------------ 1 file changed, 34 insertions(+), 51 deletions(-) diff --git a/quickstarts/general.mdx b/quickstarts/general.mdx index 95dbd1cd..6494188e 100644 --- a/quickstarts/general.mdx +++ b/quickstarts/general.mdx @@ -45,45 +45,33 @@ If you'd rather create a single check in the web UI, start with one of the check - Checks are plain TypeScript or JavaScript. Open `__checks__/api.check.ts` and point it at an endpoint you want to monitor. An [API Check](/quickstarts/api-check) sends an HTTP request and asserts on the response: + Checks are code. The scaffolded `__checks__/homepage.spec.ts` is a [Browser Check](/quickstarts/browser-check): a standard `@playwright/test` file that Checkly runs as a monitor. Edit it to load a page and assert on what matters: - ```ts api.check.ts - import { ApiCheck, AssertionBuilder, Frequency } from 'checkly/constructs' - - new ApiCheck('hello-api-1', { - name: 'Hello API', - activated: true, - frequency: Frequency.EVERY_1M, - request: { - method: 'GET', - url: 'https://mac-demo-repo.vercel.app/api/hello', - assertions: [ - AssertionBuilder.statusCode().equals(200), - ], - }, + ```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 api.check.js - const { ApiCheck, AssertionBuilder, Frequency } = require('checkly/constructs') - - new ApiCheck('hello-api-1', { - name: 'Hello API', - activated: true, - frequency: Frequency.EVERY_1M, - request: { - method: 'GET', - url: 'https://mac-demo-repo.vercel.app/api/hello', - assertions: [ - AssertionBuilder.statusCode().equals(200), - ], - }, + ```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' }) }) ``` - To monitor a realistic user flow instead, edit `__checks__/homepage.spec.ts`, a standard `@playwright/test` file that runs as a [Browser Check](/quickstarts/browser-check). For every construct and option, see the [Constructs reference](/constructs/overview). + 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](/quickstarts/api-check). For every construct and option, see the [Constructs reference](/constructs/overview). @@ -98,10 +86,10 @@ If you'd rather create a single check in the web UI, start with one of the check ``` Running 2 checks in eu-west-1. + __checks__/homepage.spec.ts + ✔ homepage loads (24s) __checks__/api.check.ts ✔ Hello API (222ms) - __checks__/homepage.spec.ts - ✔ Homepage (24s) 2 passed, 2 total ``` @@ -120,7 +108,7 @@ If you'd rather create a single check in the web UI, start with one of the check - Add an [alert channel](/communicate/alerts/overview) so you're notified when a check fails. Define it as a construct and attach it to your check through the `alertChannels` array. + Add an [alert channel](/communicate/alerts/overview) so you're notified when a check fails. Define it in a new `__checks__/alert-channels.ts` file, then attach it to your checks through the `alertChannels` defaults in your config. @@ -158,28 +146,23 @@ If you'd rather create a single check in the web UI, start with one of the check - Import the channel into your check and add it to `alertChannels`: - - ```ts api.check.ts - import { ApiCheck, AssertionBuilder, Frequency } from 'checkly/constructs' - import { slackChannel } from './alert-channels' - - new ApiCheck('hello-api-1', { - name: 'Hello API', - activated: true, - frequency: Frequency.EVERY_1M, - alertChannels: [slackChannel], - request: { - method: 'GET', - url: 'https://mac-demo-repo.vercel.app/api/hello', - assertions: [ - AssertionBuilder.statusCode().equals(200), - ], + Set the channel as a default in your `checkly.config.ts` so every check, including your Browser Check, uses it: + + ```ts checkly.config.ts + import { defineConfig } from 'checkly' + import { slackChannel } from './__checks__/alert-channels' + + export default defineConfig({ + projectName: 'My Project', + logicalId: 'my-project', + checks: { + // ...your existing check defaults + alertChannels: [slackChannel], }, }) ``` - Run `npx checkly deploy` again to apply your alerting. See the [alert channels overview](/communicate/alerts/channels) for every supported channel. + 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. From a2d000cb13d9ebc213b7150098706e7b7a701f5e Mon Sep 17 00:00:00 2001 From: stefan judis Date: Fri, 26 Jun 2026 17:11:39 +0200 Subject: [PATCH 04/18] Rework general quickstart around the AI-agent setup flow Add the SetupFlow visual, lead with the recommended agent path, and drop the Slack alert example that needs a pre-connected workspace. --- quickstarts/general.mdx | 92 ++++++---- snippets/setup-flow.jsx | 366 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 429 insertions(+), 29 deletions(-) create mode 100644 snippets/setup-flow.jsx diff --git a/quickstarts/general.mdx b/quickstarts/general.mdx index 6494188e..bd96cb76 100644 --- a/quickstarts/general.mdx +++ b/quickstarts/general.mdx @@ -1,27 +1,73 @@ --- title: 'Checkly Quickstart' -description: 'Go from an empty folder to synthetic monitoring running in production with the Checkly CLI.' +description: 'Add synthetic monitoring to your existing project in minutes. Let your AI agent set up Checkly, or follow the steps yourself.' sidebarTitle: 'General' --- import CliAuth from '/snippets/cli-auth.mdx'; -import CliProjectInit from '/snippets/cli-project-init.mdx'; +import { SetupFlow } from '/snippets/setup-flow.jsx'; -This quickstart walks you through the complete Checkly workflow with the [Checkly CLI](/cli/overview): bootstrap a project, write a check as code, test it against Checkly's global infrastructure, and deploy it to run around the clock. This is the [Monitoring as Code](/concepts/monitoring-as-code) path, where your monitoring lives in your repository alongside your application code. +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. -If you'd rather create a single check in the web UI, start with one of the check-type quickstarts like the [API Check](/quickstarts/api-check) or [Browser Check](/quickstarts/browser-check) instead. +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) 18 or later, and npm +- [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, your agent does the work. It generates checks from your project, logs in, runs them with `npx checkly test`, and deploys them with `npx checkly deploy`, prompting you whenever it needs a hand. Sit back, then open [your Checkly dashboard](https://app.checklyhq.com) to see your monitoring live. + +Want to know what's happening under the hood, or prefer to drive it yourself? The [steps below](#set-it-up-yourself) walk through each command. + +### 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. It guides you through the required steps to set up a fully working example. + 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: @@ -31,6 +77,7 @@ If you'd rather create a single check in the web UI, start with one of the check |- 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. @@ -94,7 +141,7 @@ If you'd rather create a single check in the web UI, start with one of the check 2 passed, 2 total ``` - Add `--record` to capture full logs, traces, and videos and review them in the [Checkly web app](https://app.checklyhq.com). + 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). @@ -108,18 +155,15 @@ If you'd rather create a single check in the web UI, start with one of the check - Add an [alert channel](/communicate/alerts/overview) so you're notified when a check fails. Define it in a new `__checks__/alert-channels.ts` file, then attach it to your checks through the `alertChannels` defaults in your config. + 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 { SlackAppAlertChannel } from 'checkly/constructs' + import { EmailAlertChannel } from 'checkly/constructs' - export const slackChannel = new SlackAppAlertChannel('slack-alert-channel', { - slackChannels: ['#alerts'], - sendFailure: true, - sendRecovery: true, - sendDegraded: false, + export const emailChannel = new EmailAlertChannel('email-alert-channel', { + address: 'alerts@example.com', }) ``` @@ -134,30 +178,20 @@ If you'd rather create a single check in the web UI, start with one of the check }) ``` - - - ```ts alert-channels.ts - import { EmailAlertChannel } from 'checkly/constructs' - - export const emailChannel = new EmailAlertChannel('email-alert-channel', { - address: 'alerts@example.com', - }) - ``` - - Set the channel as a default in your `checkly.config.ts` so every check, including your Browser Check, uses it: + 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 { slackChannel } from './__checks__/alert-channels' + import { emailChannel, phoneChannel } from './__checks__/alert-channels' export default defineConfig({ projectName: 'My Project', logicalId: 'my-project', checks: { // ...your existing check defaults - alertChannels: [slackChannel], + alertChannels: [emailChannel, phoneChannel], }, }) ``` diff --git a/snippets/setup-flow.jsx b/snippets/setup-flow.jsx new file mode 100644 index 00000000..1312a630 --- /dev/null +++ b/snippets/setup-flow.jsx @@ -0,0 +1,366 @@ +"use client"; +import { useEffect, useState } from "react"; + +/** + * 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} +

+
+
+
+ ); +}; From 98478c6f7a07da2bf0e609a4ed1539695ba96387 Mon Sep 17 00:00:00 2001 From: stefan judis Date: Fri, 26 Jun 2026 17:13:46 +0200 Subject: [PATCH 05/18] Note that SetupFlow component is AI generated --- snippets/setup-flow.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/snippets/setup-flow.jsx b/snippets/setup-flow.jsx index 1312a630..b5156589 100644 --- a/snippets/setup-flow.jsx +++ b/snippets/setup-flow.jsx @@ -2,6 +2,8 @@ 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. * From b1811bfcc1fb865c50fe15ac505756072e3bf33d Mon Sep 17 00:00:00 2001 From: stefan judis Date: Fri, 26 Jun 2026 17:17:08 +0200 Subject: [PATCH 06/18] Tighten AI-voice copy in general quickstart agent path --- quickstarts/general.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/quickstarts/general.mdx b/quickstarts/general.mdx index bd96cb76..4991bf50 100644 --- a/quickstarts/general.mdx +++ b/quickstarts/general.mdx @@ -44,9 +44,9 @@ 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, your agent does the work. It generates checks from your project, logs in, runs them with `npx checkly test`, and deploys them with `npx checkly deploy`, prompting you whenever it needs a hand. Sit back, then open [your Checkly dashboard](https://app.checklyhq.com) to see your monitoring live. +From here, the agent generates checks from your project, logs in, runs them with `npx checkly test`, and deploys them with `npx checkly deploy`, asking for input when it needs it. Open [your Checkly dashboard](https://app.checklyhq.com) to see your monitoring live. -Want to know what's happening under the hood, or prefer to drive it yourself? The [steps below](#set-it-up-yourself) walk through each command. +To see what each command does, or to run them yourself, follow the [steps below](#set-it-up-yourself). ### Set it up yourself From 486eff7684ec191b25bb6de266b84193c16b59b2 Mon Sep 17 00:00:00 2001 From: stefan judis Date: Fri, 26 Jun 2026 17:22:23 +0200 Subject: [PATCH 07/18] Make agent-path section a what-it-might-do list --- quickstarts/general.mdx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/quickstarts/general.mdx b/quickstarts/general.mdx index 4991bf50..f155d28e 100644 --- a/quickstarts/general.mdx +++ b/quickstarts/general.mdx @@ -44,7 +44,15 @@ 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, the agent generates checks from your project, logs in, runs them with `npx checkly test`, and deploys them with `npx checkly deploy`, asking for input when it needs it. Open [your Checkly dashboard](https://app.checklyhq.com) to see your monitoring live. +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 + +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). From af6f497eea46a4e62642b17eec6b3c92b1fc64a6 Mon Sep 17 00:00:00 2001 From: stefan judis Date: Fri, 26 Jun 2026 17:23:33 +0200 Subject: [PATCH 08/18] Add deploy step to agent what-it-might-do list --- quickstarts/general.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/quickstarts/general.mdx b/quickstarts/general.mdx index f155d28e..bd78b59e 100644 --- a/quickstarts/general.mdx +++ b/quickstarts/general.mdx @@ -49,6 +49,7 @@ 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` +- Deploy your monitoring with `npx checkly deploy` after your confirmation - Set up alert channels - Reuse your existing Playwright tests From 9874a49fb18a176c1eac43071cf0978de985bcd5 Mon Sep 17 00:00:00 2001 From: stefan judis Date: Fri, 26 Jun 2026 17:23:47 +0200 Subject: [PATCH 09/18] Move deploy to end of agent what-it-might-do list --- quickstarts/general.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/quickstarts/general.mdx b/quickstarts/general.mdx index bd78b59e..3d71b62b 100644 --- a/quickstarts/general.mdx +++ b/quickstarts/general.mdx @@ -49,9 +49,9 @@ 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` -- Deploy your monitoring with `npx checkly deploy` after your confirmation - 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. From fd02296bb4d2436a0fc8fdd5ba70e6a17ea3d2ac Mon Sep 17 00:00:00 2001 From: stefan judis Date: Fri, 26 Jun 2026 17:33:16 +0200 Subject: [PATCH 10/18] Center the agent sparkle icon in SetupFlow tile --- snippets/setup-flow.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/snippets/setup-flow.jsx b/snippets/setup-flow.jsx index b5156589..a36b1e4f 100644 --- a/snippets/setup-flow.jsx +++ b/snippets/setup-flow.jsx @@ -112,8 +112,8 @@ export const SetupFlow = () => { if (name === "agent") { return ( - - + + ); } From 4e9ba39c560b94ff2461173256b4fbbbc68b6123 Mon Sep 17 00:00:00 2001 From: stefan judis Date: Fri, 26 Jun 2026 17:35:17 +0200 Subject: [PATCH 11/18] Center step labels in SetupFlow rail; revert icon change --- .../synthetic-monitoring/api-checks}/openapi-spec.mdx | 0 .../synthetic-monitoring/api-checks/quickstart.mdx | 0 .../synthetic-monitoring/browser-checks/quickstart.mdx | 0 .../synthetic-monitoring/multistep-checks/quickstart.mdx | 0 .../synthetic-monitoring/playwright-checks/quickstart.mdx | 0 .../uptime-monitoring/heartbeat-monitors/quickstart.mdx | 0 .../uptime-monitoring/tcp-monitors/quickstart.mdx | 0 .../uptime-monitoring/url-monitors/quickstart.mdx | 0 quickstarts/general.mdx => quickstart.mdx | 0 snippets/setup-flow.jsx | 6 +++--- 10 files changed, 3 insertions(+), 3 deletions(-) rename {quickstarts => detect/synthetic-monitoring/api-checks}/openapi-spec.mdx (100%) rename quickstarts/api-check.mdx => detect/synthetic-monitoring/api-checks/quickstart.mdx (100%) rename quickstarts/browser-check.mdx => detect/synthetic-monitoring/browser-checks/quickstart.mdx (100%) rename quickstarts/multistep-check.mdx => detect/synthetic-monitoring/multistep-checks/quickstart.mdx (100%) rename quickstarts/playwright-check.mdx => detect/synthetic-monitoring/playwright-checks/quickstart.mdx (100%) rename quickstarts/heartbeat-monitor.mdx => detect/uptime-monitoring/heartbeat-monitors/quickstart.mdx (100%) rename quickstarts/tcp-monitor.mdx => detect/uptime-monitoring/tcp-monitors/quickstart.mdx (100%) rename quickstarts/url-monitor.mdx => detect/uptime-monitoring/url-monitors/quickstart.mdx (100%) rename quickstarts/general.mdx => quickstart.mdx (100%) 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 100% rename from quickstarts/api-check.mdx rename to detect/synthetic-monitoring/api-checks/quickstart.mdx diff --git a/quickstarts/browser-check.mdx b/detect/synthetic-monitoring/browser-checks/quickstart.mdx similarity index 100% rename from quickstarts/browser-check.mdx rename to detect/synthetic-monitoring/browser-checks/quickstart.mdx diff --git a/quickstarts/multistep-check.mdx b/detect/synthetic-monitoring/multistep-checks/quickstart.mdx similarity index 100% rename from quickstarts/multistep-check.mdx rename to detect/synthetic-monitoring/multistep-checks/quickstart.mdx diff --git a/quickstarts/playwright-check.mdx b/detect/synthetic-monitoring/playwright-checks/quickstart.mdx similarity index 100% rename from quickstarts/playwright-check.mdx rename to detect/synthetic-monitoring/playwright-checks/quickstart.mdx diff --git a/quickstarts/heartbeat-monitor.mdx b/detect/uptime-monitoring/heartbeat-monitors/quickstart.mdx similarity index 100% rename from quickstarts/heartbeat-monitor.mdx rename to detect/uptime-monitoring/heartbeat-monitors/quickstart.mdx diff --git a/quickstarts/tcp-monitor.mdx b/detect/uptime-monitoring/tcp-monitors/quickstart.mdx similarity index 100% rename from quickstarts/tcp-monitor.mdx rename to detect/uptime-monitoring/tcp-monitors/quickstart.mdx diff --git a/quickstarts/url-monitor.mdx b/detect/uptime-monitoring/url-monitors/quickstart.mdx similarity index 100% rename from quickstarts/url-monitor.mdx rename to detect/uptime-monitoring/url-monitors/quickstart.mdx diff --git a/quickstarts/general.mdx b/quickstart.mdx similarity index 100% rename from quickstarts/general.mdx rename to quickstart.mdx diff --git a/snippets/setup-flow.jsx b/snippets/setup-flow.jsx index a36b1e4f..b06da6e8 100644 --- a/snippets/setup-flow.jsx +++ b/snippets/setup-flow.jsx @@ -112,8 +112,8 @@ export const SetupFlow = () => { if (name === "agent") { return ( - - + + ); } @@ -289,7 +289,7 @@ export const SetupFlow = () => {
{step.label}
, From a3925fb38dc15527ac077827b653dace4450a84b Mon Sep 17 00:00:00 2001 From: stefan judis Date: Fri, 26 Jun 2026 17:38:52 +0200 Subject: [PATCH 12/18] Move check-type quickstarts into their Detect sections Relabel each relocated quickstart to 'Quickstart' and list it first in its section group, promote the general guide to a top-level Quickstart page, add redirects from the old /quickstarts/* URLs, and update internal links. --- detect/overview.mdx | 4 +- .../api-checks/quickstart.mdx | 2 +- .../browser-checks/quickstart.mdx | 4 +- .../multistep-checks/quickstart.mdx | 2 +- .../playwright-checks/overview.mdx | 2 +- .../playwright-checks/quickstart.mdx | 2 +- .../heartbeat-monitors/quickstart.mdx | 2 +- .../tcp-monitors/quickstart.mdx | 2 +- .../url-monitors/quickstart.mdx | 2 +- docs.json | 61 ++++++++++++++----- index.mdx | 4 +- quickstart.mdx | 10 +-- .../playwright-check-suite-setup-prompt.mdx | 2 +- 13 files changed, 65 insertions(+), 34 deletions(-) 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/detect/synthetic-monitoring/api-checks/quickstart.mdx b/detect/synthetic-monitoring/api-checks/quickstart.mdx index a1f1169a..faece8f8 100644 --- a/detect/synthetic-monitoring/api-checks/quickstart.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/detect/synthetic-monitoring/browser-checks/quickstart.mdx b/detect/synthetic-monitoring/browser-checks/quickstart.mdx index 51d36382..05166082 100644 --- a/detect/synthetic-monitoring/browser-checks/quickstart.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)) diff --git a/detect/synthetic-monitoring/multistep-checks/quickstart.mdx b/detect/synthetic-monitoring/multistep-checks/quickstart.mdx index 8d2ba48d..7bc48ed6 100644 --- a/detect/synthetic-monitoring/multistep-checks/quickstart.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/detect/synthetic-monitoring/playwright-checks/quickstart.mdx b/detect/synthetic-monitoring/playwright-checks/quickstart.mdx index a8193f75..ee4e5b96 100644 --- a/detect/synthetic-monitoring/playwright-checks/quickstart.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/detect/uptime-monitoring/heartbeat-monitors/quickstart.mdx b/detect/uptime-monitoring/heartbeat-monitors/quickstart.mdx index 53e0c41c..66f4448c 100644 --- a/detect/uptime-monitoring/heartbeat-monitors/quickstart.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/detect/uptime-monitoring/tcp-monitors/quickstart.mdx b/detect/uptime-monitoring/tcp-monitors/quickstart.mdx index 2f2093ca..1b3523b6 100644 --- a/detect/uptime-monitoring/tcp-monitors/quickstart.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/detect/uptime-monitoring/url-monitors/quickstart.mdx b/detect/uptime-monitoring/url-monitors/quickstart.mdx index 75126489..06835b9e 100644 --- a/detect/uptime-monitoring/url-monitors/quickstart.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 8582fb26..9d95b1f9 100644 --- a/docs.json +++ b/docs.json @@ -47,20 +47,7 @@ "group": "Getting Started", "pages": [ "/what-is-checkly", - { - "group": "Quickstarts", - "pages": [ - "quickstarts/general", - "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 +137,7 @@ { "group": "URL Monitors", "pages": [ + "detect/uptime-monitoring/url-monitors/quickstart", "detect/uptime-monitoring/url-monitors/overview", "detect/uptime-monitoring/url-monitors/configuration" ] @@ -157,6 +145,7 @@ { "group": "TCP Monitors", "pages": [ + "detect/uptime-monitoring/tcp-monitors/quickstart", "detect/uptime-monitoring/tcp-monitors/overview", "detect/uptime-monitoring/tcp-monitors/configuration" ] @@ -178,6 +167,7 @@ { "group": "Heartbeat Monitors", "pages": [ + "detect/uptime-monitoring/heartbeat-monitors/quickstart", "detect/uptime-monitoring/heartbeat-monitors/overview", "detect/uptime-monitoring/heartbeat-monitors/examples" ] @@ -198,12 +188,14 @@ { "group": "API Checks", "pages": [ + "detect/synthetic-monitoring/api-checks/quickstart", "detect/synthetic-monitoring/api-checks/overview", "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 +203,7 @@ { "group": "Multistep Checks", "pages": [ + "detect/synthetic-monitoring/multistep-checks/quickstart", "detect/synthetic-monitoring/multistep-checks/overview", "detect/synthetic-monitoring/multistep-checks/multistep-structure", "detect/synthetic-monitoring/multistep-checks/degraded-states", @@ -222,6 +215,7 @@ { "group": "Browser Checks", "pages": [ + "detect/synthetic-monitoring/browser-checks/quickstart", "detect/synthetic-monitoring/browser-checks/overview", "detect/synthetic-monitoring/browser-checks/mac-structure", "detect/synthetic-monitoring/browser-checks/performance-metrics", @@ -236,6 +230,7 @@ { "group": "Playwright Check Suites", "pages": [ + "detect/synthetic-monitoring/playwright-checks/quickstart", "detect/synthetic-monitoring/playwright-checks/overview", "detect/synthetic-monitoring/playwright-checks/configuration", "detect/synthetic-monitoring/playwright-checks/test-organization", @@ -1328,6 +1323,42 @@ } }, "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": "/ai/rules", "destination": "/ai/overview" @@ -1354,7 +1385,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 index 3d71b62b..7cb1bfe2 100644 --- a/quickstart.mdx +++ b/quickstart.mdx @@ -1,7 +1,7 @@ --- 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: 'General' +sidebarTitle: 'Quickstart' --- import CliAuth from '/snippets/cli-auth.mdx'; @@ -101,7 +101,7 @@ The steps below use the Checkly CLI directly so you can build and deploy your mo - Checks are code. The scaffolded `__checks__/homepage.spec.ts` is a [Browser Check](/quickstarts/browser-check): a standard `@playwright/test` file that Checkly runs as a monitor. Edit it to load a page and assert on what matters: + 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 @@ -127,7 +127,7 @@ The steps below use the Checkly CLI directly so you can build and deploy your mo ``` - 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](/quickstarts/api-check). For every construct and option, see the [Constructs reference](/constructs/overview). + 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). @@ -222,10 +222,10 @@ When you're done experimenting, tear down everything this project created with ` All `npx checkly` commands and options. - + Monitor realistic user flows with Playwright. - + Monitor your backend services and endpoints. 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/) From b9de65fa3ff2bf621dcced1334247063d6c9af9b Mon Sep 17 00:00:00 2001 From: stefan judis Date: Fri, 26 Jun 2026 17:42:03 +0200 Subject: [PATCH 13/18] Order check-type sections as overview then quickstart --- docs.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs.json b/docs.json index 9d95b1f9..80f7e5d6 100644 --- a/docs.json +++ b/docs.json @@ -137,16 +137,16 @@ { "group": "URL Monitors", "pages": [ - "detect/uptime-monitoring/url-monitors/quickstart", "detect/uptime-monitoring/url-monitors/overview", + "detect/uptime-monitoring/url-monitors/quickstart", "detect/uptime-monitoring/url-monitors/configuration" ] }, { "group": "TCP Monitors", "pages": [ - "detect/uptime-monitoring/tcp-monitors/quickstart", "detect/uptime-monitoring/tcp-monitors/overview", + "detect/uptime-monitoring/tcp-monitors/quickstart", "detect/uptime-monitoring/tcp-monitors/configuration" ] }, @@ -167,8 +167,8 @@ { "group": "Heartbeat Monitors", "pages": [ - "detect/uptime-monitoring/heartbeat-monitors/quickstart", "detect/uptime-monitoring/heartbeat-monitors/overview", + "detect/uptime-monitoring/heartbeat-monitors/quickstart", "detect/uptime-monitoring/heartbeat-monitors/examples" ] } @@ -188,8 +188,8 @@ { "group": "API Checks", "pages": [ - "detect/synthetic-monitoring/api-checks/quickstart", "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", @@ -203,8 +203,8 @@ { "group": "Multistep Checks", "pages": [ - "detect/synthetic-monitoring/multistep-checks/quickstart", "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", @@ -215,8 +215,8 @@ { "group": "Browser Checks", "pages": [ - "detect/synthetic-monitoring/browser-checks/quickstart", "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", @@ -230,8 +230,8 @@ { "group": "Playwright Check Suites", "pages": [ - "detect/synthetic-monitoring/playwright-checks/quickstart", "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", From 918c94a2ee0cc6bb3c536bfa6a1ae4af7759887f Mon Sep 17 00:00:00 2001 From: stefan judis Date: Fri, 26 Jun 2026 17:43:39 +0200 Subject: [PATCH 14/18] Fold creating-a-browser-check into the browser check quickstart Merge the welcome screenshot and setup bullets into the quickstart's first step, remove the orphaned page, and redirect its old URLs. --- .../browser-checks/quickstart.mdx | 15 +- docs.json | 8 ++ quickstarts/creating-a-browser-check.mdx | 131 ------------------ 3 files changed, 22 insertions(+), 132 deletions(-) delete mode 100644 quickstarts/creating-a-browser-check.mdx diff --git a/detect/synthetic-monitoring/browser-checks/quickstart.mdx b/detect/synthetic-monitoring/browser-checks/quickstart.mdx index 05166082..778a6a9e 100644 --- a/detect/synthetic-monitoring/browser-checks/quickstart.mdx +++ b/detect/synthetic-monitoring/browser-checks/quickstart.mdx @@ -23,10 +23,23 @@ Browser Checks are perfect for monitoring realistic user flows within your appli - + + Light mode interface + Dark mode interface + - **Head to [Create a Check](https://app.checklyhq.com/accounts/create)** - **Choose "Browser Check"** for comprehensive website monitoring + - **Enter your website URL** (e.g., `https://your-website.com`) + - **Click "Create Check"** diff --git a/docs.json b/docs.json index 80f7e5d6..6d36365c 100644 --- a/docs.json +++ b/docs.json @@ -1359,6 +1359,14 @@ "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" 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 From 892007af3eea7ca7b7ab0db89ebacb69c26a49be Mon Sep 17 00:00:00 2001 From: stefan judis Date: Fri, 26 Jun 2026 17:44:27 +0200 Subject: [PATCH 15/18] Drop misleading URL/Create Check bullets from browser check quickstart --- detect/synthetic-monitoring/browser-checks/quickstart.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/detect/synthetic-monitoring/browser-checks/quickstart.mdx b/detect/synthetic-monitoring/browser-checks/quickstart.mdx index 778a6a9e..1f01c746 100644 --- a/detect/synthetic-monitoring/browser-checks/quickstart.mdx +++ b/detect/synthetic-monitoring/browser-checks/quickstart.mdx @@ -38,8 +38,6 @@ 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 - - **Enter your website URL** (e.g., `https://your-website.com`) - - **Click "Create Check"** From 9319416aa645631a88e03464d53bedd1f1389fcd Mon Sep 17 00:00:00 2001 From: stefan judis Date: Fri, 26 Jun 2026 17:46:56 +0200 Subject: [PATCH 16/18] Reword browser check step 1 to pick the Browser Check template --- detect/synthetic-monitoring/browser-checks/quickstart.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/detect/synthetic-monitoring/browser-checks/quickstart.mdx b/detect/synthetic-monitoring/browser-checks/quickstart.mdx index 1f01c746..1b2cb6fd 100644 --- a/detect/synthetic-monitoring/browser-checks/quickstart.mdx +++ b/detect/synthetic-monitoring/browser-checks/quickstart.mdx @@ -36,8 +36,8 @@ 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 + 1. **Head to [Create a Check](https://app.checklyhq.com/accounts/create)** + 2. **Pick the Browser Check template** to start from a working example From b5edbe135842bb5a99530dce18d45c218afb544d Mon Sep 17 00:00:00 2001 From: stefan judis Date: Fri, 26 Jun 2026 17:47:25 +0200 Subject: [PATCH 17/18] Reword to choose from one of the Browser Check templates --- detect/synthetic-monitoring/browser-checks/quickstart.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/detect/synthetic-monitoring/browser-checks/quickstart.mdx b/detect/synthetic-monitoring/browser-checks/quickstart.mdx index 1b2cb6fd..9e98819c 100644 --- a/detect/synthetic-monitoring/browser-checks/quickstart.mdx +++ b/detect/synthetic-monitoring/browser-checks/quickstart.mdx @@ -37,7 +37,7 @@ Browser Checks are perfect for monitoring realistic user flows within your appli 1. **Head to [Create a Check](https://app.checklyhq.com/accounts/create)** - 2. **Pick the Browser Check template** to start from a working example + 2. **Choose from one of the Browser Check templates** to start from a working example From ac87040981cb775b028a2f96a7ff9be1651a7ba7 Mon Sep 17 00:00:00 2001 From: Stefan Judis Date: Fri, 26 Jun 2026 17:48:13 +0200 Subject: [PATCH 18/18] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- snippets/setup-flow.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/snippets/setup-flow.jsx b/snippets/setup-flow.jsx index b06da6e8..e262df68 100644 --- a/snippets/setup-flow.jsx +++ b/snippets/setup-flow.jsx @@ -273,6 +273,7 @@ export const SetupFlow = () => {