分類: AI人工智慧

VS Code 設定Chrome Devtools MCP 讓AI自動執行/測試網頁

九月底Chrome for Developers 發佈AI 代理程式適用的 Chrome 開發人員工具(MCP)

加上

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}

如果使用VSCODE的話
開啟vs code ，按下 【Ctrl+Shift+P】 快捷鍵，選擇MCP:開啟使用者設定，然後

在mcp.json設定如下

 {
 ​
  "servers": {
 ​
 •    "chrome-devtools": {
 ​
          "command": "npx",
 ​
          "args": ["chrome-devtools-mcp@latest"]
 ​
      }
  }
 ​
 }

就可以讓AI呼叫網頁了。

可以用markdown語法將測試案例寫至md檔，透過ai執行。


https://github.com/ChromeDevTools/chrome-devtools-mcp

 

取得第二張AI 認證Google Gemini Certified Educator 認證教師證書

以前最不愛考認證的我，因為在研發單位當主管秉持身先士卒的理念。從ipas ai 規劃師初級自己去考取外，剛好看到google推出免費的Google Gemini Certified Educator 認證教師證書，花了半小時裸考通過。主要為考google gemini 與NotebookLM以及一些相關ai的功能，對現在每天與ai為伍的我算是得心應手，證書有效期限為3年。。

註冊考式網址 https://educertifications.google/

 

AI coding工具cursor 推出cursor cli – Cursor Agent

今天收到cursor發來的信，推出cursor cli。安裝方法 curl https://cursor.com/install -fsS | bash

安裝後輸入 cursor-agent 執行

官方網址: https://cursor.com/cn/cli

不過目前看來是在wsl環境下，但可以讓cursor agent 跑在像jetbrians這類ide也是不錯。可以讓cursor的威力發揮在更多地方了

企業內架設落地 GPT-OSS-20B 模型

原來習慣使用meta llama 模型，後來OpenAI直接釋出Open Source的 gpt-oss-20B, 就開始改用它當落地模型。

公司內部主機 作法

curl --location 'http://xxxx:11434/api/chat' \

--header 'Content-Type: application/json' \

--header 'Accept: application/json' \

--data '{

"model": "gpt-oss:20b",

"messages": [

{"role": "system", "content": "你是一位專業助理，請用繁體中文回覆。"},

{"role": "user", "content": "用三點說明向量資料庫是什麼？"}

],

"stream": false,

"options": {

"temperature": 0.7,

"num_ctx": 8192

},

"keep_alive": "30m"

}'

OpenRouter 作法

curl --location 'https://openrouter.ai/api/v1/chat/completions' \

--header 'Content-Type: application/json' \

--header 'Authorization: Bearer sk-or-v1-xxxxxx' \

--data '

{

"model": "openai/gpt-oss-20b:free",

"messages": [

{"role": "system", "content": "你是一位專業助理，請用繁體中文回覆。"},

{"role": "user", "content": "用三點說明向量資料庫是什麼？"}

],

"stream": false,

"options": {

"temperature": 0.7,

"num_ctx": 8192

},

"keep_alive": "30m"

}'

搭配 Claudia 的 Claude Code：輕鬆進階的 AI 助手工作流程

https://claudiacode.com/

結合終端機中的 Claude Code 與可視化桌面應用 Claudia，可同時享有強大 AI 編程能力與友善 GUI 體驗，大幅提升開發效率與可視化管理。

一、什麼是 Claude Code 與 Claudia

Claude Code

  • 由 Anthropic 開發的「Agentic 編程工具」，直接嵌入您熟悉的終端機，能透過自然語言指令理解並操作整個程式碼庫，執行測試、修復錯誤、搜尋 git 歷史等任務。

Claudia

  • 開源桌面應用（基於 Tauri），為 Claude Code 增添直觀的圖形化介面，整合專案管理、即時使用量儀表板、MCP 伺服器管理與沙盒環境，免去頻繁輸入 CLI 指令的困擾。

二、為何搭配使用？

優勢面向 Claude Code (CLI) Claudia (GUI)
學習曲線 低，熟悉 CLI 後快速上手 更低，點擊式操作不需記憶指令
上下文理解 直接載入整個專案結構，依賴 CLAUDE.md 最佳化 同樣支援 CLAUDE.md，並可視化呈現關鍵內容
任務自動化 鏈結多步驟指令，適合 CI/CD 自動化 一鍵執行常用流程，並提供「檢查點」還原功能
專案管理 需手動切換分支、查詢日誌 Projects 面板一覽所有 Session，點擊即可回顧
使用量與成本追蹤 無內建可視化 即時顯示 API 使用量、Token 成本與統計分析
安全沙盒 需手動設定權限 內建 seccomp/Seatbelt 沙盒，細粒度權限控管

三、安裝指南

  1. 安裝 Node.js (v18+)，並確認 npm 可用

  2. 安裝 Claude Code

    bash
    npm install -g @anthropic-ai/claude-code

    驗證：執行 claude --version 應顯示版本號。

  3. 下載並安裝 Claudia

    • 方式一：從 GitHub Releases 取得最新的 macOS/Windows/Linux 執行檔

    • 方式二（進階用法）：

      bash
      git clone https://github.com/getAsterisk/claudia.git
      cd claudia
      yarn install
      yarn tauri build

    執行後即會開啟可視化介面。

四、基本應用範例

  1. 互動式開發

    • CLI：claude 開啟 REPL，輸入「請幫我新增一個 POST /users API」

    • GUI：在 Claudia 中點擊「New Session」，選擇系統提示，再輸入需求

  2. 除錯與測試

    • CLI：claude run test 自動執行測試並修復失敗測試

    • GUI：在「Timeline」檢視每次測試結果差異，快速回溯錯誤

  3. 版本控制

    • CLI：claude git merge 自動解決衝突

    • GUI：在「Projects」面板切換分支並視覺化比較差異

  4. 自訂 AI 智能體

    • 建立 CLAUDE.md 記錄專案慣例與常用指令

    • GUI 中匯入/編輯 CLAUDE.md，讓 Claude 記憶專案規範

五、進階推薦用法

  1. 環境優化

    • 在專案根目錄放置 CLAUDE.md，記錄測試命令、程式風格與常用工具，讓 Claude 建立持久記憶。

  2. CI/CD 自動化

    • 結合 Claude Code CLI 於 GitHub Actions，於 PR 自動執行程式碼檢查與合併衝突解決。

  3. 多語言支援

    • 透過 Claudia MCP 管理器，註冊多個 Model Context Protocol 伺服器，讓 Claude 跨平台、跨服務庫檢索文件。

  4. 團隊協作

    • 使用 Claudia 的「檢查點」功能截取多個開發階段，並匯出差異報告，供團隊成員 review。

六、結語

將 Claude Code 與 Claudia 結合，既保有終端機指令的靈活與自動化能力，又能享有 GUI 的可視化便捷，適合各種規模與需求的專案。無論是程式新手，或是追求效率的資深開發者，都能透過這套組合顯著提升開發體驗與產出品質。

終端式代理人Claude Code與 Gemini Cli安裝到windows

原本在vscode就裝有github copilot 這個AI 程式寫作的輔助工具，但因為最近終端式的代理從codex cli 到claude code以及最新的gemini cli都太強了！於是想說多二個代理人也不錯～

先記錄一下如何安裝，從最簡單的Gemini Cli (https://github.com/google-gemini/gemini-cli)好了，官方部落格文章在此「Gemini CLI：你的開源 AI 代理」

首先，要先安裝 node.js 版本要20或更高 (下載安裝 https://nodejs.org/en/download )，安裝完成後直接在命令提示字元下輸入

npm install -g @google/gemini-cli

接著輸入

gemini

然後會出現設定與驗證後就可以使用了！

Gemini code完整命令說明
Gemini code說明手冊

Gemini 手冊

接下來要處理比較麻煩的claude code。

目前claude在windows只支援WSL（Windows Subsystem for Linux）模式安裝，所以必需先看一下WSL到底是什麼以及如何使用 WSL 在 Windows 上安裝 Linux  ，接著輸入

wsl --install
wsl --set-default-version 2   # 確保使用 WSL2
wsl --set-default Ubuntu      # 如果有多個版

接著進入wsl

sudo apt update #更新
sudo apt upgrade #升級
sudo apt install nodejs npm  #安裝nodejs 跟npm
npm install -g @anthropic-ai/claude-code #安裝claude code

安裝完成即可。

claude code手冊

https://github.com/getAsterisk/claudia

安裝openai codex

npm i -g @openai/codex

github codex

https://chatgpt.com/codex
codex說明

用 LINE Messaging API 打造 MCP 伺服器，c#如何實作

一、MCP說明

MCP（Model Context Protocol） 是一種協定，讓大型語言模型（LLM）可以與外部系統或服務進行互動，例如查詢資料庫、調用 API 或執行特定功能。其主要目的是解決 LLM 的「幻覺問題」（hallucination），即模型可能基於訓練數據生成不準確的回應。

MCP 的架構分為三個角色：

  1. Host：負責接收使用者請求的 LLM 應用程式，例如 Claude 桌面應用程式。

  2. Client：Host 的一部分，負責與 MCP server 通信。

  3. Server：提供外部功能或資料的服務端，具備工具（Tools）和資源（Resources）。

MCP 的運作流程：

  1. Host 啟動時，Client 會向 Server 請求工具清單。

  2. 根據使用者的輸入，LLM 決定使用哪些工具。

  3. Client 調用 Server 的工具，完成功能後回傳結果。

  4. Host 整合回應並傳遞給使用者。

應用案例： 可以用 MCP server 與 LINE Messaging API 結合，讓 LLM 發送訊息給 LINE 官方帳號的好友，或根據天氣資訊生成動態內容。

二、C# MVC 範例：簡易 MCP Server

以下是基於 C# ASP.NET Core MVC 實作的一個簡單 MCP Server 範例，實現一個名為 broadcast_message 的工具，用於模擬發送訊息。

1. 建立 Model（工具定義）

 // Models/Tool.cs
 public class Tool
 {
     public string Name { get; set; }
     public string Description { get; set; }
 }

2. 建立 Controller（處理請求）

 // Controllers/McpController.cs
 using Microsoft.AspNetCore.Mvc;
 ​
 [ApiController]
 [Route("mcp")]
 public class McpController : ControllerBase
 {
     // 模擬工具清單
     private static readonly List<Tool> Tools = new List<Tool>
     {
         new Tool { Name = "broadcast_message", Description = "Send a message to all users" }
     };
 ​
     // Endpoint: tools/list
     [HttpGet("tools/list")]
     public IActionResult GetTools()
     {
         return Ok(Tools);
     }
 ​
     // Endpoint: tools/call
     [HttpPost("tools/call")]
     public IActionResult CallTool([FromBody] dynamic request)
     {
         string toolName = request.tool;
         string message = request.parameters?.message;
 ​
         if (toolName == "broadcast_message" && !string.IsNullOrEmpty(message))
         {
             // 模擬訊息廣播
             return Ok(new { success = true, message = $"Broadcasted: {message}" });
         }
 ​
         return BadRequest(new { success = false, error = "Invalid tool or parameters" });
     }
 }

3. 建立 View（測試頁面）

 <!-- Views/Home/Index.cshtml -->
 <!DOCTYPE html>
 <html>
 <head>
     <title>MCP Test</title>
 </head>
 <body>
     <h1>MCP Server 測試</h1>
     <p>訪問 `/mcp/tools/list` 取得工具清單</p>
     <p>訪問 `/mcp/tools/call` 測試工具呼叫</p>
 </body>
 </html>

4. 啟動專案並測試

  1. 啟動 ASP.NET Core 專案。

  2. 測試工具清單：

    • 用瀏覽器訪問：http://localhost:5000/mcp/tools/list

    • 回應：

       [
     {
         "name": "broadcast_message",
         "description": "Send a message to all users"
     }
 ]

  3. 測試工具呼叫：

    • 用 Postman 或其他工具發送 POST 請求到 http://localhost:5000/mcp/tools/call，Body（JSON）如下：

       {
     "tool": "broadcast_message",
     "parameters": {
         "message": "Hello, MCP!"
     }
 }

    • 回應：

       {
     "success": true,
     "message": "Broadcasted: Hello, MCP!"
 }

總結

以上範例展示了如何用 C# MVC 實現一個簡單的 MCP Server，包含工具清單和工具調用功能，適用於理解 MCP 的基本概念與運作方式。

參考連結

[MCP 介紹：用 LINE Messaging API 打造 MCP 伺服器]  https://techblog.lycorp.co.jp/zh-hant/introduction-to-mcp-and-https://techblog.lycorp.co.jp/zh-hant/introduction-to-mcp-and-building-mcp-server-using-line-messaging-apibuilding-mcp-server-using-line-messaging-api 

高度模擬Notebooklm語音摘要功能，使用Google Gemini 與Google AI Studio實作

前陣子Notebooklm的語音摘要由原本的英語，增加了繁體中文的語音摘要功能。讓許多人對這功能感到驚艷~於是想想是不是可以自己做出來，首先先向google Gemini 打聽一下Notebooklm voice overview的提示詞是什麼?

起手式，先試探性的問一下提示詞是什麼

然後，換個方式問說可不可以模擬撰寫提示詞，於是生出來第一版本

你是一個強大的多模態模型，專精於理解和總結文本及音訊資訊，並以引人入勝的對話形式呈現。你的任務是根據以下提供的文本資料，生成一段由兩位虛擬主持人（稱為「主持人 A」和「主持人 B」）進行的語音摘要腳本。

**目標：**

1. **全面理解：** 深入理解提供的文本資料的核心主題、關鍵論點和重要細節。
2. **精準總結：** 以簡潔明瞭的方式總結資料的精華內容。
3. **對話呈現：** 將總結的內容融入兩位主持人之間的自然對話中，使其聽起來像一個資訊豐富的 Podcast 片段。
4. **突出重點：** 在對話中清晰地標示和討論資料中最關鍵的發現或結論。
5. **保持流暢：** 確保對話的流暢性和連貫性。

**指令：**

* 仔細閱讀並分析以下提供的文本資料：
“`
[在此插入使用者提供的文本資料]
“`
* 基於對文本的理解，構思一段由「主持人 A」和「主持人 B」進行的對話腳本。
* 腳本應包含兩位主持人的發言，清晰標註說話者（例如：「主持人 A：」、「主持人 B：」）。
* 對話應涵蓋文本的核心內容，並以易於聽眾理解的方式呈現。
* 鼓勵在對話中進行提問、回答、解釋和相互補充，以增強資訊的傳達效果。
* 腳本的長度應適中，能夠在合理的時間內概括文本的主要內容。

**範例對話風格 (僅供參考)：**

主持人 A：歡迎收聽今天的內容摘要。我們今天要討論的是一份關於 [文件主題] 的文件。主持人 B，你覺得這份文件的主要發現是什麼？

主持人 B：你好！是的，[主持人 A]。我認為這份文件最關鍵的地方在於 [核心發現 1]。它指出 [對核心發現 1 的簡要解釋]。

主持人 A：這很有意思。那麼，這對 [相關領域/概念] 有什麼影響呢？

主持人 B：根據文件，這可能意味著 [影響的解釋]。此外，文件中還提到了 [核心發現 2]，這也值得我們關注…

**請根據以上指令和提供的文本資料，撰寫完整的語音摘要腳本。**

有了提示詞後，來試試把POS系統的規格書丟進去

產生後，就把內文丟到google ai studio中的 Generate Media→Generate speech新功能

依照下面步驟

1 把gemini 產生的腳本貼到 1的地方
2 如果符合規格(預設是speaker 1 / speaker 2)的話，2就會自動轉換
3 模型是Gemini 2.5 flash preview TTS
4 選Multi-Speaker Audio
5 可以選speaker 1/2的聲音(下拉)
6 都完成後就可以按run 就可以產生了