積沙成塔，滴水穿石

 最近玩了cursor，它本身就是一個MCP。 當然也要來嘗試cline，LLM 就選擇使用 gemini-2.0-flash-thinking-exp-01-21(圖1) cline 進行設定(圖1) 把MCP配置 安裝上去，一樣mcp server 設定好 (圖2) mcp.json(圖2) 那這次我有串接 line-mcp  ，那就請cline 發送各種 line-bot 的訊息模式(圖3) cline 測試line訊息(圖3) cline 的好處 是會出現 Agent 的執行流程狀態，綠色表示任務完成。(圖4) Agent 的執行流程狀態(圖4) 這個再在檢查模型的回應時候，是件很方便的事情。可以知道在哪個環節有出了問題。 cline 還有個好處是，可以選擇 計畫/執行 模式， 這樣子其實在傳輸的token 就可以評估哪些是要用付費執行的model。(圖5) 選擇model 模式(圖5) 最後會發送 訊息到line-bot(圖6) 透過cline發送測試訊息到line-bot(圖6) 同場加映 使用 cursor，cursor 預設的agent 是 claude 4，但這個在使用上支援有限，因為免費可使用的也會受到限制，那就只好一個一個去試可以支援的Agent， 目前 cursor 我是選擇gpt4，他就能使用Line-bot工具。(圖7) cursor + line bot(圖7) 透過cursor 輸入「把目前使用的Agent，傳到Linebot 」(圖8) cursor Agnet 傳訊息到Linebot(圖8) 心得 其實cline、cursor 兩個其實都還滿好用的。因為一開始用的是cursor，介面本身就簡單，所以也不會太複雜，把要用的mcp tool 填寫好就好了。 vscode 的cline 則是有很多選擇可以選，如果有想要用比較進階的功能，也可以選擇cline。 兩個在做的事情都一樣，看哪個用的比較上手，好用😏 有句話「不論是黑貓、還是白貓，只要會抓老鼠的就是好貓」

 google 有出 cli，來看看它的花樣！ 相關連結 在 github 先去 google AI studio 申請API 按照github 的步驟npx 安裝後，會再C:\Users\<使用者>\AppData\Roaming\npm 看到對應的cmd (圖1) cmd的位置(圖1) 執行後，會先要求 選擇theme主題，在輸入API (圖2) gemini-cli(圖2) 如果想直接加入環境變數，就在把他加入到path ( C:\Users\<使用者>\AppData\Roaming\npm )

 今天在測試mcp tool 是否正常。 於是就使用了  @modelcontextprotocol/inspector  ，這個視覺化介面的UI。(圖1) Arguments 這個輸入的 是想要 執行的工具包，command 是執行方式。 這次我是以 Line-bot-mcp 為例 視覺化介面的mp tool 檢測工具 (圖1) 在本地端啟動npx @modelcontextprotocol/inspector ，就會產生localhost。(圖2) npx @modelcontextprotocol/inspector (圖2) 之前直接打開 http://localhost:6274 ，就一直出現disconnect，並沒有注意到tocken，導致tool 一直連不上；因為每次執行tool 的UI 工具 都會產生session token，只要 在proxy session token(圖3) 輸入 session token (圖4) 。 proxy session token  (圖3) session token (圖4) 輸入完session token 就可以connect了。

MCP 工具研究 自了解MCP 後 感覺就像是打開了一個天線。 看了一下 這一篇文章 ，覺得很有意思，於是也自己動手做一個。 這一篇文章，主要是 透過爬蟲工具 + line bot 訊息，做到 通知天氣抓取。 以往爬蟲工具，要透過 語言工具來寫， 但現在可以很方便的 串接  firecrawl  ，不用再自己寫工具。 我先以這篇文章提到的工具來試試  firecrawl  。 1. 在google 搜尋firecrawl + mcp 就有出現 mcp 版的server ，之後再把 關鍵資訊 tool 資訊複製下來(圖1)。 mcp server tool (圖1) 2. 去 firecrawl 官網，註冊帳號，帳號註冊完本身就會有一組key 。(圖2) 取得key(圖2) 因為CURSOR 本身就是一個MCP了，所以以下會以 cursor 為例。同樣的做法也可用在vscode。 先把 cursorsetting 叫出來， 檔案 > 喜好設定> Cursor setting ，點選tool (圖3) 點選 Tools & Intehrations (圖3) 之後點選MCP tool，新增 (圖4) New MCP Server(圖4) 把剛才複製好的json、key 貼上在MCP.json中(圖5) MCP 資訊貼上(圖5) 之後測試 爬一個 新聞，存成news.md (圖6) [測試新聞] https://www.cna.com.tw/news/aopl/202506190158.aspx 透過 firecrawl 爬取新聞  (圖6) 最後可以看見 有爬到新聞 (圖7、圖8) 成功爬到新聞-1(圖7)   成功爬到新聞-2(圖8) 那也有firecrawl 不用輸入key版 ，可看以下的 影片   心得 以往爬蟲要自己寫，需要去看對應的格式寫regex 寫正則，目前直接有firecrawl  幫忙寫好爬蟲，真的很方便。可以透過這個去抓取新聞資訊、天氣資訊....等。 這樣爬下來只需要5秒鍾就解決以往要花半天寫regex。😆 長江後浪推前浪，前浪死在沙灘上

 最近才把MCP整個觀念釐清。 在以往開發會使用VSCODE 或其他各類 編譯工具。 再回頭看了一下 cursor 這套編譯器，其實它就是一個MCP(圖1)。 cursor的Agent(圖1) 在cursor的Agent當中，可以選擇模型，cursor有把主流的模型放進來(圖2)。 選擇模型(圖2) 接下來以cursor建立一個REACT為例。 先輸入指令 建立一個REACT範本 試試 (圖1) 建立REACT 範本(圖1) 這時候Agent 就會開始思考並建立寫出建置的語法，但是尚未執行。(圖2) 尚未執行(圖2) 那在有的MCP當中，有些指令是不允許幫用戶變更的，以cursor來說，這塊是需要用戶手動執行，也就是run ，需要自己按，按下後就會開始執行語法(圖3)。  同意MCP 建置(圖3) 執行完成後，就會看到react 專案建置完成(圖4)。 react 專案建置完成(圖4) 接下來就啟動專案吧！(圖5) 開始啟動react 專案(圖5) 按下啟動後，專案就啟動了! (圖6、圖7) 啟動專案(圖6) 成功執行，react(圖7) web上看到的畫面(圖7) 其它範例 以Vue 為範例(圖8) Vue 為範例(圖8) Vue成功執行 (圖9) Vue成功執行(圖9)

前言   最近應徵的工作收到了考題，我覺得很有意思。 考題的題目是實作figma 的 圖片成網頁設計稿。 考題的方向分為2個部分：實作題、筆試題。 考題方向 實作題： 在實作題的項目有分為2種，icon製作(圖1)、切版(圖2)，實作結果會放在心得分享。 icon製作(圖1) 切版(圖2) 筆試題(圖3) 筆試題(圖3) 心得 筆試的部份不會太刁難，幾乎就是看考觀念、實作經驗。 實作題的部份，我個人是覺得沒有很難，但是在icon (圖4) 不能用圖片要手刻，就需要花些功夫，但因為滿有意思的在於手刻icon 不能用svg，所以就花了些時間思考一下製作，找個時間我應該來做個curve 曲線 優化，目前做的是像素方塊，看起來好硬😅。 切版成品分享   珍珠奶茶分享icon icon(圖4) icon製作這個可能是想看基本功吧！如果考的是canvas、svg 、three.js 這個我需要花些時間去思考和製作，還有一堆還沒研究完的領域

前言 自出社會後就開始從事網頁相關的方面工作，從一開始的小菜雞後端到前端再到設計UI再到資安，一直不斷地學習、更新知識。 一開始出發點也只是想找一份離家近的工作，於是就開始了一場神奇的冒險。 剛開始進去只知道很多東西是天方夜譚，下班就開始狂k資料、去k書、k實作。 這樣的情況下3個月後，直到後來才開始懂在寫些什麼，把工作使用的語言去官網 把每個函式的去官網 寫的範例實作一遍，理解官網每個function 在做些什麼，直到現在官網公布的語言 更新了哪些部分，也能清楚及了解妙用。 其他的程式語言彷彿也像開啟了連接通道，就像是打開了任督二脈，了解原理也能一招萬變，就像易經裡的一句話，「太極生兩儀，兩儀生四象，四相生八卦」。 除了一通萬變之外，開始會去琢磨怎麼樣的觀念、方式、作法會是讓人簡單明瞭、邏輯清楚，別人在旁邊看也能看得懂，好比在公園看到有人在打太極，動作是優雅又大方。 起 當我感覺好像在開發上到了一段程度後，就決定 跳入 「資安」。 跳入資安後，一切又從頭來。 本來應徵的是技術方面，但公司建議從顧問開始做起。 挖！聽起來好像很酷「資安顧問」，是個我想也沒有想過的職業。 承 自開始進了這間公司之後，每天在看的就是資通安全法，以下簡稱資安法。背的也是資通安全法，也常聽到很多專業術語 GCB、DMZ....等，剛開始聽是都聽不懂。去查詢了一下後，原來發現這些都是 專業術語 英文的簡稱。如：GCB  是 政府組態基準(Government Configuration Baseline，簡稱GCB) 、 DMZ 在網路領域是指「非軍事區」。 在資安當中有很多專有名詞，好比 理解 程式中每個函式的 意義。 除了讀懂法條之外，還需要會活用。當客戶詢問時，就需要能夠向客戶說明因為依據「xx法哪個規定」，給予適當的建議與回饋。 顧問要做的功夫不是只有說理解資安法，因為很多客戶提問的問題會刨根究底，也會問「我這樣做，行不行?我不想這樣做，不行嗎?」 對我來說，理解客戶的話不是問題，困難的反而是怎麼樣去回覆客戶的問題 ， 要花時間做的分析問題與預判。 顧問回應流程： 理解 > 找尋對應的知識> 收斂客戶的做法， 給予適當回覆。 找尋對應的知識，需要去學習思考；收斂客戶的做法則需要有經驗。 轉 這樣子兜兜轉轉，前後也過了1.5個月，但回顧自我的學習成效還是很低...

 過往用的LLM 工具有很多，最近正在學習使用MCP，我來說說學習心得。 MCP 就像是你可以選擇自己喜歡的糖果品牌，請AI 以這個品牌的口味作佐料，我們的糖果袋子當中當然可以裝許多自己喜歡的不同品牌，讓AI 依照我們喜歡的口味 再多增添不同佐料與搭配 。 透過MCP 不只是問答 也可結合很多驅動、執行，真的是很方便，就像是料理組合包，把材料、配方給AI ，AI 再去進一步的處理。😀 舉個例子好了，我希望問天氣 用的是A模型，問 新聞用的是B模型，透過MCP 組合起來，AI 就會讀取MCP 提供的方法 ，在進行思考，決策，給予答案  。 目前MCP 支援的啟動方式 是 python  ux 、node.js npx 現在 也有很多 MCP 的開放市場可以選擇使用 😆😆😆  影片分享 ，這部影片說得很好。淺顯易懂

 自4月份後，開始做新的工作—「資安顧問」。 資安顧問要做的事情很多，看問題更需要有更多面的角度，才能提供可靠性、具改善性意義的參考。 以往在做開發腳色的時候，做的會是深度的研究，深度取決於知識量，好比 在一個地下洞丟一顆石頭 ，石頭向下墜落，碰到的底 就是目前知識的水平的深度，如果想要掉落越深，則需要將底部在打通。 然而現在的腳色，做的會是廣度的研究，廣度取決於智慧。會這麼說是，顧問看到的問題 不能在是以一個點出發，而是會去找 前因後果 是為甚麼 才會導致 這件事情發生，且可以提供哪些解法與看法。 未完待續....

前情提要   最近在和以前的老師聊天，趁這段空閒期間，做些什麼事情。 : 老師，你那邊有沒有我能幫忙的，我最近有空檔可以做。 師:  我最近在用voyager在做客戶的後台，但他的樣式需要打造成設計稿的模樣。 我看了一下 voyager ，是一個集成管理後台，很多設定與頁面皆可透過管理後台來完成。 用了一下之後，的確有他的優勢、劣勢也因它的優勢而有所限制，既是他的優勢也是他的劣勢。 可以在後台新增crud 的管理，crud圍繞在voyager的限定之下，若要做到複合式的查詢表 或 客製化葉面就要另外寫自己的controller。 因為 voyager  已經很很久沒在更新了，他的前端套件是用vue2 + bootstrap3。 當我看到一整個前端框架後採用的是vue2的時候，起初有先測試升級vue3後，所有vue2的寫法換成vue3，但因2和3的版本寫法上不同，既使改寫了也會產生許多bug，許多載入後的compoment  無法順利預算渲染 亦或是 vue3 有順利執行無法顯示元件。 衡量了一下時間與風險處理，這次僅幫忙刻製樣式(圖1)與升級套件，主要是將過舊的元件升級、CSS FRAMEWORK 更新、畫面客製化。 圖1. 切版示意圖 gulp 在執行開發前端很方便，尤其是在刻版UI/UX，也可以多緒的處理執行。 此外，再開發時因為需要即時編譯，所以監測時我會選擇分開監測 ，js、sass 、html、img，這樣的好處是當只有指定監測改變 其他的監測項目 不會再次編譯，只有該內容改變監測的項目才會更新，ex: html 內容異動，只編譯html、scss 改變，只編譯scss。(圖2) 圖2. gulpfile.js 監測部分 laravel-mix 使用起來 和gulp 差不多，比較可惜的地方是沒有辦法像gulp 可以分開監測，但mix 在輸出css、js 中會去解決vendor引入的路徑不對的問題，所以再引入的時候 不需要去想前面要有多少個../../ ，mix 就能處理好。 那這次兩個方法中，無論用哪個方法都能輸出all.js、all.css ，在有多個套件要更新與修改的狀況下，會選擇的是mix，不需要再去思考 這個外掛套件的vendor 到底是否有找到對的路徑。 最後這是重新升級後的voyager，前端使用的是boo...