I'm a fullstack engineer, and Sandy a digital marketer.
The Model Context Protocol (MCP) is extremely useful. An AI assistant helps you decide when and how to use connected tools, so you only need to configure them. After integrating MCP logging management systems into several of my projects, it has saved me a significant amount of time. In this article, I'm going to integrate Grafana with the Gemini CLI and n8n. I will chat with the Gemini CLI and n8n and have them invoke the Grafana MCP server. structure TOC
In this article, I won't introduce what MCP is. Instead, I will explain how to set up the Figma MCP server and use Gemini as an MCP client to work with Figma. I will also show you how to run a prompt to get a Figma design with Gemini. TOC
Introduction Gemini CLI has been one of the most popular AI agents in the first half of 2025. It's similar to Claude Code, bringing its power directly into your terminal. Although other terminal AI agents exist, their pricing plans are quite different. Gemini CLI provides a free tier with 100 requests per day using Gemini 2.5 Pro, and you can unlock Tier 1 by upgrading to a paid plan. Prerequisites I'm going to use npm to install Gemini. My Node.js version is v24.4.1, and my npm version is 11.4.2. Gemini needs Node.js version 20 or higher installed. If you're using macOS, you can also choose Homebrew to install the Gemini CLI. Installation Now, let's install it using npm. After installation, you can run gemini directly in your terminal. npm install -g @google/gemini-cli installation I'm using the Use Gemini API key authentication method, so I need to generate a key from Google AI Studio and set it in .zshrc (or .bashrc) by adding this line: And then you can try Gemini now! Run some examples example Prompt: give me suggestions for the socket functionality of this project? Response: Conclusion: The Gemini installation is very simple. Although I am using Neovim with Avante, Gemini gives me more power to use the terminal. Next, I will explore how to use Gemini with an MCP server and integrate the workflow into my daily tasks.
前一陣子遇到一個問題，一直在嘗試如何讓sessionStorage / localStorage / cookie有變動時，react遙遠的其他元件也可以知道其變化。 於是乎就找到了一個codeSandbox，其原理就是透過 useSyncExternalStore 去通知有subscribe的元件，讓他們知道sessionStorage / localStorage / cookie key-value有變動，