Loading video player...
Welcome to the Agentverse Champions. In
this series, we're assembling a team of
specialists. A developer, a data
engineer, a platform engineer, and an
architect. Each of you will embark on
your own quest, mastering unique tools
and skills. But in the end, we must all
unite to defeat the final boss, aka
build and deploy a powerful, secure, and
intelligent application. Today's mission
is for the developers, the shadow blade.
You'll master the art of vibe coding,
transforming your intent directly into
functional applications using the Gemini
CLI. We'll start by vibe coding a
personal profile website from scratch.
Then we'll expand our arsenal by
connecting the CLI to our tools, giving
it access to manage our Git code
repositories and generate an AI profile
image for our website using MCP servers.
After that, we'll assemble our agent and
establish guardrails using the agent
development kit to ensure that our agent
maintains discipline and quality with
context engineering. And finally, we'll
build a CI pipeline to automatically
test with agent evaluation. And then
we'll build and deploy our battle ready
agent to cloud run. I won't be showing
every single step. So if you want to
complete this fully, the lab is linked
in the description. Are you ready to
forge your makaker mark shadow blade?
Let's begin. With our training ground
prepared, it's time to master our
primary weapon, the Gemini CLI. We'll do
this in the cloud shell editor. This
gives us a full IDE experience which is
perfect for vibe coding. Gemini CLI is
more than a tool. It's an extension of
your will. This is where we practice the
art of vibe coding. You can think of it
as an AI assistant that brings the power
of the Gemini AI models directly into
your terminal using natural language
prompts. Let's summon the Gemini CLI for
the first time. The yellow flag is
important. It's the way of saying go
ahead and execute on my behalf without
asking for confirmation. This lets
Gemini know that it can trust the vibe
coding instincts. This is great for a
lab or a non-production environment.
Otherwise, use caution when implementing
the yellow flag. A developer is
recognized not just by their weapon, but
by their signature style, their
makaker's mark. Our mark will be our
digital presence, a personal profile
website. With a single powerful command,
we'll instruct Gemini to forge the
foundation of our digital identity, all
in natural language.
Observe. Gemini understands our intent.
It calculates the sequence of actions.
First, it'll create an index.html file
for the structure and then a styles.css
CSS file for the futuristic theme. It's
creating the code for us based on our
vibe.
The files are created. Now, let's bring
our creation to life. Again, in natural
language, we'll start a simple web
server using Python, and it'll start the
app locally in our environment.
Now, to gaze upon our work, we'll use
the web preview feature and make sure to
change the port to 8000 because that's
where our app is running. So, let's
check it out. There it is, our makaker
mark, a sleek dark themed profile for
the shadow blade. This is where you can
play around and change it up. Change the
theme, change the colors, give Gemini
instructions based on your vibe. That
was fun, right? until it stops working
exactly how you want. So to avoid losing
our progress or making a mistake that we
can't undo, we want to start
implementing version controls so we can
revert to specific moments when the AI
inevitably starts misbehaving. We'll use
a local Git T server for this. Let's
stop our website and spin up that local
Git source control environment.
This environment will be connected to
our Gemini CLI via a new tool, an MCP
server. MCP stands for model context
protocol. Think of an MCP server as a
specialized portal that allows your AI
agent to interact with external tools
and services. By connecting to these MCP
portals, you grant the ability to
perform tangible actions like managing
files, querying databases, and
generating images. So, while my Git T
server is spinning up, an MCP server
will also be spun up.
Looks like it's done. Let's check if
it's running with our web preview again.
This time, port 3005.
There's our Git server. Let's sign in to
explore it and then we can start setting
up our source control. But first, we
have to connect our Gemini CLI to our
Git T server. So, let's go ahead and run
the code. That's going to do that.
This is going to inscribe the location
of our server into the settings.json
file. This file is the CLI's central
configuration, telling it what external
tools or arsenals it has access to. In
this case, we're telling it the Gy
Arsenal is active and ready for your
commands. Now that it's connected, let's
reopen the Gemini CLI to make sure that
it's available.
Boom. There we go. Our gy server is
connected and all of the available tools
at our disposal are also shown. Let's go
ahead and commit our code to a
repository so that we have it saved.
First, we need to create the repository
shadowblade profile
and then we'll ask Gemini CLI to commit
it for us. It'll push the two files from
our website upstream and save them into
git. There they are.
All right. Now, let's go back to our
website. What do you think? It feels a
little empty. No, you're right. The
profile picture is missing. Wow, great
eye. Let's go ahead and fix that. First,
let's log this issue in our gy so we can
track our changes. The best part is that
we don't have to log this issue
ourselves. Once again, Gemini CLI to the
rescue. It's a single interface for
coding, so you don't have to switch
between tools.
There it is in my gy under issues. And
it even described the problem for me,
saying there's a placeholder currently
there.
Now, to forge our missing picture, we
have to summon a different kind of
power, an image creation model from
Vert.Ex AI. Imagine. We'll install the
portal server and then select imagine.
Of course, we need a sacred vessel to
hold our image. So, we'll create a
sacred bucket to store it in. Next,
we'll connect this imagine model to our
Gemini CLI via another MCP server, the
same way that we connected our git team.
And I can double check this by doing
catgeemini/
settings.json and see that I have two
MCP servers there. Now,
now we can command our new tool to
generate a portrait of a shadow blade
with a pixel art style. The model's
going to generate the image and place it
into our sacred bucket.
And now we can ask it to use this newly
forged picture.
So, I can say modify the index.html file
and use the image we just generated to
add my profile picture.
Let's check the website again. Remember
to start it up. There it is. Perfect.
Now, our website feels complete. And of
course, a true master verifies their
work. Let's secure our creation by
committing the files to our gy
repository.
If we refresh our repo, we can see the
index.html html and style CSS files are
now safely archived. Our work is secure
and our issue is closed.
So there we go. We completed the first
part of our mission. Next up, we'll
build our agent. But first, let's talk
about something. Come here. Vibe coding
is all fun and games until the vibes are
off. An LLM might get a little too
creative. Modify three files instead of
one, and a blade without discipline is a
danger. So before we build our agent, we
need to give it guardrails. This is
called context engineering. Giving
instructions to the LLM at different
levels to optimize the output. We can do
it at a system level with instructions
or prompts, at a short-term memory level
with our conversation history or design
documents, and then in long-term memory,
think policies, style guides, and
guardrails. So let's do that. First,
we'll retrieve the agentesign.mmd file
from the agentverse. The goal of this
document is to enforce clarity on goals
and technical implementation before
significant development effort is
invested like a blueprint. Then we'll
create a gemini.md file in our project's
root directory. This file acts as a
rulebook, a long-term memory, a set of
coding guidelines that the agent will
always follow. We're providing a set of
Python best practices covering
everything from type hinting and dock
strings to naming conventions and
dependency management. Now when the
Gemini CLI is summoned, it automatically
searches for this file and loads its
contents into its working memory. It
becomes a persistent project level
instruction. Finally, we can create our
agent.
And we'll use a single command that
incorporates our new guardrails to do
so.
But keep in mind, we are vibe coding, so
it could take a few rounds of prompting
to get that command right. There we go.
Just like that, our agent's core logic
is in place. And as we can see, there's
a tools parameter. The agent is designed
to use an MCP tool set that connects to
an external arsenal defined in MCPs
server.py.
This file is our agent's own custom MCP
server where we define tools and expose
them using ADK's MCP tool decorator on
the functions so our agent can connect
to and use them.
Let's see what tools we have available.
It's looking a little bare. So, let's
ask Gemini CLI to add seven new weapons
to our agents arsenal.
There we go. Now, we're properly armed.
Make sure to check the code to confirm
that the seven new MCP tool functions
have been successfully added and that
they look right.
Now we'll start building our CI
continuous integration pipeline which
automates the process of testing and
building our code. ADK eval will run our
agent against a golden data set of
challenges with some additional
generated synthetic data to see if it
responds correctly. It's designed to run
an agent against a whole set of
predefined test cases that represents
the agents expected missions. This data
set is defined in an eval set JSON file
that acts as the blueprint for the
entire gauntlet. Then the test
config.json file tells ADK how to judge
your agents performance. Most
importantly, it checks to see if the
agent is using the right tools. Let's
see if our agent passes.
Nice. It did. Now, ADK eval is great for
a manual check, but we want something we
can easily add into an automated CI
pipeline.
So, we'll use Piest to automate an
evaluation and check if the agents
output indicates that our logic is
correct. This time, we'll ask the Gemini
CLI to automate what we just did
manually. And that way, every time a
change is made, it goes through our
tests. It'll create a test file. And we
can see this uses the same agent
evaluator library as our ADK eval
command.
And now we can run the test against the
eval set JSON file.
The evaluation passes. Yay. Our agents
logic is sound. It is proven that it can
choose the right tools. Let's move on to
finalizing our CI pipeline. Again, we'll
summon our awesome weapon, the Gemini
CLI, to write a Cloud Build.yamel file
for us. This file will tell Cloud Build
to run the PI test script that we just
made and then if the test passes, build
our agent into a Docker container and
save it to artifact registry. Then our
next command kicks it off.
and we can watch its progress right in
the cloud console.
With our agent forged and tested, the
final step is deployment. We'll take
that container from the artifact
registry and deploy it to Cloud Run, our
serverless platform, making our agent a
live public service. And with that, your
mission as a developer is complete.
You've vibecoded an application,
integrated it with external tools,
enforced quality with guardrails, and
deployed it to the cloud. Go ahead and
test your knowledge of building this
agent with the boss fight. You've taken
your first step as a developer in the
agentverse. You've mastered your primary
weapon, the Gemini CLI, and forged your
digital identity, crafted an agent with
guard rails through context engineering,
evaluated your agent, and automated a CI
pipeline for that agent. But remember,
this is just the beginning. The other
champions await. I encourage you to
explore the other paths and see how your
skills as a developer connect with the
data engineer, the platform engineer,
and the architect. Together, you're
unstoppable. to try this lab yourself.
And for additional resources, like a
more detailed blog post and a
step-by-step video, follow the links in
the description. Shadowblade salute.
[music]
>> [music]
[music]
Agentverse - The Shadowblade's Codex → https://goo.gle/49izfAR Join the Agentverse and master Gemini CLI for AI powered app creation! 🚀 This video demonstrates vibecoding an app from scratch, incorporating version control with Gitea, generating AI images with Imagen, exploring context engineering, and setting up an automated CI pipeline for testing and deployment. Discover how these tools enhance your ability to build powerful, secure, and intelligent applications. Subscribe to Google Cloud Tech → https://goo.gle/GoogleCloudTech #GoogleCloud #AIAgents #ADK #GeminiCLI Speakers: Debi Cabrera Products Mentioned: Agent Development Kit, Gemini CLI, Vertex AI