|
| 1 | +--- |
| 2 | +title: Create Uptime Monitoring in minutes with Claude Code and Checkly |
| 3 | +description: >- |
| 4 | + |
| 5 | +author: Nočnica Mellifera |
| 6 | +avatar: 'images/avatars/nica-mellifera.png' |
| 7 | +tags: |
| 8 | + - FAQ |
| 9 | +--- |
| 10 | +This guide will show you how to monitor all the pages of your site, creating URL monitors automatically using Claude Code, and then deploying those checks with the Checkly CLI. |
| 11 | + |
| 12 | +In the final steps of this tutorial, you’ll use Claude Code to create a script to regularly update your URL Monitors based on any change in your sitemap. |
| 13 | + |
| 14 | +## Set up Claude Code and your Checkly |
| 15 | + |
| 16 | +Start by [installing the Checkly CLI](https://www.checklyhq.com/docs/cli/installation/), then create a repository that will be the ‘project’ that contains all your Checkly monitors managed as code. If you don’t already have a project, create one with: |
| 17 | + |
| 18 | +`npm create checkly@latest` |
| 19 | + |
| 20 | +If you’d like to follow the tutorial examples below, clone the [uptime monitoring demo](https://github.com/serverless-mom/uptimeMonitoring) repository, and copy everything in the `/**__checks__`** folder to your own project. |
| 21 | + |
| 22 | +Next, install [Claude Code](https://www.anthropic.com/claude-code) globally with |
| 23 | + |
| 24 | +`npm install -g @anthropic-ai/claude-code` |
| 25 | + |
| 26 | +and from the root folder of your project and start Code with the `claude` command. |
| 27 | + |
| 28 | +You’ll be prompted to sign in to or sign up for an Anthropic account. |
| 29 | + |
| 30 | +I’d recommend using the Visual Studio Code plugin for Claude, which will make it easier to connect Claude Code with the VS Code file browser with Claude’s context (the VS Code plugin does a lot more than just context, this is just the most convenient feature we’ll use for this tutorial). |
| 31 | + |
| 32 | +Optionally, from the Claude Code prompt, run `/init` to scan your project and create an initial `CLAUDE.md` context file. |
| 33 | + |
| 34 | +### Optional: add the Playwright MCP |
| 35 | + |
| 36 | +The instructions given here do not require that Claude Code access a browser and scrape websites, but you may want to add details to your prompts that scan specific pages for further URLs to monitor. In that case, you can give Claude Code access to the browser by adding the [Playwright MCP](https://github.com/microsoft/playwright-mcp) to your local configuration with `claude mcp add playwright npx @playwright/mcp@latest` |
| 37 | + |
| 38 | +## Give Claude Code Some Context |
| 39 | + |
| 40 | +You want Claude to create files and updates that make sense as a [Checkly construct](https://www.checklyhq.com/docs/cli/constructs-reference/). The most token-efficient path would be to add only an existing URL monitor as context, but we want an approach that’s a bit more robust for all our future Checkly work, let’s add [Checkly’s AI rules file](https://www.checklyhq.com/docs/ai/use-checkly-with-ai-ide/) to our `CLAUDE.md` context file: |
| 41 | + |
| 42 | +```bash |
| 43 | +mkdir \p .claude && |
| 44 | +curl -o .claude/checkly.rules.md https://www.checklyhq.com/docs/ai/checkly.rules.md |
| 45 | +echo "- examine checkly.rules.md for code generation rules" >> .claude/CLAUDE.md |
| 46 | +``` |
| 47 | + |
| 48 | +After this you’ll need to exit and restart Claude Code for it to pick up changes to our context file. |
| 49 | + |
| 50 | + |
| 51 | + |
| 52 | +*Claude Code is ready to write a new URL monitor based on the current file’s structure* |
| 53 | + |
| 54 | +## Create new URL Monitors |
| 55 | + |
| 56 | +For starters, let’s try creating a single new URL monitor with a few changes from the current file. The context we gave Claude Code was this monitor: |
| 57 | + |
| 58 | +```ts |
| 59 | +import { Frequency, UrlMonitor, UrlAssertionBuilder } from 'checkly/constructs' |
| 60 | + |
| 61 | +new UrlMonitor('url-pinger-1', { |
| 62 | + frequency: Frequency.EVERY_10S, |
| 63 | + name: 'URL pinger 1', |
| 64 | + activated: true, |
| 65 | + request: { |
| 66 | + url: 'https://httpbin.org/get', |
| 67 | + skipSSL: false, |
| 68 | + followRedirects: true, |
| 69 | + assertions: [ |
| 70 | + UrlAssertionBuilder.statusCode().equals(200), |
| 71 | + ] |
| 72 | + } |
| 73 | +}) |
| 74 | +``` |
| 75 | + |
| 76 | +with the file open as context, try a command like: |
| 77 | + |
| 78 | +> Create a new URL pinger for the site [https://danube-webshop.herokuapp.com/](https://danube-webshop.herokuapp.com/) that runs every five minutes and doesn’t follow redirects |
| 79 | +> |
| 80 | +
|
| 81 | +After a few seconds, Claude Code will produce this: |
| 82 | + |
| 83 | +```ts |
| 84 | +import { Frequency, UrlMonitor, UrlAssertionBuilder } from 'checkly/constructs' |
| 85 | + |
| 86 | +new UrlMonitor('danube-web-shop-pinger', { |
| 87 | + frequency: Frequency.EVERY_5M, |
| 88 | + name: 'Danube Web Shop Pinger', |
| 89 | + activated: true, |
| 90 | + request: { |
| 91 | + url: 'https://danube-web.shop/', |
| 92 | + skipSSL: false, |
| 93 | + followRedirects: true, |
| 94 | + assertions: [ |
| 95 | + UrlAssertionBuilder.statusCode().equals(200), |
| 96 | + ] |
| 97 | + } |
| 98 | +}) |
| 99 | +``` |
| 100 | + |
| 101 | +One thing I tested while writing this article was whether picking the wrong prompt would result in invalid Checkly construct code. The Frequency class here doesn’t accept arbitrary values, so I wondered what would happen since the [source file for Frequency](https://github.com/checkly/checkly-cli/blob/main/packages/cli/src/constructs/frequency.ts) won’t be part of Claude’s context. I tried requesting a check that ran “every 17 seconds” and Claude prompted me to run a `find` on the project to identify valid values for `frequency`. In the end, Claude Code did create valid code with this note in the process feed. |
| 102 | + |
| 103 | + |
| 104 | + |
| 105 | + |
| 106 | +## Create Monitors en Masse |
| 107 | + |
| 108 | +It’s great to use Claude to create a single new monitor, but we haven’t saved much time versus just copying and pasting code by hand. Let’s try to save some serious time by creating a large number of URL monitors all at once. Let’s say we want to monitor every page of the Anthropic AI website. We can see every page URL on Anthropic’s [sitemap.xml](https://www.anthropic.com/sitemap.xml), shouldn’t there be an easy way to create a URL monitor for every single page? Sure enough there is! After saving the sitemap down to a local file, try the following in Claude Code: |
| 109 | + |
| 110 | +> create a single check.ts file that creates URL monitors for every URL listed in sitemap.xml |
| 111 | +> |
| 112 | +
|
| 113 | +I requested a single file since we don’t want to muck about with dozens and dozens of check.ts files. With my run of Claude Code I got the following output: |
| 114 | + |
| 115 | +```ts |
| 116 | +//sitemapMonitors.check.ts - comments added by the author |
| 117 | +//In this bulk monitoring example we'll monitor 50 URLs from one file |
| 118 | +//this will create 50 URL monitors in your Checkly dashboard |
| 119 | + |
| 120 | +import { Frequency, UrlMonitor, UrlAssertionBuilder } from 'checkly/constructs' |
| 121 | + |
| 122 | +//grepped a sitemap.xml file for an array of URLs |
| 123 | +const sitemapUrls = [ |
| 124 | +//removed for brevity |
| 125 | +] |
| 126 | + |
| 127 | +//create paths and friendly names for each monitor |
| 128 | +sitemapUrls.forEach((url, index) => { |
| 129 | + const urlPath = new URL(url).pathname.replace(/\//g, '-').replace(/^-+|-+$/g, '') || 'root' |
| 130 | + const monitorId = `checkly-${urlPath}-${index}` |
| 131 | + const monitorName = `Checkly ${urlPath.replace(/-/g, ' ')} Monitor` |
| 132 | + |
| 133 | +//create each monitor with a five minute interval |
| 134 | + new UrlMonitor(monitorId, { |
| 135 | + frequency: Frequency.EVERY_5M, |
| 136 | + name: monitorName, |
| 137 | + activated: true, |
| 138 | + request: { |
| 139 | + url: url, |
| 140 | + skipSSL: false, |
| 141 | + followRedirects: true, |
| 142 | + assertions: [ |
| 143 | + UrlAssertionBuilder.statusCode().equals(200), |
| 144 | + ] |
| 145 | + } |
| 146 | + }) |
| 147 | +}) |
| 148 | +``` |
| 149 | + |
| 150 | +The only edits I’d recommend are to the `monitorName` and the configuration for the monitors as needed. |
| 151 | + |
| 152 | +Once you’re happy with the configuration, you can deploy and run these new monitors. |
| 153 | + |
| 154 | +## Deploy With the Checkly CLI |
| 155 | + |
| 156 | +Claude Code can create or update your codebase at high speed, but it’s Checkly’s ability to deploy monitors right from your codebase that give us the power to monitor large numbers of endpoints quickly. With your project updated with a new check file, it’s time to use the Checkly CLI to deploy your check. |
| 157 | + |
| 158 | +Since we have written a large number of tests, let's run them once with `npx checkly test`. |
| 159 | + |
| 160 | +As these monitors were written based on a recent scrape of the sitemap, we’d expect all these tests to pass. |
| 161 | + |
| 162 | + |
| 163 | + |
| 164 | +However, sometimes sitemaps are out of date, so it’s possible that a few of these will fail! As long as the results look generally correct, it’s time to deploy. |
| 165 | + |
| 166 | +In our example, we want to create over 50 URL monitors at once, so it’s worth checking whether components like the logical ID of these checks are properly formatted before deployment. Run the `deploy` command with the `-p` preview flag: |
| 167 | + |
| 168 | +```bash |
| 169 | +npx checkly deploy -p |
| 170 | +``` |
| 171 | + |
| 172 | +This command won’t deploy anything, just parse our project and show us what will be created when we run the command without the preview flag. |
| 173 | + |
| 174 | + |
| 175 | + |
| 176 | +*We’ll get a long list of new URL monitors that will be created* |
| 177 | + |
| 178 | +Once we’re happy with what will be deployed, it’s time to run `npx checkly deploy` and create the URL monitors! |
| 179 | + |
| 180 | +## Go further: automatically update our monitors when sitemap.xml is updated |
| 181 | + |
| 182 | +The process above is a good ‘first step’, but it’s a one-shot creation of URL monitors: when our sitemap updates, we’re not picking up those changes. We could run the whole process over from scratch, but this has two significant drawbacks: |
| 183 | + |
| 184 | +- A process of regular updates shouldn’t rely on AI for your deploy process. Right now, we might only deploy a few times a month, but process shifts could mean hundreds of deployments in a day, hammering our model access bills. |
| 185 | +- Re-generating URL monitor code will mean slight differences in monitor naming and logical IDs, meaning duplicate url monitor creation |
| 186 | + |
| 187 | +Rather, let’s use Claude Code to write a stable and reliable script to update the monitors based on the live sitemap. You can create an update script with the prompt: |
| 188 | + |
| 189 | +> Create a typescript file that downloads the xml from [https://www.anthropic.com/sitemap.xml](https://www.anthropic.com/sitemap.xml) and parses the contents into a JSON array containing every URL listed in the sitemap. Save that array as urlArray.json |
| 190 | +
|
| 191 | + |
| 192 | +When I ran this prompt, I sometimes got a script file that spent a number of lines on deduplicating the list and looking for sub-sitemaps, so you may need to tweak your prompt a bit. |
| 193 | + |
| 194 | +The resultant script file (and the rewritten check file to use a local file) is in the [‘examples’ folder of the url monitoring demo repository](https://github.com/serverless-mom/uptimeMonitoring/tree/main/__checks__/examples). In your own version, it’s not necessary to write the sitemap or the URL array to disk, these are just debug steps for our demonstration. |
| 195 | + |
| 196 | +Note the line: |
| 197 | + |
| 198 | +```tsx |
| 199 | + const monitorId = `pinger-${urlPath}-${index}` |
| 200 | +``` |
| 201 | + |
| 202 | +must remain as stable as possible; changing the logical ID of a monitor will delete the old monitor and its history. |
| 203 | + |
| 204 | +After this script is verified to be working, we can use these scripts as part of a [GitHub Action](https://www.checklyhq.com/docs/cicd/github-actions/) to update our URL Monitors whenever we deploy to our service’s repository. |
| 205 | + |
| 206 | +## Conclusion |
| 207 | + |
| 208 | +With Checkly’s uptime monitoring as code, you can now effortlessly monitor every critical endpoint of your application—scaling from a single URL to hundreds with just a few prompts. By combining AI-assisted code generation with Checkly’s Monitoring as Code approach, you ensure that your monitoring setup is as dynamic and up-to-date as your application itself. |
| 209 | + |
| 210 | +The process is simple: |
| 211 | + |
| 212 | +1. **Define your monitoring needs**—whether it’s a single endpoint or an entire sitemap. |
| 213 | +2. **Let Claude Code generate the checks**—saving hours of manual coding. |
| 214 | +3. **Deploy instantly with Checkly CLI**—ensuring real-time monitoring without delays. |
| 215 | + |
| 216 | +And with automated sitemap updates, your monitors evolve alongside your application, keeping your uptime guarantees strong without extra manual effort. |
| 217 | + |
| 218 | +By integrating AI-powered development with robust monitoring tools like Checkly, teams can shift from reactive debugging to proactive reliability—catching issues before users do. Start deploying smarter uptime monitoring today, and never miss an outage again. |
| 219 | + |
| 220 | +Ready to automate your monitoring? [Try Checkly now](https://www.checklyhq.com/) and see how Claude Code can streamline your workflow. 🚀 |
0 commit comments