Streamlining Content Creation: A Guide to Using Gemini CLI, MCP Server, and VSCode | by Kanshi Tanaike | Google Cloud - Community

Abstract

This guide explores a powerful workflow for generating articles and other content by integrating Gemini CLI, a Model Context Protocol (MCP) server, and Visual Studio Code (VSCode). Discover how to leverage this combination for efficient, context-aware content creation, modification, and distribution, complete with practical examples and prompts.

Introduction

The integration of Gemini CLI with Visual Studio Code (VSCode) creates a highly efficient and context-aware environment for developers and writers alike. This setup allows the AI-powered Gemini CLI to access the VSCode workspace, making it aware of open files and selected text to provide relevant and targeted suggestions. A key feature is the native in-editor diffing, which enables a side-by-side review and modification of AI-generated changes before acceptance, offering greater control over the final output.

When an MCP server is added to this environment, the capabilities expand significantly beyond simple text generation. The MCP server acts as a bridge, allowing the AI agent to interact with external tools and data sources, such as databases, APIs, or project management software, directly from the command line. This transforms the setup into a powerful agentic workflow where Gemini CLI can not only suggest content but also execute real-world tasks like running tests, creating issues, or fetching live data.

The versatility of this integrated environment has significant implications beyond coding. The same features that streamline software development can be powerfully applied to creating articles and papers. For instance, Gemini CLI’s ability to understand complex information can be used to explain intricate concepts for a technical article. Its capacity for content generation, grounded by real-time web results from Google Search, can assist in drafting sections, summarizing research, and overcoming writer’s block. This article will explore the practical application of combining Gemini CLI, VSCode, and an MCP server to revolutionize the process of writing and research.

Setup

1. Install VSCode

You can find the official documentation and installation instructions at https://code.visualstudio.com.

2. Integrate Gemini CLI with VSCode

For detailed instructions on setting up Gemini CLI with VSCode, please refer to the official blog post: https://developers.googleblog.com/en/gemini-cli-vs-code-native-diffing-context-aware-workflows/.

3. Install MCP Server

This article utilizes a specific MCP server. For complete setup and usage instructions, please refer to the repository: https://github.com/tanaikech/ToolsForMCPServer?tab=readme-ov-file#usage

Practical Applications

To test the following scenarios, please open VSCode and the integrated terminal, and run Gemini CLI within the terminal.

1. Generating an Article from Scratch

You can generate a complete article on a given topic by providing a structured prompt.

Prompt:

The goal is to create an article on automation using Google Apps Script.## Article Rules
1. The article's structure must include a Title, Abstract, Introduction, Discussion, Summary, and References.
2. For the References section, include the titles and the authors of the examples you find.
3. Include relevant, generated images to illustrate concepts. Add thumbnail links to the suitable position of the article in markdown format. Get the thumbnail link of the file on Google Drive using a tool, publicly_share_file_on_google_drive.
## Article Creation Steps
To create the article, follow these steps while adhering to the above rules:
1. Conduct Google searches to understand Google Apps Script.
2. Use Google searches to find real-world examples of automation using Google Apps Script. These examples can also include combinations with generative AI, such as Gemini, and AI agents like the Gemini CLI.
3. Suggest three new scenarios for automation using Google Apps Script. For each scenario, include both the advantages and disadvantages.
4. Write the article in Markdown format.
5. Save the article to a markdown file named `@sampleText1.md`.

Upon executing this prompt, Gemini CLI will perform the necessary research and generate the article.

The process will utilize the following tools:

Google Search
generate_image_on_google_drive (from the MCP server)
publicly_share_file_on_google_drive (from the MCP server)

The generated Markdown file will be saved in your workspace.

2. Modifying an Existing Article

Gemini CLI can also be used to edit and refine existing articles.

Prompt:

Here, the previously generated article is modified within VSCode.

Your mission is as follows.
1. Read and understand an article of @sampleText1.md
2. Summarize the abstract section within 30 words.
3. Replace it.

The changes can be reviewed using the diff view in VSCode before accepting them.

3. Requesting Feedback via Email

You can automate the process of sharing your article and requesting feedback.

Prompt:

Send the article as an email.

The goal and mission are as follows.## Goal
Request the feedback on the generated article of @sampleText1.md to Tanaike (tanaike@hotmail.com) using email.
## Mission
1. Convert @sampleText1.md to Google Docs.
2. Convert Google Docs to PDF.
3. Create the email body by considering the goal.
4. Send an email with the email body by attaching the PDF file to Tanaike.

This process utilizes the following tools from the MCP server:

create_google_docs_from_markdown_on_google_drive
convert_mimetype_of_file_on_google_drive
auto_new_draft_creation_Gmail
send_mails_Gmail

The following email will be sent with the article as a PDF attachment:

Dear Tanaike,I hope this email finds you well.
I've recently drafted an article titled "Unleashing Efficiency:
Automation with Google Apps Script" and would greatly appreciate your
valuable feedback on it. Your expertise in Google Apps Script is
highly respected, and your insights would be incredibly helpful in
refining this piece.
I've attached the article in PDF format for your convenience.
Please let me know if you have any questions or require further information.
Thank you for your time and consideration.
Best regards,

For frequently used prompts like this, you can save them for easy reuse.

4. Creating a Presentation from an Article

Transform your article into a presentation with a simple prompt.

Prompt:

Your mission is as follows.
1. Convert @sampleText1.md to Google Docs.
2. Create a presentation with Google Slides using the converted Google Docs as the description of the presentation. The author's name is Tanaike. The presentation title matches the title of the Markdown file. The presentation time is 5 minutes.

The following MCP server tools are used:

create_google_docs_from_markdown_on_google_drive
generate_presentation_with_google_slides

The resulting presentation will be created in your Google Slides.

The generated articles, converted to Google Docs and Google Slides, can also be automatically submitted to a public site by developing a tool on the MCP server.

5. Creating Charts from Data

If you have data points, you can easily create charts.

Prompt:

Your mission is as follows.
1. Create a new Google Spreadsheet.
2. Put the following CSV data into the 1st sheet on the Google Spreadsheet.

head1,head2\n-1.00,0.01\n-0.97,0.01\n-0.93,0.02\n-0.90,0.03\n-0.87,0.03\n-0.83,0.04\n-0.80,0.06\n-0.77,0.07\n-0.73,0.09\n-0.70,0.11\n-0.67,0.14\n-0.63,0.16\n-0.60,0.20\n-0.57,0.24\n-0.53,0.28\n-0.50,0.32\n-0.47,0.38\n-0.43,0.43\n-0.40,0.49\n-0.37,0.55\n-0.33,0.61\n-0.30,0.67\n-0.27,0.73\n-0.23,0.78\n-0.20,0.84\n-0.17,0.88\n-0.13,0.92\n-0.10,0.96\n-0.07,0.98\n-0.03,1.00\n0.00,1.00\n0.03,1.00\n0.07,0.98\n0.10,0.96\n0.13,0.92\n0.17,0.88\n0.20,0.84\n0.23,0.78\n0.27,0.73\n0.30,0.67\n0.33,0.61\n0.37,0.55\n0.40,0.49\n0.43,0.43\n0.47,0.38\n0.50,0.32\n0.53,0.28\n0.57,0.24\n0.60,0.20\n0.63,0.16\n0.67,0.14\n0.70,0.11\n0.73,0.09\n0.77,0.07\n0.80,0.06\n0.83,0.04\n0.87,0.03\n0.90,0.03\n0.93,0.02\n0.97,0.01\n1.00,0.01

3. Create a line chart in the same sheet as the data sheet using the inserted data. In this case, the sheet ID is 0. Don't create the chart in another sheet.

This task uses the following MCP server tools:

create_file_to_google_drive
put_values_to_google_sheets
explanation_create_chart_by_google_sheets_api
create_chart_on_google_sheets

Here is the created chart:

To use this chart in a Google Document, you can use the following prompt:

Prompt:

Your mission is as follows.
1. A sample chart of normal distribution is in the Google Spreadsheet (Spreadsheet ID is `{spreadsheetId}`.). Convert the chart as an image file.
2. Create the text for understanding the normal distribution by including the chart.
3. Create the text as a Google Document.

The MCP server tools used are:

get_charts_on_google_sheets
create_charts_as_image_on_google_sheets
GoogleSearch
create_file_to_google_drive
create_document_body_in_google_docs

The resulting Google Document will include the chart and an explanation.

6. Generating Charts from Images

What if you only have an image of a chart and not the underlying data? Of course, the chart image can be directly used with the article and the paper.

As another approach, it is considered the method for detecting the data points from the chart image using generative AI. Here are a couple of samples.

Pattern 1

The sample chart image is from Fig. 4 of this article.

Prompt:

This goal is to duplicate a chart created as an image to a chart on Google Sheets. To achieve this goal, your mission is as follows.
1. Carefully understand the image chart @sampleChart1.png and detect accurately all data points in the chart by confirming the x-axis and y-axis. To correctly duplicate the image chart using the data, a large number of data points is required, and also, the gaps between each data point do not need to be the same.
2. Show the retrieved data in the console as a table.
3. Create a new Google Spreadsheet and put the data into 1st sheet of the Spreadsheet.
4. Create a chart with the data in the same sheet as the data in Google Sheets using the batchUpdate method of the Sheets API.

The following MCP server tools are used:

create_file_to_google_drive
put_values_to_google_sheets
explanation_create_chart_by_google_sheets_api
manage_google_sheets_using_sheets_api (In some cases, the create_chart_on_google_sheets tool may also be used).

The recreated chart is as follows:

Pattern 2

The sample chart image is from Fig. 3 of this article.

Prompt:

This goal is to duplicate a chart created as an image to a chart on Google Sheets. To achieve this goal, your mission is as follows.
1. Carefully understand the image chart @sampleChart2.png and detect accurately all data points in the chart by confirming the x-axis and y-axis. To correctly duplicate the image chart using the data, a large number of data points is required, and also, the gaps between each data point do not need to be the same.
2. Show the retrieved data in the console as a table.
3. Create a new Google Spreadsheet and put the data into 1st sheet of the Spreadsheet.
4. Create a chart with the data in the same sheet as the data in Google Sheets using the batchUpdate method of the Sheets API.

The following MCP server tools are utilized:

create_file_to_google_drive
put_values_to_google_sheets
explanation_create_chart_by_google_sheets_api
manage_google_sheets_using_sheets_api (In some cases, the create_chart_on_google_sheets tool may also be used).

Here is the resulting chart:

In this instance, the detected data points were not perfectly identical to the original chart image. It is believed that with prompt refinement and future updates to Gemini, more precise results can be achieved.

Summary

This guide has demonstrated a comprehensive workflow for content creation and management using a combination of powerful tools. Here are the key takeaways:

Integrated Environment: The combination of Gemini CLI, VSCode, and an MCP server creates a seamless and powerful environment for a variety of tasks.
Content Generation and Modification: You can generate entire articles from scratch and modify existing ones with simple, natural language prompts.
Task Automation: Beyond text, this setup allows for the automation of tasks such as sending emails, creating presentations, and generating charts.
Data Visualization: You can create charts from both raw data and existing chart images, streamlining the process of data visualization.
Extensibility: The use of an MCP server allows for the integration of custom tools, making the possibilities for automation nearly limitless.

Source Credit: https://medium.com/google-cloud/streamlining-content-creation-a-guide-to-using-gemini-cli-mcp-server-and-vscode-e623c42419f5?source=rss—-e52cf94d98af—4