You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jan 5, 2026. It is now read-only.
Copy file name to clipboardExpand all lines: site/content/guides/claude-code-monitoring.md
+12-13Lines changed: 12 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -30,19 +30,23 @@ You’ll be prompted to sign in to or sign up for an Anthropic account.
30
30
31
31
I recommend using [the Visual Studio Code plugin for Claude](https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code), 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).
32
32
33
-
Optionally, from the Claude Code prompt, run `/init` to scan your project and create an initial `CLAUDE.md` context file.
34
-
35
33
### Add the Playwright MCP
36
34
37
35
You can give Claude Code access to a browser by adding the [Playwright MCP](https://github.com/microsoft/playwright-mcp) to your local configuration with
38
36
39
37
```bash
40
38
claude mcp add playwright npx @playwright/mcp@latest
41
39
```
40
+
This will let us ask Claude Code to do things like crawling a particular website and acting on what it finds by opening the site in a browser.
42
41
43
42
## Give Claude Code Some Context
43
+
Everything we write into the Claude model is part of a 'prompt,' and by default Claude Code will ad a bit of information to what we submit as 'context' on that prompt. Ideally, our requests written into Claude Code would include context about our specific project: its structure, language, and even its purpose. Because of the `npm create` command we ran above, our folder already has a boilerplate version of a Checkly project. We can't feed in all of these files as context but we can add a summary of our whole project as context by opening Claude Code and running the command:
44
+
45
+
> /init
46
+
47
+
Claude Code will scan the whole project, write a summary, and then store that summary in a local CLAUDE.md file. Claude Code will read that file and add it to our prompt every time it's run within this project from now on.
44
48
45
-
To create your Checkly monitoring, you want Claude Code to create files and updates that make sense as a [Checkly construct](https://www.checklyhq.com/docs/cli/constructs-reference/). Let’s add [Checkly’s AI rules file](https://www.checklyhq.com/docs/ai//use-checkly-with-ai-ide/#claude-code) to our [CLAUDE.md](http://CLAUDE.md) context file:
49
+
Let's add a bit more to this context, we want test files that make sense as a [Checkly construct](https://www.checklyhq.com/docs/cli/constructs-reference/). Let’s add [Checkly’s AI rules file](https://www.checklyhq.com/docs/ai//use-checkly-with-ai-ide/#claude-code) to our [CLAUDE.md](http://CLAUDE.md) context file:
46
50
47
51
```bash
48
52
mkdir -p .claude &&
@@ -82,8 +86,6 @@ While we’re writing this simplest of monitors, it’s worth testing the limits
82
86
83
87

84
88
85
-
86
-
87
89
## Create Playwright Synthetics checks with Claude Code
88
90
89
91
It would be nice to have Claude Code automatically create the Playwright scripts we need to test our site's features. However, without careful controls, any 2025-era coding agent tends to write Playwright code that is either out of date or doesn’t follow best practices. The best way to get high-quality output is through some prompt engineering and careful provision of context.
@@ -125,7 +127,7 @@ and making sure the test passes.
125
127
126
128

127
129
128
-
*Like always with the `checkly test` command, this test isn’t running from my laptop but rather the real Checkly network!*
130
+
*Like always with the `checkly test` command, this test isn’t running from my laptop but rather Checkly's global monitoring infrastructure.*
129
131
130
132
Next we’ll want to create a `.check.ts` file for this browser check, which sets some check-specific settings and assigns the check’s logical ID.
131
133
@@ -224,9 +226,7 @@ Claude Code will confirm before creating the check and spec files with the confi
224
226
225
227
You can prompt for multiple checks at the same time, as the output is relatively token-efficient. As you can imagine, this unlocks the creation of a large number of synthetic monitors relatively quickly. Another use case that may be useful for larger projects, try prompting Claude Code with something like:
226
228
227
-
>
228
-
>
229
-
>
229
+
230
230
> update every `.check.ts` file for a check that touches [danube-web.shop](http://danube-web.shop/), and change
231
231
> the frequency to every 30 minutes.
232
232
>
@@ -268,7 +268,7 @@ If you’re having trouble reading the generated tests, take a look at [Checkly
268
268
269
269
## Deploy With the Checkly CLI
270
270
271
-
In our example, we want to create over 50 checks at once, so it’s worth checking whether the configuration is properly formatted before deployment. Many problems would have been revealed while running `test` but if, for example, the [logical IDs](https://www.checklyhq.com/docs/cli/constructs-reference/#synthetic-checks) of current and existing checks are colliding, we’ll need to run `deploy` to detect that. Run the `deploy` command with the `-p` preview flag:
271
+
In our example, we want to create several checks at once, so it’s worth checking whether the configuration is properly formatted before deployment. Many problems would have been revealed while running `test` but if, for example, the [logical IDs](https://www.checklyhq.com/docs/cli/constructs-reference/#synthetic-checks) of current and existing checks are colliding, we’ll need to run `deploy` to detect that. Run the `deploy` command with the `-p` preview flag:
272
272
273
273
```bash
274
274
npx checkly deploy -p
@@ -277,8 +277,7 @@ npx checkly deploy -p
277
277
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.
278
278
279
279

280
-
281
-
*We’ll get a long list of new checks that will be created.*
280
+
*An example screenshot of the preview generated by the `npx checkly deploy -p` command. Checks with new logical IDs are listed as created, existing checks are listed as 'Update and Unchanged' and any checks which used to be associated with this project and arent present in our folder will be deleted*
282
281
283
282
If you’re getting strange results from a preview of `deploy` and you’re not sure why, it might be time to get in touch with the Checkly team, [join our Slack](https://checklyhq.com/slack) for deployment advice!
284
283
@@ -301,4 +300,4 @@ To learn more about Checkly’s capabilities, explore these resources:
301
300
302
301
For more tutorials and advanced use cases, visit the [Checkly YouTube channel](https://www.youtube.com/@ChecklyHQ), where you can see great tutorials like this guide to the Playwright MCP server:
303
302
304
-
{{< youtube id="kzQu0Y_Nxjk" title="Generating Playwright Tests With AI: Let's Try the New Playwright MCP Server!">}}
303
+
{{< youtube id="MIlcVo1x3Is" title="Generating Playwright Tests With AI: Let's Try the New Playwright MCP Server!">}}
0 commit comments