Solutions Choose your path
For individuals Build, learn, and create with simple usage-based access. For business Scale teams, billing, governance, and model workflows. More English 繁體中文 日本語 한국어 Français Deutsch Español Italiano Português Русский العربية ไทย Tiếng Việt Bahasa Indonesia Bahasa Melayu Türkçe Polski Nederlands Danish Norsk Қазақ اردو
免費開始 免費開始
500+ AI Model API, All In One API.
Just In CometAPI © 2026 CometAPI · All rights reserved
guide / CometAPI 研究
使用 Lovable 與 CometAPI 構建 AI 助理 學習 Lovable 如何構建 Web 應用程式，探索其核心功能，並透過安全的後端串接 CometAPI，附帶實作寫作助理教學。
Deon Goodwin AI 模型與 API 研究團隊 學習 Lovable 如何構建 Web 應用程式，探索其核心功能，並透過安全的後端串接 CometAPI，附帶實作寫作助理教學。
先用這個摘要快速掌握答案，再閱讀指南取得背景、範例與實作細節。
from openai import OpenAI
client = OpenAI(
api_key="YOUR_COMETAPI_KEY",
base_url="https://api.cometapi.com/v1",
)
response = client.chat.completions.create(
model="gpt-5-mini",
messages=[{"role": "user", "content": "Build this workflow."}],
)
print(response.choices[0].message.content)TL;DR
Lovable 是一個由 AI 驅動的開發平台，能將自然語言指令轉為可編輯的 Web 應用程式程式碼。它協助創業者、設計師、產品團隊與開發者，透過迭代式對話建立介面、連接後端服務並發佈應用程式。本指南說明其能力、專案架構，以及一個將 CometAPI 整合進寫作助理的實作範例。該整合為你建立的應用程式新增模型推理能力；它不提供取代 Lovable 自身程式碼代理的方式。讀者在實作前應理解基本的 HTTP 請求與 JavaScript，並擁有一個 Lovable 專案與一個 CometAPI 帳戶。
Key Takeaways
AI 驅動開發：使用自然語言提示產生並迭代優化應用程式。
全端能力：建構前端體驗與後端函式、資料庫、身份驗證與託管。
現代架構：自 2026 年 5 月起，新建 Lovable 專案採用基於 React 的 TanStack Start 與 SSR。
CometAPI 相容性：透過安全的後端函式新增外部模型推理。
最佳使用情境：MVP、AI 助理、內部工具、內容應用與客戶入口。
What Is Lovable and How Does It Work?
Lovable
你在聊天介面描述需求，它會產生可運作的應用程式，包含：
前端（通常使用 React、TypeScript、Tailwind CSS）
後端、資料庫、身份驗證與儲存（透過內建的 Lovable Cloud，基於受管的 Supabase）
整合、部署，以及你擁有的可編輯程式碼
它支援從原型到部署的完整產品生命週期，並可將程式碼同步至 GitHub、GitLab 或 Bitbucket。目標族群包括想快速前進且保有程式碼所有權的創業者、產品經理、非開發者與團隊。它源自開源的 GPT Engineer 專案（由 Anton Osika 與 Fabian Hedin 於 2023 年在斯德哥爾摩創立），後來以 Lovable 品牌商業化。
How Lovable Turns Prompts Into Applications
描述應用程式的使用者、頁面、功能與商業規則。
產生第一版應用並檢視預覽。
連接資料庫、登入、付款或外部 API。
測試行為並微調程式碼、設計與流程。
發佈或持續維護匯出的應用程式碼。
Lovable 的2026 年 6 月 1 日工程文章 說明自 2026 年 5 月 13 日起，新專案遷移至基於 React 的 TanStack Start 與伺服器端渲染。現有的 React + Vite 專案則維持既有架構；在選擇伺服器函式或 Edge Function 實作前，請先檢視實際專案。
Lovable Technical Specifications 類別 AI 驅動的 Web 應用程式建置工具 主要互動方式 自然語言提示 新專案的框架 React 與 TanStack Start 渲染 新專案使用伺服器端渲染 早期架構 React + Vite 後端 Lovable Cloud 與受支援的整合 身份驗證與資料庫 受支援 外部 API 連接器與自訂 API 請求 AI 整合 Lovable AI 與外部模型 API 程式碼存取 產生的程式碼與 GitHub 工作流程 協作 工作區與專案功能 部署 內建與受支援的外部選項
Lovable 是一個應用程式開發平台，而非基礎模型。因此，參數、上下文視窗、token 吞吐量與 MMLU 分數並不描述 Lovable 本身；這些屬於參與開發或推理的特定 AI 模型。
可以——在使用 Lovable 產生的應用程式內。CometAPI 可以從受保護的後端函式處理模型請求。這與更換支援 Lovable 自身程式碼代理的 LLM 是不同的概念。
你可以在 Lovable 建立的應用程式中整合 CometAPI，只要所選模型與介面受支援即可。
這並不表示你可以直接取代 Lovable 自身所使用的開發代理模型。
若你的目標是控制應用程式所呼叫的模型，應在你自己的伺服器端程式碼內設定模型路由。
產生的應用中的 AI 功能 Yes 受保護的伺服器端 API 請求 聊天機器人或寫作助理 Yes 呼叫受支援的 CometAPI 聊天模型 多模型應用 Yes 在後端路由設定模型 ID 取代 Lovable 內部程式碼模型 Not established as a standard setting 內部代理模型的選擇是分離處理的 透過 CometAPI 的後端服務 Yes 自訂 HTTP 或伺服器函式整合 Lovable 工作區管理 API Separate 控制平台資源，非模型推理
Lovable 的內部模型協調說明 描述其開發代理如何路由。以下的 CometAPI 整合針對應用程式推理；本文並未宣稱存在用於該內部代理的 CometAPI 設定。
Lovable 對你建立的應用程式，提供兩種主要方式支援此整合：
Secrets（建議直接使用）
將你的 CometAPI 金鑰儲存為專案機密（例如 COMETAPI_KEY 或 OPENAI_API_KEY）。在專案聊天中請求 Lovable 透過安全的 Edge Function 整合該 API。金鑰僅留在伺服器端，絕不暴露於瀏覽器。
自訂連接器
在工作區的 Connectors 目錄中建立自訂連接器。設定基底 URL（https://api.cometapi.com/v1）、驗證方式（Bearer token 或自訂標頭），接著新增一個連線並貼上你的 CometAPI 金鑰。請求將經由 Lovable 的連接器閘道傳遞，憑證保持加密且不出現在你的程式碼中。
Lovable 內建的應用程式 AI 功能使用 Lovable 自行管理的金鑰，並消耗工作區點數。你無法將其換成 CometAPI（或其他供應商）的金鑰。
對於應用內部的外部 AI 呼叫（聊天、生成等），使用 secrets 或自訂連接器的方法可行，並將用量計費至你的 CometAPI 帳戶而非 Lovable 點數。
依最新文件，Lovable 的連接器目錄內沒有原生/預建的 CometAPI 支援；你可將其設為通用的 OpenAI 相容或自訂 API 整合。
總之：Lovable 是出色的「vibe-coding」/ 從提示到全端應用的建置器，而且是的——你可以為自己建立的應用程式安全地設定並使用 CometAPI 金鑰以實作 AI 功能。
瀏覽器將輸入傳送至應用程式後端。後端讀取機密、呼叫 CometAPI 並返回結果。切勿將私人 API 金鑰放入 React 元件或其他客戶端程式碼。
以下範例將建立 SmartWrite，一個具備文字輸入、語氣選擇與伺服器端 CometAPI 請求的 AI 寫作助理。對於較新的專案，選擇 TanStack 邊界模式；對於較舊的專案，使用完整的 Supabase Edge Function 進入點。請選擇與你的專案相符的一種後端實作，設定其機密，並確認你的 CometAPI 帳戶中有支援的聊天模型。在發佈前，請以你自己的專案機密與可用的聊天模型，執行並驗證範例。
Step 1: Create a Lovable Project Build a responsive AI writing assistant named SmartWrite.
Include a dashboard, a large prompt box, a tone selector
(Professional / Friendly / Concise), a Generate button,
and an output panel with Copy and Clear controls.
Use a clean responsive design with loading states and errors.
Implement AI generation only through a secure server function.
Never expose API credentials to the frontend.
Do not ship mock AI responses.
在你的 CometAPI 帳戶產生金鑰，並確認該帳戶可用的聊天模型 ID。本教學採用直接後端整合，使用伺服器端設定的 COMETAPI_API_KEY 與 COMETAPI_MODEL。請遵循你所產生後端所支援的機密取用機制。
若要安全地連接 CometAPI，請請求 Lovable 建立一個伺服器端整合，並透過其安全的輸入表單要求 API 金鑰。你也可以在「More → Settings → Secrets」中管理專案機密。對於外部的 Supabase 後端，請改在 Supabase 設定機密。參見 Lovable Secrets 官方指南 。
只在伺服器端儲存與讀取 API 金鑰。透過專案的安全 Secrets 介面新增 COMETAPI_API_KEY。僅從伺服器端機密或執行期綁定讀取它。切勿將金鑰包含於前端程式碼、可由瀏覽器存取的環境變數、聊天訊息或螢幕截圖。
將 API 設定排除於前端請求之外。於伺服器端使用已驗證的 CometAPI 模型 ID 設定 COMETAPI_MODEL。前端僅應傳送 prompt 與 tone。對照允許欄位驗證請求，並拒絕非預期的屬性，包括 config、apiKey 與 model。切勿允許客戶端提供任意 API 金鑰或覆寫伺服器端模型設定。
使用適合執行環境的機密存取方式。實作必須符合專案實際的後端環境。Worker 型部署使用注入的綁定，而 Supabase Edge Functions 可透過 Deno.env 取用機密。不要假設 process.env、Deno.env 與 Worker 綁定可互換。實作 API 處理器前請先確認機密如何被注入。
發佈後驗證機密保護。檢視正式版的 JavaScript bundle、瀏覽器 DevTools Network 面板與應用程式日誌。確認 API 金鑰未出現在用戶端資產、請求內容、回應、URL 或日誌中。同時確認 CometAPI 請求在伺服器上執行，且未授權的設定覆寫被拒絕。
儲存機密並不代表整合即安全或可用。只有當伺服器端 API 呼叫正常工作、客戶端請求無法覆寫受保護設定，且正式版檢查確認憑證仍保持私密時，整合才算就緒。
請使用下方架構圖來辨識前端到後端的邊界，以及受保護憑證的位置。該圖為概念示意，並非 Lovable 設定介面的截圖。
Prompt to give Lovable Connect SmartWrite directly to CometAPI through an authenticated backend function. Ask me for COMETAPI_API_KEY in a secure secret form and use COMETAPI_MODEL for the exact model ID I provide. Send POST requests to https://api.cometapi.com/v1/chat/completions from the server only. Accept prompt and tone, validate them, enforce per-user limits, and return only the generated text to the frontend. Use the backend runtime already present in this project. Do not put credentials in chat, frontend code, or browser requests. Do not generate mock success results. Explain how to test the integration and show sanitized errors when it fails.
Lovable 亦支援受管的自訂連接器。此處的說明刻意採用其API 整合指南 所記錄的直接整合路徑，以便與下方的伺服器端協助工具一致。
在受信任的 Bash 終端機中，於本機設定 COMETAPI_API_KEY 與 COMETAPI_MODEL，接著測試 POST https://api.cometapi.com/v1/chat/completions. CometAPI 的官方請求指南 記載了基底 URL、Bearer 驗證與聊天回應格式。請選擇支援此端點的模型；相容性並不保證每個供應商的全部功能或參數皆可用。
# Set COMETAPI_API_KEY securely in this terminal before running.
# Replace the model value with a chat model verified in your account.
export COMETAPI_MODEL="YOUR_VERIFIED_CHAT_MODEL_ID"
: "${COMETAPI_API_KEY:?Set COMETAPI_API_KEY first}"
curl --fail-with-body --max-time 45 \
https://api.cometapi.com/v1/chat/completions \
-H "Authorization: Bearer $COMETAPI_API_KEY" \
-H "Content-Type: application/json" \
--data "$(printf '{"model":"%s","messages":[{"role":"user","content":"Write a customer welcome email."}],"stream":false}' "$COMETAPI_MODEL")"
檢查點：成功回應會包含 choices[0].message.content。若驗證失敗或模型不可用，請先修正該問題再接上使用者介面。請勿在診斷截圖中貼上完整憑證或私人提示。
新專案（TanStack Start）：使用 createServerFn 處理伺服器端的 API 請求。
舊版 React + Vite 專案：使用 Supabase Edge Functions 進行伺服器端 API 呼叫。
Option A: TanStack Start（新專案）
建立 src/server/writing.functions.ts：
import { createServerFn } from "@tanstack/react-start";
export const generateWriting = createServerFn({ method: "POST" })
.handler(async ({ data }: { data: { prompt: string } }) => {
const { env } = await import("cloudflare:workers");
const res = await fetch(
"https://api.cometapi.com/v1/chat/completions",
{
method: "POST",
headers: {
Authorization: `Bearer ${env.COMETAPI_API_KEY}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
model: env.COMETAPI_MODEL,
messages: [{ role: "user", content: data.prompt }],
}),
}
);
if (!res.ok) throw new Error("Generation failed.");
const result = await res.json();
return { text: result.choices[0].message.content };
});
將 COMETAPI_API_KEY 與 COMETAPI_MODEL 儲存為伺服器端 Worker 綁定。若你的部署使用其他轉接器，請使用其支援的機密存取機制。
Option B: React + Vite（舊專案）
建立 supabase/functions/generate-writing/index.ts：
import { serve } from "https://deno.land/std@0.224.0/http/server.ts";
serve(async (req) => {
try {
const { prompt } = await req.json();
if (typeof prompt !== "string" || !prompt.trim()) {
return Response.json({ error: "Invalid prompt" }, { status: 400 });
}
const res = await fetch(
"https://api.cometapi.com/v1/chat/completions",
{
method: "POST",
headers: {
Authorization: `Bearer ${Deno.env.get("COMETAPI_API_KEY")}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
model: Deno.env.get("COMETAPI_MODEL"),
messages: [{ role: "user", content: prompt }],
}),
}
);
if (!res.ok) throw new Error("CometAPI request failed.");
const result = await res.json();
return Response.json({ text: result.choices[0].message.content });
} catch {
return Response.json({ error: "Generation failed." }, { status: 500 });
}
});
將 COMETAPI_API_KEY 與 COMETAPI_MODEL 加入 Supabase 專案機密，然後部署該函式。
在兩種作法中，都務必將 API 憑證保留於伺服器端。正式環境的應用亦應實作身份驗證、輸入驗證與每位使用者的用量限制。
Step 5: Connect the Lovable Interface
TanStack Start client import { generate } from "./server/writing.functions";
const { text } = await generate({ data: { prompt, tone } });
// Render text as text content, not as trusted HTML.
React + Vite client // Use the existing, signed-in Supabase client generated for your project.
const { data, error } = await supabase.functions.invoke("generate-writing", {
body: { prompt, tone },
});
if (error) throw new Error("Generation failed. Please try again.");
const text = data.text;
請使用與你所選分支相配的用戶端。TanStack 使用其產生的 RPC 端點；Supabase 使用已部署的 generate-writing 函式。兩者皆不需要另行建立 /api/generate 路由。瀏覽器可能會傳送應用程式的工作階段權杖以供身份驗證，但絕不可傳送私人 CometAPI 憑證或設定物件。請在介面中顯示載入、失敗與重試狀態。
Step 6: Test and Publish the Application 發佈後，請測試實際的線上網址，而非只依賴編輯器預覽。使用私人測試憑證，並確保截圖與證據不含機密值。在更廣泛開放前，完成以下檢查：
檢視建置後的瀏覽器 JavaScript、來源對映與公開設定中是否存在私人 CometAPI 金鑰。請在本機搜尋，避免將金鑰印出於共享的終端輸出或存入報告。僅有變數名稱並不代表值已外洩。
檢視瀏覽器的 Network 請求（包含有效載荷、標頭與錯誤回應）。請求僅應包含允許的寫作輸入與應用程式的身份驗證資料；私人 CometAPI 的 Authorization 標頭只應存在於伺服器到供應商的請求中。
檢閱函式日誌、應用程式日誌、監控追蹤與錯誤報告。不要記錄金鑰、Bearer 權杖、設定物件或完整的上游錯誤本文。一旦金鑰外洩，請註銷並更換，並在重測前移除外洩來源。
嘗試在登出與工作階段過期狀態下的請求；在呼叫供應商前兩者都必須被拒絕。以額外欄位提交 apiKey、config 或 model 並確認遭拒。測試空白與超長提示、無效的語氣、供應商失效，以及你部署的每位使用者配額。
確認於已登入狀態下的有效請求，能以你選定的模型產生文字。記錄部署版本與去識別化的通過/失敗結果；範例本身不代表你的部署已通過這些檢查。
AI 寫作助理 草擬與改寫內容 語氣選擇、範本、編輯器 文件摘要器 摘要抽取的文字 上傳、文件問答、重點整理 客戶支援服務台 分類與草擬回覆 工單分流、建議回覆 商業分析助理 解釋商業資料 KPI 儀表板、自然語言洞察
一般提示會產生可閱讀的模型回應。
會安全地拒絕空白與超長提示。
API 憑證不會出現在瀏覽器的網路面板。
模型中斷會回傳不含敏感資訊的錯誤訊息。
已驗證使用者具備請求限制與活動監控。
版面在桌面與行動裝置上表現正常。
這些是建議的專案模式，並非對已完成或經獨立評測部署的主張。
FAQ
多租戶應用應如何防止某租戶的資料出現在另一租戶的 AI 回應中？ 從已驗證的伺服器工作階段推導租戶與使用者身分，並在組裝模型上下文前，將每次資料庫查詢限定在該範圍內。切勿信任由瀏覽器提供的租戶 ID，或指望在提示中下指令來強制存取控制。若受支援，請在資料庫層加入列層級政策，並用兩個測試帳戶驗證。請檢查記錄 ID、搜尋結果、匯出檔案與對話歷史是否有跨租戶存取。這是應用程式設計建議；產生的程式碼與平台掃描並不保證該政策正確。
何時應使用檢索增強生成，而非在每次提示中直接放入文件？ 當文件集合過大以致無法每次都傳送、變更頻繁或需要來源層級可追溯性時，使用檢索更合適。解析與索引文件、檢索少量相關內容，並在答案中附上來源識別。檢索仍需評估：流暢的答案可能會引用不相關的段落。請在檢索查詢中保留存取過濾，並測試那些實際缺少答案的問題。對於小型且穩定的文件，直接上下文可能是更簡單的起點。
如何在不顯示破碎或誤導回應的情況下加入串流？ 將串流視為獨立的傳輸功能，而非僅僅把 stream: false 改個一行。確認所選模型的串流格式，讓後端轉接事件，並在 UI 處理部分區塊、取消、逾時與連線中斷。將被中斷的回應標記為未完成，讓使用者有意識地重試。避免將串流文字當作信任的 HTML 顯示。請在實際發佈的託管路徑測試，因為中間層可能會緩衝在本機看似可行的串流。
切換到其他模型前，備援策略應檢查什麼？ 定義哪些失敗情況值得重試或備援，並確認替代模型支援相同端點、指令、工具結構與輸出格式。限制重試次數，避免在需要一致行為的工作流程中靜默更換模型。對具代表性的提示執行備援評估，包括拒絕與格式錯誤的案例。若模型輸出會觸發外部動作，請以獨立確認或冪等等級保護該動作，避免重試導致重複執行。
將 AI 功能由試點轉為常態使用前，團隊應保留哪些證據？ 保留具版本的評估集，含預期行為、模型與提示設定、去識別化的請求中繼資料，以及失敗案例紀錄。定義事實正確性、回應結構、延遲與存取邊界的驗收準則；在模型或提示變更後比較結果。對敏感輸入，先決定可傳輸與可保留的內容，再啟用該功能。這些是工程控管建議，並非聲稱 Lovable 或 CometAPI 可保證特定法規結果。
Conclusion: Is Lovable Worth Using? Lovable 讓你更容易將點子轉化為可運作的 Web 應用程式。其全端工具與外部整合，特別適合快速驗證產品概念。CometAPI 為聊天、寫作、分析與其他 AI 工作流程提供彈性的模型推理路徑。
從一個小而安全的應用程式開始，測試 CometAPI 連線，檢視產生的程式碼，並在核心體驗證實穩定後再擴充。
