用 Vibe Coding 開發你的第一個 Pedelec 應用
這個頁面主要寫給使用 Vibe Coding 開發產品的人。
Pedelec 已經準備了相對完整的文件與 Agent guidance，所以你不需要先學會 Pedelec SDK，也不需要真的會寫程式，才有辦法開始製作自己的 Pedelec 應用。
不過，如果你先理解幾個最基本的概念，之後不論是和 Codex、Claude Code、Cursor，或其他 Coding Agent 溝通，都會順利很多。
你真正需要做的，不是先想「程式要怎麼寫」，而是先想清楚：
我要請 AI 幫使用者完成什麼工作？
先想像你正在替網站雇用 AI 員工
開發 Agentic Web Apps 時，可以先把 AI Agent 想像成網站裡的 AI 員工。
例如你正在做一個 Podcast 工具。
使用者可能會說：
幫我看一下這一集 Podcast，找出三段最適合做短影音的內容，標題也一起幫我想。
這件事情裡面同時包含很多傳統程式不好處理的工作：
- 理解使用者真正想要什麼
- 閱讀大量內容
- 判斷哪些段落比較重要
- 整理資訊
- 撰寫標題與文案
- 根據前一步結果決定下一步要做什麼
這些就是 AI Agent 很適合負責的部分。
依照你選擇的 Provider 與 Model 不同，Agent 還可能具備影像理解、聲音理解或其他多模態能力。
但 Pedelec 最重要的地方，不只是讓 AI「回答問題」。
它可以讓 Agent 在理解完問題之後，繼續操作你的應用程式，把工作真的完成。
先釐清：哪些事情需要 AI 判斷？
在開始串接 Pedelec 以前，先不要想 API、SDK 或程式架構。
只需要用一般人說話的方式描述工作流程。
使用者上傳一段 Podcast。
AI 先閱讀逐字稿。
找出值得剪成短影音的片段。
向使用者說明推薦原因。
使用者確認後，建立對應的 Clip。
這裡可以分成兩種事情。
AI Agent 負責：
- 理解逐字稿
- 判斷哪些片段值得使用
- 解釋推薦原因
- 理解使用者後續修改要求
你的網站則負責：
- 讀取逐字稿
- 建立 Clip
- 修改 Clip
- 匯出影片
- 儲存資料
這個界線非常重要。
Agent 負責思考與判斷；網站負責提供它可以使用的實際能力。
決定 Agent 可以操作網站的哪些功能
Agent 不會憑空知道你的網站怎麼操作。
你需要把願意交給 Agent 使用的能力，定義成一個個 Tool。
例如一個 Todo App 可能有：
get_todos
create_todo
update_todo
delete_todoPodcast 工具可能有：
read_transcript
create_clip
update_clip
export_video3D 建模工具可能有：
read_scene
update_model
render_preview
export_glb當 Agent 覺得需要執行某個操作時，就會呼叫對應的 Tool。
你的網站收到 Tool Call 後，再執行真正的程式邏輯，並把結果回傳給 Agent。
因此在 Vibe Coding 階段，你不需要先想：
我要怎麼讓 AI 點這顆按鈕？
比較好的問題是：
我要讓 AI 擁有哪些產品能力？
例如不要設計：
click_button
find_css_selector
execute_javascript而是設計：
create_clip
rename_layer
export_modelTool 最好描述「使用者真正想完成的事情」，而不是網站 UI 裡很細微的操作。
Guidance 就是這位 AI 員工的工作手冊
除了 Tools 以外，每個 Agent 還可以設定自己的 guidance。
你可以把 Guidance 想像成：
這位 AI 員工的工作手冊。
它會告訴 Agent：
- 你的角色是什麼
- 工作目標是什麼
- 工作流程應該怎麼進行
- 什麼時候應該使用哪個 Tool
- 哪些事情不能自己決定
- 什麼時候需要先詢問使用者
例如：
你是一位 Podcast 剪輯助理。
收到使用者的剪輯需求後：
1. 先讀取目前 Podcast 的逐字稿。
2. 找出適合製作短影音的片段。
3. 向使用者說明你的推薦以及理由。
4. 在使用者確認以前，不要建立 Clip。
5. 確認後使用 create_clip 建立對應片段。你不一定需要自己把 Guidance 寫得非常完整。
只要把工作流程描述清楚，也可以請 Coding Agent 幫你整理成適合 Pedelec 的 Guidance。
Session 可以想成一次有上下文的工作
Pedelec 裡，每一個正在工作的 Agent 都會存在於一個 Session 裡。
你可以把 Session 想像成：
一段可以持續上下文的 AI 工作對話。
例如：
User:
幫我找出這集 Podcast 最適合剪的三個片段
Agent:
我推薦 A、B、C 三段……
User:
第二段不要，改成後面聊 AI 的那一段如果這兩句話發生在同一個 Session 裡，Agent 就知道「第二段」指的是剛才自己推薦的第二個片段。
通常，只要 Agent 接下來仍然需要記得前面發生過的事情，就適合繼續使用同一個 Session。
完全不同的工作、不同角色，或不同工作空間，則可以建立新的 Session。
一個網站也可以同時存在很多 Session，讓不同 Agent 分別處理不同任務。
你不一定需要很多種 Agent
第一次做 Pedelec 應用時，不需要一開始就設計複雜的 Multi-Agent 系統。
很多產品其實只需要一種 Agent。
Podcast Editing Agent負責理解 Podcast、提出剪輯建議並使用剪輯 Tools。
等到產品真的出現不同工作角色時，再拆成：
Research Agent
Editing Agent
Publishing Agent通常會比一開始就建立很多 Agent 更容易維護。
如果你不確定該拆幾個，可以先問自己：
這些工作需要完全不同的工作流程與 Guidance 嗎？
如果答案是否定的，通常先放在同一種 Agent 裡就可以。
Provider 可以交給使用者自己決定
不同使用者可能使用不同的 AI Agent Provider。
Pedelec 目前可以讓使用者使用自己電腦裡已經準備好的 Provider，例如 Codex、Claude Code、Cursor、Antigravity、OpenCode 或 Ollama。
網站本身不需要替使用者保存這些 Provider 的登入資訊或 API Key。
如果你的產品不在意具體使用哪一家 Provider，可以直接使用 Pedelec Desktop 裡設定的預設 Provider。
如果你的產品有需要，也可以在網站提供 Provider 選擇介面。
例如：
AI Provider
● Codex
○ Claude Code
○ Cursor這種情況下，也建議在主要工作畫面讓使用者知道目前正在使用哪個 Provider。
一個很好記的原則是：
你的網站負責決定 AI 要做什麼；Pedelec Desktop 負責管理使用者自己的 AI Provider。
檢查 Pedelec 是否已準備完成
正式開始 AI 工作以前，建議網站先確認 Pedelec 是否 Ready。
「Pedelec 不能使用」其實可能代表很多不同狀況：
Chrome Extension
↓
Pedelec Desktop
↓
目前網站是否已取得使用者授權
↓
是否存在可以使用的 Provider因此不建議所有錯誤都只顯示：
請安裝 Pedelec
比較好的做法是依照狀態提供對應說明。
例如：
Chrome Extension 尚未安裝
引導使用者安裝 Pedelec Chrome Extension。
Pedelec Desktop 尚未安裝
引導使用者前往：
https://pedelec.cc/downloadDesktop 已安裝但沒有啟動
提醒使用者開啟 Pedelec Desktop，並提供重新檢查按鈕。
網站尚未取得授權
顯示：
Connect Pedelec
並引導使用者在 Extension 完成目前網站的授權。
沒有可用 Provider
引導使用者前往 Pedelec Desktop Settings 檢查 Provider 的安裝、登入或設定。
對使用者來說，他們不需要理解 Pedelec 內部到底是哪一層出了問題。
網站只需要清楚告訴他：
現在發生什麼事，以及下一步要做什麼。
讓使用者知道 Agent 現在正在做什麼
因為 Agent 的工作不像一般 API 一定瞬間完成，所以 Pedelec 應用最好要提供一些基本的執行狀態。
例如：
Pedelec Ready
Codex
正在分析 Podcast…或：
正在建立模型…如果 Agent 正在等待、執行 Tool 或發生錯誤，最好也提供明確的視覺回饋。
一個基本的 Pedelec UI 通常可以考慮包含：
- 目前 Pedelec 是否 Ready
- 目前使用的 Provider
- Agent 回應
- 工作進行中的狀態
- 發生錯誤時的處理方式
- 必要時停止目前工作的方法
不一定每個 Pedelec 應用都需要完整聊天介面。
如果你的 Agent 只是負責完成一個明確任務，也可以只顯示：
正在製作模型…
[停止]Pedelec 並不限制你一定要把 Agent 做成 Chatbot。
最後才交給 Coding Agent 實作
當你把前面的事情想清楚後，其實已經完成大部分真正重要的工作了。
你應該已經知道：
- Agent 要幫使用者完成什麼
- 哪些事情需要 AI 判斷
- 網站要提供哪些 Tools
- Agent 的 Guidance 大致是什麼
- 一次工作應該如何使用 Session
- 使用者要不要選 Provider
- Pedelec 尚未 Ready 時 UI 要怎麼處理
這時才需要開始實作。
Pedelec 提供了專門給 Coding Agent 使用的 integration guidance，因此你也可以直接要求 Coding Agent 幫你完成串接。
例如你可以這樣描述：
我要在這個網站加入 Pedelec。
這個 Agent 的工作是：
分析使用者上傳的 Podcast，找出適合製作短影音的片段。
它需要能：
- 讀取逐字稿
- 建立 Clip
- 修改 Clip
- 匯出影片
建立 Clip 前必須先讓使用者確認。
一個 Podcast 編輯工作使用同一個 Session。
我希望畫面上可以看到：
- Pedelec 是否 Ready
- 目前 Provider
- Agent 工作狀態
- Agent 的建議剩下的 SDK 串接、Tool schema、Session lifecycle、錯誤處理與 UI integration，就可以再交給 Coding Agent 完成。
不知道怎麼開始？先回答這五個問題
如果你現在只有一個產品點子，可以先不用想任何技術細節。
先回答：
- 使用者希望 AI 幫他完成什麼事情？
- 過程中有哪些事情需要 AI 理解或判斷？
- Agent 需要操作網站的哪些功能？
- 哪些操作需要先取得使用者確認？
- Agent 完成工作時，使用者應該看到什麼結果？
只要這五個問題能回答清楚，你通常就已經有足夠資訊，可以開始讓 Coding Agent 幫你建立第一個 Pedelec 應用。
你不需要先變成 AI Engineer，也不需要先理解所有 Pedelec API。
先把 AI 員工的工作說清楚，再讓 Vibe Coding 幫你把它做出來。