> ## Documentation Index > Fetch the complete documentation index at: https://checklyhq.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Checkly Quickstart > Add synthetic monitoring to your existing project in minutes. Let your AI agent set up Checkly, or follow the steps yourself. 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; 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}

; }; 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 theme={null} 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 theme={null} 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 theme={null} |- 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. ```bash Terminal theme={null} npx checkly login ``` 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 theme={null} 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 theme={null} 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 theme={null} 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 theme={null} 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 theme={null} import { EmailAlertChannel } from 'checkly/constructs' export const emailChannel = new EmailAlertChannel('email-alert-channel', { address: 'alerts@example.com', }) ``` ```ts alert-channels.ts theme={null} 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 theme={null} 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.