Building with Claude on Google Cloud

1. SPSpeaker0:00

   [upbeat music]

2. SPSpeaker0:16

   Thank you. Thank you. Hello. Hello, everyone. Thank you for being here today. I was pretty excited to be on this stage and talking what you can do, uh, with, uh, Claude on, uh, on Google Cloud. So before to start, I would just want to ask you a very simple, uh, uh, questions. So how many of you used an AI coding tool this week? Raise your hand. The majority. Sounds good. Um, how many of you used the same coding tool to build and deploy something on Google Cloud? Raise your hand. Okay. Not that bad, but we can do better. And so the goal of this presentation is showing you how you can do better. But before to start, let me quickly set the stage. So at enterprise level, uh, when you start building and you want to ship a product or, or a new feature, you usually takes a team, a full team like this one. So in our case, let's assume that our team has a product manager that might have, uh, you know, an idea for a new services or a new futu- uh, feature. And then you have a UI/UX developer that start from that idea and try to render it, try to visualize it for the entire team. Of course, once the idea is visualized, then you need a software engineer that essentially build, uh, the core logic, the back end of, uh, of that idea, and everything that is needed to ship it. Of course, before you ship this, uh, idea, you want to be sure that you do it in a confidently. So you want to be sure that you ship it in a secure way, so you drag in, um, security engineer that will review your, your code. And once the, uh, new feature or, uh, the product, uh, get deployed, gets deployed, like, what you want to do is that you want to have, um, kind of a system that will allows you to collect how the user are using your, your new, uh, product or the feature itself to generate some insights that will allow the PM to improve the product, uh, itself. So this is kind of, uh, the team that you probably employ to, uh, build, um, a product or this new feature. But with respect to this team, Claude Code, uh, the Anthropic's, uh, coding agent, provides a set of capabilities that will essentially augment them, uh, across this entire, uh, software lifecycle. So today, what I'm gonna do, I'm gonna put on, uh, I'm gonna put on five different hats, and I will show you how you can leverage Claude run, uh, Claude models running on Google Cloud, uh, to build and deploy a simple, uh, feedback app, uh, that it will be used at the end of this, uh, session to provide me, uh, a feedback on, uh, my performance here on the stage. But before to start, let me to introduce myself. Uh, I'm Ivan Nardini. I'm a developer advocate at Google Cloud, and what I do every day, essentially, I build content, in this case, uh, in partnership with Anthropic, to enable you and developers in this room, uh, to build and deploy your own application, uh, using, uh, uh, Google Cloud itself. So with that being said, talking about building and deploying with Claude on Google Cloud, the first thing that you need to do probably is, um, uh, if you use Claude Code, is setting, uh, uh, the, the tool itself. So the setup, uh, how you can use Claude models with Claude Code, but, uh, with models also on Google Cloud, is pretty straightforward. So you have different way, uh, you have, uh, different methods, but the simplest one that you can get access to is, uh, the application default, uh, credential, which automatically find some credential, like the user credentials, uh, based on your environment. And then you have a wizard like the one that you see here, that will detect the project and the region, verify which models, which Claude models are available on your project, and they can be invoked, and, uh, let you pin them so you can use in your, uh, coding session. So at this point, like, probably most of you are familiar with this interface. So what, what are the advantages of using Claude model on Google Cloud? Well, the... We have a... There are many. Uh, and first of all, like, let me just, uh, list some of them. So first of all, if you use Claude models on Google Cloud, you pay per token. So you don't have, uh, you don't receive, um, any message, uh, per cap. And if you need some additional capacity to run this model because maybe you're building a production application, you can always get access to what is called, uh, provisioning throughput, which essentially provide you more capacity with respect to, uh, uh, models that we support. As I just said, setting, using, uh, Claude models on Google Cloud is pretty straightforward, so nothing change with respect to your environment. You don't need, uh, you know, some API key to store or rotate or anything of these things. Uh, you get access to, uh, models directly from your dedicated project where you can set your own policy, and the data that you use during your session, they remains in that project. And models are served, uh, in multi-regions. So they can be global, they can be, uh, multi-region endpoints for high availability. You can pick and choose depending on from, like, where you are developing. And last but not least, uh, talking about high availability, Google Cloud support high quality and availability service standards with respect in serving, you know, Claude models, um, making the platform itself, itself one of the best place where you can run Claude models or get access to Claude models, uh, in the market. So I hope these are some few re- reasons that convince you why to consider, um, of using Claude models on, on Google Cloud. But with that being said, let's start building what I just, uh, introduced you.So as I said, five different hats. The first one is the hats of the PM. So let's assume that you just join, uh, the company, and you have an... this idea for a new services. In our case, I said at the beginning, a feedback app, uh, that you want to build. So in the past, what you have to do probably is go into the UI/UX team asking, uh, for a, a prototype and just waiting. But now using, you know, co-code, what you can do, you can just draft a picture while you're drinking a coffee or a tea here in, uh, in London and, you know, ask Claude, uh, to render for it. So without further ado, let's see this in action. So here is our co-code. Uh, I just created a, a Claude MD where, uh, I pass some role, um, with respect to our PM. The goal is creating a fri- a wireframe for our UX, um, uh, UX, um, um, developer starting from, uh, a scratch. The scratch is that one. And as you can see, in few, like, second, it creates, uh, a prototype for it. And notice, this is a PM that probably doesn't know how to use Git, but because the way we define, you know, uh, our environment, we co-code, is also able to submit this wireframe that you see here on a GitHub repository, creating, uh, you know, uh, a PR. So this is, um, pretty simple, and in few minutes, like, you start, you move from, um, scratch on, um, uh, you know, uh, paper to a wireframe that now can be used from a UI/UX developer. Okay. So let's move on. I change hat. Now I am the UI/UX engineer. So the PM gives me the prototype, and, uh, from that one, what I want to do, I want to build a more solid interface for a production application. So in particular, in this case, we want to create four pages, uh, starting from the landing page to the tank, uh, to the tanking page. Plus, um, I'm going to create a dashboard view that I will show you later, um, to check the temperature of the room while the demo is gonna, is gonna run. So in this case, in order to build these, uh, f- uh, four pages, essentially, uh, I, I used one of the, um, like, uh, components that you can find in co-code, which is the planning mode. So probably some... most of you are familiar with it, but with the planning mode, Claude, um, like, this mode puts Claude, uh, in a, in a mode where, uh, it thinks and it propose before it start, uh, it starts coding. And, um, this is very important because it gives me some degree of freedom to decide, uh, what to build, uh, before, you know, uh, Cl- uh, Claude start, uh, start building based on my, uh, personal, uh, preference. So with that being said, let's jump in the second demo. So again, I have my, uh, Claude MD. In this case, as you can see, uh, I just provide him some description, and here I'm using the plan mode to convert the wireframe into a production interface. So what it does, it create a sort of a spec to create those pages. Of course, in the reality, probably you connect with Figma to collect some of this information. But then let's see that I'm good with that. I just tell him to start building. It build very quickly, and then, um, again, I will just, uh, uh, submit a new PR and push my code into, uh, the, uh, repository. So pretty simple. The only thing that change here, as you can see, as you saw, is that in this case it creates a plan. And this is, uh, like, the new kind of production-ready, uh, interface that it creates starting from the wireframe. So now we have, uh, the new PR in, uh, in our repo. I just, uh, look at it. It's a very simple one. We already saw the code. So I am the same person. I know what it did. I accept and merge. Okay. So let me go, uh, let me go on and, uh, change my hat again. So now I am the software engineer. So the front end is done. Now what we want to do is, uh, package the back end and, uh, deploy on Google Cloud. As I s- as we saw at the beginning, most of you, you don't know how to, uh, build and deploy an application on, uh, on the platform, on Google Cloud. But this is not a problem because in the last few months, Google Cloud spent a considerable amount of time to integrate with the, like, uh, um, open, um, um, by coding ecosystem that, uh, is fostering around, uh, around Claude. And, uh, we introduced two important things. One is the official Google Cloud skills, and the other one is the developer knowledge API with the associa- uh, with the associated MCP server. So with the developer knowledge API, what you get is essentially, um, uh, an MCP server that will allows Claude to access to fresh documentation and, uh, implementation, uh, guides, uh, that they get refreshed every twenty-four hours, that will essentially allow you and Claude to build some, uh, uh, architecture, let's say so, uh, in this case it's a simplified version of it, uh, like this one. So with, uh, with the developer knowledge API, you will be able to, uh, together with Claude, to say, "Okay, I can deploy the API on a serverless function, uh, on Cloud Run, then, um, I can attach a dedicated DB for website, uh, like, uh, file stores." And because, as I said at the beginning, we want to, uh, process the raw information that, uh, you provide with the feedback form in order to generate some insight and improve the application, I will also ingest the raw data in BigQuery, which is our, our analytical data warehouse, implementing a data pipeline that will essentially allow me to visualize the data in a tool like, uh, in a dashboard tool like Looker. So-This you will build just together with Claude that will, uh, read, you know, the documentation and will help you to figure it out what's the best implementation to deploy on, uh, on Google Cloud without kn- you knowing about Google Cloud itself. So once you have the overall picture, then you also want to know, okay, how do I deploy on Cloud Run? Or how do I read, uh, raw records from Firestore to BigQuery? So the implementation itself, you can leverage, uh, uh, the Google Cloud skills that we already... that we launched recently. So you will be, at the end, not only able to build an architecture like this one, but also, like, deploying it, uh, actually deploying it on, uh, Google Cloud. So with that being said, uh, let's see, uh, this in action as well. Before to do that, I just want to highlight that in this case, to build, uh, you know, the components of that architecture, I will use, uh, another components of Cloud Code, which is represented by the subagents. In this way, I can parallelize task, simulating like a team sprint, and I will have one son agent, uh, one subagent for the API, one for the, um, the data pipeline in BigQuery, and the other one for the dashboard. Okay. So with that being said, let's jump in the demo. Okay. So in this case, first of all, I want to show you that I connect Claude with the MCP server for the documentation, and I have some dedicated skills. In this case, the first thing that I will do, I will ask to design the architecture and, uh, the spec of the API using, uh, the MCP server and the skills itself. So as you can see, it's querying the MCP server with a specific, uh, asking for some, uh, specific information, and, uh, based on what he retrieves from the documentation, it builds the architecture. Then use the skills to create the spec for the API. So in this case, it's a very simple one. Uh, as you can see, it has, uh, different pages, different paths, um, and, um, it provides you a very detailed description on, uh, uh, the API itself. So we accept it. We have the architecture, and we have the specification for the API. The next step is parallelizing with the subagents and build, uh, the entire system. So as you can see, I'm using different models and different subagents. Uh, it, it's pretty quick, and, uh, it will also test the code at the end once it implemented the app, as you can see here. So it runs a test, and, uh, once, uh, once it finish to run the test, it will also bry... It will also use an additional skills, which is the one, uh, uh, that I was describing before, to, uh, build all the components that are needed to deploy the application on Google Cloud. So in this case, it will build a CI/CD pipeline using, uh, two of the products that we have on Google Cloud. One is Cloud Build for the CI and the Cloud Deploy for, uh, uh, the deployment for the CD. So once, uh, once, uh, uh, it finish, again, it creates a, a PR, and it pushed the PR on GitHub. In this case, because we build, uh, those, uh, CI/CD pipelines, the entire process, what it will, uh, what it will do, it will trigger, um, uh, a workflow after you merge it. And, uh, the workflow essentially will be a pipeline, a, a building pipeline on, uh, Google Cloud. So here you can see all the steps, uh, for the API, for the dashboard. And the last step is, uh, related to the release. So once this pipeline finish to run, it will push a new release on the, uh, continuous deployment tool, and the continuous deployment tool, it will trigger a release, uh, as you can imagine. And in this case, because we are still developing, it will, uh, deploy the application in a, a development, uh, environment without, of course, uh, requiring, uh, any promotion for now because we are still in the, uh, in the, in dev environment. And this is kind of, uh, like this is the application running on the serverless function that I was saying at the beginning, and this is the same like, uh, uh, UI that I was showing you, uh, before. So far so good. So now we have our, uh, application deployed, so at this point the, the code is in, um, in the development environment. But as I said, before to move to production, we want to be confident about the code itself. We want to run a security review. Now, there are many ways where... how you can run the security review using Cloud Code. In this case, we created a custom, uh, plugin, and that's because in a real world, probably like your company has different security review, like, uh, requirements. So it might want to check for, you know, the top ten issue when you deploy an application or if the application has something that is invalid. In the case when you deploy this kind of application in clouds, you want to check things like the security, the service account in order to limit, uh, you know, the permission that, uh, or the services that the application can get access to in order to avoid any expected situation. But as you can imagine, like, this is just a possible, uh, scenario. So in this case, we are gonna use the review to check if there is some, uh, input, uh, validation, uh, to, to run some, uh, input validation, and then, um, it will also modify the permission related to the service account, and it will deploy, uh, the application, in this case, in production. So let's see, uh, this in action as well. Okay. So as you can see, I defined, uh, the plugin, and I provide some, uh, prompt, uh, to describe what it has to do. So it will start checking for the permissions.And, uh, also to check for the implementing the input validation that we were saying. It will figure it out there is something wrong, so it will change, uh, the code in a couple of, uh, yeah, couple of seconds, as you can see here. Um, and, uh, this will essentially fix, uh, the application. It will also run, uh, an additional test, and this is, uh, ex-exactly as we did before, so that's why it's so fast. It will open a new PR, and, uh, it will push the code in the, uh, in our repository. But in this case, because we... like, the code passed the review, it will not only, like, we will build and we will, uh, trigger a new release, but when, uh, the new release will go to our, uh, continuous deployment product, which is, uh, Cloud Deploy, once it gets deployed in, uh, in the developer, uh, in the develop, development environment, we can also, um, like, review, uh, the application one, uh, one time more, and, uh, finally promote and approve it to be shipped into, uh, production. And this is something that you can quickly do using the capabilities of, uh, of the product itself, of, uh, Cloud Deploy. So once you get the application in production, the result is exactly the same as I was showing you before. But again, as you can see, with the Claude Code, you started from, like, a prototype, and you were able to deploy with respect also, you know, on the development, production kind of setting, um, your application, uh, on, on Google Cloud. So at this point, we deploy the application. The last thing that I want to do is that I want to start, uh, collecting some metrics on how you are using the application. So for example, how long it's taking you to provide me a feedback using this application, because if it takes too long, maybe it means that, uh, my UI experience is not the best, and I can improve it, right? So what we want to do is that we want to run some analytics based on the input that I receive, uh, from you. And again, as you probably don't know how to deploy an application on Google Cloud, you probably don't know how to run analytics on Google Cloud. You don't know, like, uh, ana- the analytical data warehousing on Google Cloud, which is BigQuery, as well as you don't know the dashboard tool. And so this is, again, not a problem, because as part of that integration that I mentioned before, we also, on Google Cloud, we also have now official MCP server that will allows you to essentially run analytics in, uh, BigQuery, as well as building an entire dashboard on the fly. And just to give you an idea of how powerful, like, these MCP server are, uh, let me quickly show you the last demo. So this is our, uh, application that we just deployed. And just to give an idea, this is the live dashboard, uh, that, um, I built also at the beginning. I integrated Claude to summarize some feedback. But this dashboard is more for, for us, right? Like, uh, you cannot give that dashboard to, you know, a PM, essentially. And that's why you want to build some proper analytics. So the raw data are stored in BigQuery, and you can use the BigQuery MCP server to analyze those data that I was showing you and, um, uh, generate some, uh, uh, statistics around it. Now, these statistics are still in the terminal, and probably the PM, they don't w- they don't like this. They want to present some numbers, whatever. So what you can do is that you can use the second MCP server that it will, uh, use those numbers to create a dashboard in the Google Cloud dashboard tool, which is Looker. And at the end of the day, thanks to this interaction, you will get just one link, and this is the dashboard that tells us, for example, how long it takes you to provide a, a session, uh, and, uh, also compare different, uh, probabilistic distribution. So this is a better output that you can present in order to, you know, discuss and improve, uh, how, and how, like, discuss on, uh, how you can improve, uh, the app itself. And again, even if you don't know, like, a dashboard tool, you were able to build this using, uh, Claude Code and, uh, the MCP server that we provide. Okay, so this was my last, uh, demo, so let's wrap up, uh, the session. At this point, what I tried to demonstrate today, so essentially two things. One, on the Claude Code side, like, you can use land mode, subagents, MCP, skills, uh, plugins in order to, you know, prototype application like the one that, uh, uh, I show you today and deploy them, uh, on, uh, on Google Cloud. And on the Google Cloud side, apart from hosting the application itself, you can, uh, you can leverage, you can get access to Claude models in a way that, as you saw, makes your coding, uh, essentially frictionless, uh, for the entire session. So if you want to learn more on, uh, how, you know, you can build more complex application rather than a feedback one that I show you today, please check out the repo, the quick start, and the documentation that we are going to share, uh, at the end of the session. And I hope I cover everything, but for now, thank you so much for being here, and, uh, enjoy the rest of the event. [audience applauding] [gentle music]

Episode duration: 24:37