Cursor AI 程式碼產生器 - 8 歲小孩也能 45 分鐘打造聊天機器人？實測開發 Chrome 瀏覽器擴充功能！

Cursor 最近在網路上掀起熱烈討論，Cloudflare 副總裁 Ricky 的一則推文更將其推向風口浪尖。他提到自己年僅 8 歲的女兒，竟然透過 Cursor 在短短 45 分鐘內就做出一款簡單的聊天機器人應用！

這段影片目前觀看次數已突破 250 萬，而且還在持續增長中。今天就來帶大家認識 Cursor，並實際用它做一個簡單的專案！

What can an 8-year-old build in 45 minutes with the assistance of AI?

My daughter has been learning to code with @cursor_ai and it's mind-blowing🤯

Here are highlights from her second coding session. In 45 minutes she built a chatbot powered by @CloudflareDev Workers AI 👀 pic.twitter.com/MJ6vAlmvnj

— Ricky (@rickyrobinett) August 19, 2024

Cursor AI 程式碼產生器是什麼？

Cursor 本身是以開源的 VSCode 為基礎進行改良，並整合了強大的語言模型功能。它不只是簡單地加入一個聊天視窗，而是讓語言模型生成的程式碼能夠自動創建檔案，省去手動創建和複製貼上的麻煩。這也是 Cursor 能夠引起廣泛關注的原因之一。

Cursor 方案&費用

Cursor 提供兩種方案：

• 免費 Hobby 方案：
  • 首兩週可免費試用 Pro 方案功能。
  • 試用期過後，帳號總共僅限呼叫 API 50 次。
• 付費 Pro 方案：
  • 每月 20 美金。
  • 每月可快速呼叫 Claude 3.5 Sonnet、GPT4-o 等大型模型 API 500 次，基本上用不太完。慢速的呼叫則無限次數。

Cursor 實測！打造 Chrome 瀏覽器擴充功能

接下來我將示範如何使用 Cursor 製作兩個簡單的 Chrome 瀏覽器擴充功能：圖片下載器和顏色選擇器。這兩個功能大約花費我 10 到 20 分鐘完成，過程中完全沒有手動輸入任何程式碼，全部都是透過與 Cursor 的語言模型對話、創建和修改檔案！

以下以顏色選擇器為例，帶大家一步步操作：

步驟一：安裝 Cursor 並登入帳號

1. 至 Cursor 官網下載安裝檔並安裝。
2. 打開 Cursor，使用 Google 帳號登入。

步驟二：確認 Composer 功能開啟

Composer 功能預設為開啟，這部不做通常不會有問題

1. 點擊右上角設定圖示，進入「Settings」。
2. 選擇左側「Features」頁面。
3. 找到「Composer」選項，確認其狀態為「enabled」。

步驟三：創建專案資料夾

在電腦中創建一個空資料夾，作為你的專案資料夾。

步驟四：使用 Composer 生成程式碼

1. 在 Cursor 中開啟剛剛創建的專案資料夾。

2. 按下 Ctrl + I 呼叫 Composer 視窗。

   

3. 在視窗中輸入你想要的功能描述，例如：

1

我想要創建一個顏色選擇器的 Chrome 瀏覽器擴充功能

4. 按下 Enter 鍵，Cursor 就會開始自動生成程式碼和檔案。

   

5. 點擊右下角「Accept All」接受所有變更。

步驟五：預覽及調整功能

1. 打開 Chrome 瀏覽器，進入「擴充功能」頁面。
2. 開啟「開發人員模式」。
3. 點擊「載入未封裝的項目」，選擇你的專案資料夾。
4. 瀏覽器就會載入你剛剛製作的擴充功能。

此時可以測試擴充功能是否如預期運作，並根據需要調整功能描述，讓 Cursor 繼續修改程式碼。

步驟六：重複步驟四和五，直到功能完善

透過不斷與 Cursor 對話、調整程式碼，最終就能完成你想要的擴充功能！

Demo 下載

本文測試生成的擴充功能:

Cursor測試 - LLM對話擴充功能.zip ↓ 下載檔案

Cursor測試 - 顏色選擇器擴充功能.zip ↓ 下載檔案

Cursor 其他功能

除了上述示範的功能外，Cursor 還提供：

• 程式碼自動完成功能： 類似 Github Copilot。

  

• 程式碼生成：

  • 按下 Ctrl + K 呼叫 Chat 視窗，輸入需求描述即可生成程式碼。
  • 框選要修改的程式碼片段，按下 Ctrl + K 生成新的程式碼。

  

• Docs 功能： 載入函式庫文件，避免語言模型生成錯誤程式碼。

  

• 網路搜尋功能： 輸入 @Web + 關鍵字，讓 Cursor 參考網路資料修改程式碼。

  

Cursor 使用心得

簡單的試用下來，個人認為 Cursor 的使用體驗非常出色，它將語言模型與程式碼編輯器完美結合，省下許多繁瑣的操作步驟，大幅提升開發效率。也讓「製作應用程式」這件事的門檻大幅降低，幾乎所有人都可以使用。

唯一想要抱怨的是，雖然設定裡有 Models 的選單，也可以輸入自己的 Gemini API Key，但 Composer 功能目前是不支援使用自己的 API Key 驅動的，這點算是相當可惜。

你對 Cursor 有什麼看法呢？歡迎在下方留言分享你的想法！

影片介紹