Build Custom Playwright Agents via VS Code ChatModes
Key Points
- You can create custom Playwright agents (planner, generator, healer) by writing well‑crafted prompts that guide a large language model to plan, generate, or heal test cases.
- These agents are stored as simple markdown files in the GitHub Copilot “chat‑modes” folder, so you can edit or add new agents directly in VS Code.
- VS Code’s built‑in chat modes (ask, edit, agent) let you tailor AI behavior for specific tasks, and the custom agent format follows the open‑source agents.md specification.
- The agents.md format is widely adopted by major tools and companies—including Codex, Zed, Jules, VS Code, GitHub Copilot, and Cursor—making it a standard for building coding agents.
- For more details and examples, consult the “use chat modes” documentation, search for “chat mode GitHub Copilot,” or visit the agentsmd.net website.
Sections
- Building Custom Copilot Chat Agents - The speaker explains how to locate the GitHub Copilot chat‑modes folder and edit its prompt files to create personalized Playwright agents (planner, generator, healer) that can be used directly within VS Code.
- Playwright Agent for Automated CI/CD - The speaker outlines how a Playwright‑based agent, defined in a markdown file and added to a GitHub repo, can automate business writing, CI/CD pipeline generation, unit‑test creation, and UI/UX design tasks.
- GitHub Actions Workflow Generator Agent - The speaker demonstrates an AI agent designed to act as a CI/CD architect, automatically analyzing a project's technology stack and producing a customized GitHub Actions workflow file with appropriate push and pull‑request triggers.
- Prompt‑Driven Agent Generates Deployment Configs - The speaker demonstrates how a conversational AI agent automatically creates environment‑specific CI/CD YAML files (including Docker and Docker‑Compose configurations) solely from prompts, highlighting the ability for engineers to deploy specialized automation without writing any code.
Full Transcript
# Build Custom Playwright Agents via VS Code ChatModes **Source:** [https://www.youtube.com/watch?v=XoLH00AJnX4](https://www.youtube.com/watch?v=XoLH00AJnX4) **Duration:** 00:13:50 ## Summary - You can create custom Playwright agents (planner, generator, healer) by writing well‑crafted prompts that guide a large language model to plan, generate, or heal test cases. - These agents are stored as simple markdown files in the GitHub Copilot “chat‑modes” folder, so you can edit or add new agents directly in VS Code. - VS Code’s built‑in chat modes (ask, edit, agent) let you tailor AI behavior for specific tasks, and the custom agent format follows the open‑source agents.md specification. - The agents.md format is widely adopted by major tools and companies—including Codex, Zed, Jules, VS Code, GitHub Copilot, and Cursor—making it a standard for building coding agents. - For more details and examples, consult the “use chat modes” documentation, search for “chat mode GitHub Copilot,” or visit the agentsmd.net website. ## Sections - [00:00:00](https://www.youtube.com/watch?v=XoLH00AJnX4&t=0s) **Building Custom Copilot Chat Agents** - The speaker explains how to locate the GitHub Copilot chat‑modes folder and edit its prompt files to create personalized Playwright agents (planner, generator, healer) that can be used directly within VS Code. - [00:03:18](https://www.youtube.com/watch?v=XoLH00AJnX4&t=198s) **Playwright Agent for Automated CI/CD** - The speaker outlines how a Playwright‑based agent, defined in a markdown file and added to a GitHub repo, can automate business writing, CI/CD pipeline generation, unit‑test creation, and UI/UX design tasks. - [00:07:32](https://www.youtube.com/watch?v=XoLH00AJnX4&t=452s) **GitHub Actions Workflow Generator Agent** - The speaker demonstrates an AI agent designed to act as a CI/CD architect, automatically analyzing a project's technology stack and producing a customized GitHub Actions workflow file with appropriate push and pull‑request triggers. - [00:11:08](https://www.youtube.com/watch?v=XoLH00AJnX4&t=668s) **Prompt‑Driven Agent Generates Deployment Configs** - The speaker demonstrates how a conversational AI agent automatically creates environment‑specific CI/CD YAML files (including Docker and Docker‑Compose configurations) solely from prompts, highlighting the ability for engineers to deploy specialized automation without writing any code. ## Full Transcript
Hi guys, welcome back and today in this
we'll be talking about how you can build
your own custom agents like playright
agent for that matter. If you remember
playright released this new agents
called as planner agent, generator agent
and healer agent and we also discussed
how you can use these agents to perform
the planning operation generation of
your test cases and also healing of your
existing test cases that you have got.
So that is what we discussed earlier and
we also saw that the planner agent or
generator and the healer agent are
nothing but a bunch of uh the commands
or the prompts that is used to perform
the operation like a uh completely
well-written prompts so that your large
language model can understand and
perform any operation and we also saw
that the moment you have these chat
modes agents or specialized agents sits
uh in this particular GitHub chat modes
folder you can also see them uh sitting
in your agents over here which is
something very neat because now you get
the entire context to your large
language model but where exactly you can
do all of these by yourself because it's
just a file right so just go and search
in Google on the chat modes for uh the
GitHub copilot so let's go and search
for chat mode uh GitHub uh copilot over
here you will notice that there is
something called as use chat modes in VS
code so this particular operation it
says that chat modes are a way to create
specialized AI agents that enables you
to tailor the chat behavior in Visual
Studio Code for specific task or roles
and VS code comes with three built-in
chat modes ask, edit and agent which is
nothing but these agent that you are
seeing over here. This is already a
specialized agent which is built by
Microsoft in the copilot and that's
exactly what you are building over here
for playright as well as you can see
over here. So essentially if you follow
along this particular documentation you
can see that it's nothing but just an MD
file with a bunch of markdown syntaxes
that you need to follow and then you can
have your own custom agents and guess
what all these operations are done using
the syntax from agents.md
and I have also told about the same in
my earlier video where I was talking
about how this entire agent systems work
and this exactly what it is. So
agents.md is a simple open format for
guiding coding agents used by over
20,000 open-source projects. And if you
just scroll down a bit, you'll wonder
that how many big companies are really
using this particular agents. MD almost
like all the big companies that you can
name in like Codex Zed or Jules or VS
Code, GitHub Copilot, Cursor like all
the big companies are using the same
format. And if you want to go a level
further, there is also a website called
as the uh agentsmd.net.
And this is the place where you can find
even more details. So these are the
agents MD guide for the OpenAI codeex as
you can see over here. So you can see
like how the codeex is using the OpenAI
codeex is using to create an uh agents.m
MD file. And if you want to uh create a
sample MD file or want to view the
example MD files, you can go and click
this browse examples over here where you
can see that there are uh like 14
examples of the MD or agent MD files
that you can create and have a visual.
So see this this is a playright end
toend testing automation guide. So if
we're going to go and click this
particular MD file, you will notice that
how this MD file is been structured over
here. So you can just copy this and
paste it into your github/ uh chat mode
and then playright agent MD file
something like that then it is going to
do an do all the operation which you can
actually do it from the playrights
agents as well. So as I told you you can
create your own agent using just
following few patterns and I have
already created a simple very very
simple example of a uh agent over here
where you can see that I have created an
agent for the business operation. So you
can use this for business writing and
scaffoldings and stuff. You can also
create an agent for the CI/CD
operations. But let's say you have got a
code which you need to deploy in CI/CD
pipeline and you want to write a bunch
of uh uh the actions for your GitHub
then you can just use this agent to
write that for you immediately. And
similarly if you want to use the agent
for the development unit test
generations development healing of the
existing code and planning of your
development unit test you can also do
that and similarly you can also do for
the testing operation and the UIUX
designing if you want if you have any.
So all of these operations are going to
be done by using this agent deployer and
I've done a simple uh JavaScript file
which can do all these operation for
you. Just to show you in action like how
this thing works. So let's say I have
got this particular uh application uh in
my machine or my project and I wanted to
use this particular uh agent deployer
for that matter. So all I have to do it
is just use npx and then uh copilot
setup over here and you can use multiple
flags over here. So let's say I'm going
to use the flag for testing over here.
And if I hit enter, you will notice that
it is going to show me that uh these are
the operations available like all
development testing uh over here. So you
basically need to use two slashes. So
immediately if you are going to enter
something wrong, it's going to show you
that particular operation or action over
there. And I'm just going to give the
command as hyphen testing. And if I hit
enter, you will notice that it is going
to add a GitHub. And there is a tester.
Chat mode. And guess what? This
particular chat mode is going to be
added for you over here. So instant and
so immediate, right? And let's say you
want to clear this particular screen.
And if you want to add a few more u
agents for your testing purpose or
development purpose for that matter. So
you just say uh development over here.
And if you hit enter, it is going to add
the development chat mode as well. And
you're going to get three more agents
over here. And if you're going to be
adding few more, maybe just say all over
here. You are going to get all the chat
modes immediately. And now your project
has got all the chat modes which is
required for your development, testing
like business operation, CI/CD,
pipelines and UIUX design. So you can
create these agent exclusively for any
specific operations and you have
everything there. This is the very very
neat way of how you can actually create
all these agents for a specific
operation. And this way you create your
own agents like maybe custom agents for
your testing development CI/CD pipeline
and business operations and even
anything that you can just think of. So
this is the way that you can create your
own specialized agent for a specific
purpose so much easily and this gives an
entire context for your MCP servers for
that matter because you can specify the
tools that is required for the uh the
agents to be used and also it gives a
context to your large language models
for example the cloud sonnet 4.5 or the
gro models or any model that you are
really using these informations are
going to be very helpful for these model
to work because they are using a
standard which the large language model
can easily understand. Well, as that
said, let's see how we can start using
these custom specialized agent within
our code and see how it can uh really
power our uh our applications as well as
how it can help us do a lot of different
operation with just one single command.
So, you can see that this is one of the
agent that I'm going to be showing in
this particular demonstration which I
have built over here. Well, this agent
what it does is like this is an agent
which is going to create a GitHub action
workflow for CI/CD pipeline. So, this is
very exclusively for the GitHub action
workflow, not for the Azure workflow
file that you're going to be creating,
but this is just specific for the GitHub
action workflow. And you see that these
are the tools which this particular
agent is going to be using. And I'm also
saying that you are a CI/CD pipeline
architect, an expert in creating robust
GitHub action workflows for continuous
integration and deployment. and your
mission is to analyze the project,
generate an optimized GitHub action
workflow file tailored to specific
technology stack and deployment
requirement. For example, if you are
using a Java application and if you're
trying to create a CI/CD pipeline
workflow for GitHub actions, then it is
going to be creating or generating the
workflow based on the Java project. If
you're using the NET project or NodeJS
or Python or Golang project. It is going
to be different workflow for all of
these projects. That is the way that
it's built. This particular agent is
being built. And you see that this is
the workflow that I'm going to be
specifying over here. And this is the
workflow design that I want to create.
And I'm also told to create the triggers
for the pushpull request and also for
the multi-environment support like
development, staging and production. and
also do a matrix build for the multiple
versions and platform and all these
scannings and uh dependabot you need to
add as well and I've set almost
everything which is required for my
particular project and I've also given
an example like how it has to be done
and once I have all of these now what is
going to happen if I'm going to use this
particular agent you will see that all
the magic is going to come up with this
particular agent so for demonstrating
this particular operation I'm going to
take a real application this time and
the application is nothing but a uh
application that I was actually showing
you for the playright test earlier. So
what I'm going to do this time over here
is I'm going to install the CI/CD
operation or CI/CD uh specialized agent
this time. And the moment I run this and
install it, you will notice that there
is going to be this guy over here, the
CI/CD chat mode. MD file. And now I'm
going to use this agent to go and
generate the workflow file for me. And
this is a net-based application as you
can see over here. And I wanted to
create the workflow uh file for the YAML
uh of the GitHub action just for the EA
web app this time. So what I'm going to
do is I'm going to say generate the um
the workflow for me and I'm going to go
and choose the file which is the EA web
app over here. And do not forget that
the agent that you're going to be
working with is the CI/CD specialized
agent, not the normal agent which come
up with a uh GitHub copilot. Right? And
now this is the only command that I have
gave. And the moment I hit enter, you'll
notice that because this particular uh
agent has got the complete understanding
of uh the toolings and it can also go
and read the project structure for me
because we have given the tooling
support over here that it can do. And
now you can see that it is going to go
and uh start analyzing the project and
then uh it is going to start creating
the workflow file for me. So I'm just
going to wait for the workflow file to
be created. And you'll also notice that
it's creating workflow for multiple
workflow for different purposes. So
we'll just wait and see what's going to
happen.
And you'll notice that it has created
the uh ci.yamel file,
deployment.production.yamel
file, deployment.staging
and everything over here. Look at that.
See, so this is the power of this
particular uh agent that we have got. It
is going to immediately do everything
for you because it also knows that our
application has got a docker file as
well as a docker compose file. So based
on that knowledge, it is building things
for me over here. And you see that we
have got the different YAML files for
different environments which is quite
amazing and quite neat. So this is
something that I feel like these kinds
of agents are going to be doing and I'm
also telling you that because we have
got this kind of specialized power by
just giving the prompts instead of
writing codes for an agent and now this
is going to open a whole lot of uh
opportunity for any person to go and
start creating agent without writing
even a single line of code just prompts
and they can start using it with the
power of this chat mode because now you
have got everything as like a one single
template. So any organization who is
going to let the engineers to start
using these kinds of agent which is very
restrictive with a specific MCP tool
they wanted to use and also a specific
operation they need to perform then they
can create these kind of specialized
agent and distribute among the engineers
and they can start working it as well.
This is quite powerful to be honest and
this is something I really feel like one
of the most powerful feature that
Microsoft has released as a part of
their visual studio code and this is
going to be very very helpful while
you're going to be working with a
nontechnical person as well because you
are going to have or give them an agent.
They're just going to use the agent as
if like they are using the ask agent or
edit mode and they're going to get all
the benefits immediately with just one
single prompt like generate workflow for
me and it's going to do everything for
me. That is the power guys. These are
the powerful uh way of how we can create
the custom agents with the power of the
chat modes uh available in Visual Studio
Code. That's it guys. This is all about
the way that you can create custom chat
modes yourself like how playright did
using the playright agents. And I hope
you really like this particular video.
Just let me know your thoughts about all
these discussion that we just did over
here and also how you have used these
custom specialized agent within your
organization and if you're planning to
build one, what will be your use case?
Let me know all the details in the
comments below. We'll discuss about it
if something very interesting comes up.
Once again, thank you so much for
watching this video. Catch you in the
next one.
[Music]