Skip to content
This repository was archived by the owner on Jan 5, 2026. It is now read-only.

Commit be0d5ae

Browse files
polish and rewrites
1 parent c46b62e commit be0d5ae

3 files changed

Lines changed: 12 additions & 13 deletions

File tree

-201 KB
Loading
-159 KB
Loading

site/content/guides/claude-code-monitoring.md

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -30,19 +30,23 @@ You’ll be prompted to sign in to or sign up for an Anthropic account.
3030

3131
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).
3232

33-
Optionally, from the Claude Code prompt, run `/init` to scan your project and create an initial `CLAUDE.md` context file.
34-
3533
### Add the Playwright MCP
3634

3735
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
3836

3937
```bash
4038
claude mcp add playwright npx @playwright/mcp@latest
4139
```
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.
4241

4342
## 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.
4448

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:
4650

4751
```bash
4852
mkdir -p .claude &&
@@ -82,8 +86,6 @@ While we’re writing this simplest of monitors, it’s worth testing the limits
8286

8387
![Feedback on the terminal](/guides/images/claude-monitoring-01.png)
8488

85-
86-
8789
## Create Playwright Synthetics checks with Claude Code
8890

8991
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.
125127

126128
![Feedback on the terminal](/guides/images/claude-monitoring-02.png)
127129

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.*
129131

130132
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.
131133

@@ -224,9 +226,7 @@ Claude Code will confirm before creating the check and spec files with the confi
224226

225227
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:
226228

227-
>
228-
>
229-
>
229+
230230
> update every `.check.ts` file for a check that touches [danube-web.shop](http://danube-web.shop/), and change
231231
> the frequency to every 30 minutes.
232232
>
@@ -268,7 +268,7 @@ If you’re having trouble reading the generated tests, take a look at [Checkly
268268
269269
## Deploy With the Checkly CLI
270270
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:
272272
273273
```bash
274274
npx checkly deploy -p
@@ -277,8 +277,7 @@ npx checkly deploy -p
277277
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.
278278
279279
![Feedback on the terminal](/guides/images/claude-monitoring-05.png)
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*
282281
283282
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!
284283
@@ -301,4 +300,4 @@ To learn more about Checkly’s capabilities, explore these resources:
301300
302301
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:
303302
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

Comments
 (0)