Sign in to continue learning
Gemini CLI: Code & Create with an Open-Source Agent
Beginner
1h13m
Topics
AI Coding
Task Automation
MCP lets you connect Gemini CLI to your favorite external tools and services. From Canva to databases. In this lesson, you'll learn how to access remote servers, using brand materials to generate a web page. Let's code. Model Context Protocol or MCP is an open standard enabling AI agents to seamlessly and securely connect with external tools, APIs, and data sources. MCP gives a standard of how LLMs or large language models interact with data and context. Let's take MongoDB as an example. We have information stored in a MongoDB database, and they have an MCP server. We can use that MCP server within Gemini CLI to get access to all of the data, list the tables, fetch the data, do reads and writes to our actual database through this standard protocol. And it's not locked into just Gemini CLI. If we decide to move our application or use a different agent, we can still use those exact same tools because we've used MCP. This is valuable because MCP lets you build on top of the built-in capabilities of Gemini CLI. extending the tools and commands you have access to. You can go ahead and use MCP to connect to Google Cloud, to GitHub, to Snyk. You can even build your own MCP server that runs your own code. Any of the popular cloud services that you use in your day-to-day tasks are probably available as MCP servers. Before we connect our first MCP server to Gemini CLI, Let's take a look at our website and see how it's structured. We can use Gemini CLI's shell mode. This passes through and actually runs the command without Gemini CLI having to think about it. Now, any command you run would be as if you're running it directly in your normal terminal. So we now have our website dependencies installed. Let's go ahead and run the actual dev server. For this, Gemini CLI is actually going to know this from our context. It doesn't even have to go and read any files. It just knows that to start our dev server, it's npm run dev. And it's going to go ahead and prompt us for the shell command. Let's go ahead and allow it. We'll go ahead and open localhost on port 5173 where the npm server is running. Oof, that's a little tough on the eyes. Let's go ahead and change into dark mode. Okay, that looks a lot, lot better. This looks awesome. We've got a great foundation. It looks like we have most of the stuff we want implemented. One thing I see that's missing is a social media kit. People who attend the conference are going to want to be able to share on social media. We should tell them what hashtag to use as well as the color schemes and fonts for the conference. Our social media team has curated a brand kit in Canva that we can use for this. Instead of downloading and saving the image and design, we can actually leverage Canva's MCP server to do this with Gemini CLI without having to leave our terminal. Gemini CLI has subcommands for MCP that we can use to add an MCP server with a single line. gemini mcp add -t for the type. We're using an http remote server. We pass the name of the server, canva, as well as the URL to the remote MCP endpoint. You can find this URL online from Canva. Once we run the command, we should see that the MCP server has been added to our settings. Now when we start up Gemini CLI, we should see that it's asking us to authenticate to the remote server. We can do this with /mcp auth. It will give you a list of your configured MCP servers. Let's choose Canva. It will open up an OAuth flow in your local browser. You'll want to go ahead and allow. You can come back to Gemini CLI and you should see that you are authenticated. To verify this, run /mcp. This will list your available MCP servers and it will have an icon such as green to show that you are connected. The /mcp command will list all the available tools you have. If you want to see detailed descriptions, you can run /mcp desc Now that we are connected to the MCP server from Canva, we can now ask it questions about our Canva designs, such as, can you list my most recent design? Gemini CLI will look at the tools Canva provides and realize that it needs to call the search-designs tool. It knows that our most recent design that we edited was the TechStack Brand Kit. Let's go ahead and ask Gemini CLI to read in the design and create a /socials page for our social media kit. Gemini CLI will again discover the tools it It's going to go ahead and get the design. We're actually seeing it call different tools in parallel here. So it's reading the file at the exact same time that it's going to actually go and get the content from our Canva design. We can see that it's pulling in the different elements from our Canva design, such as what we had on screen, as well as all the different fonts and colors. It's now stepping through and figuring out its plan. and how it can add the socials page to our website. And now it's going to go ahead and write the file. Instead of having to manually allow each and every single one of these confirmations, we can do Yes, allow always, and it will help speed up our flow. You can see that it's now put us into accepting edits mode. You can also get here by running shift tab. All right, it's complete. We now should have a socials page as well as in the footer, we should have a link to the Social Kit. Let's take a look. And there it is, Social Kit. We now have an official page we can send to conference goers so they can use official assets when they post on socials. Not bad at all. Gemini CLI can accomplish pretty complex tasks on your behalf. I encourage you to give complex tasks to Gemini CLI. You might be surprised with what it can accomplish. Coming up, we'll go above and beyond MCP with Gemini CLI's extensions ecosystem.
