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
Home Blog Lovable と CometAPI を使って AIアシスタントを構築する
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 は、自然言語の指示を編集可能な Web アプリケーションのコードに変換する AI 搭載の開発プラットフォームです。創業者、デザイナー、プロダクトチーム、開発者が、反復的な会話を通じてインターフェースを構築し、バックエンドサービスを接続し、アプリケーションを公開できるよう支援します。本ガイドは、その機能、プロジェクト構成、およびライティングアシスタント向けの実践的な 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（lovable.dev）は、自然言語を用いて本番品質のフルスタック Web アプリケーションを構築するための AI 搭載プラットフォームです。その
明確性、出典の帰属、最新のAPI用語について確認済みです。
チャットインターフェースで望む内容を記述すると、次の要素を備えた動作するアプリを生成します:
フロントエンド（主に React、TypeScript、Tailwind CSS）
バックエンド、データベース、認証、ストレージ（管理型 Supabase である Lovable Cloud を内蔵）
連携、デプロイ、そしてあなたが所有する編集可能なコード
プロトタイピングからデプロイまでの製品ライフサイクル全体をサポートし、GitHub、GitLab、Bitbucket にコードを同期できます。創業者、プロダクトマネージャー、非開発者、そしてコード所有権を保持しつつ迅速に動きたいチームを対象としています。これは、2023 年に Anton Osika と Fabian Hedin によってストックホルムで創設されたオープンソースの GPT Engineer プロジェクトに端を発し、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 はアプリケーション開発プラットフォームであり、基盤モデルではありません。したがって、パラメータ、コンテキストウィンドウ、トークンスループット、MMLU スコアは Lovable 自体を記述するものではありません。これらは、開発または推論で使用される特定の AI モデルに属します。
はい—Lovable で生成したアプリケーション内で可能です。CometAPI は、保護されたバックエンド関数からのモデルリクエストを処理できます。これは、Lovable 自身のコーディングエージェントを支える LLM を変更することとは別の話です。
Lovable で構築したアプリケーションに CometAPI を統合できます。選択したモデルとインターフェースがサポートされている必要があります。
これは、Lovable 自体で使用される開発用プロキシモデルを直接置き換えられることを意味しません。
アプリケーションが呼び出すモデルを制御したい場合は、サーバー側コード内でモデルルーティングを構成してください。
生成アプリ内の AI 機能 はい 保護されたサーバー側 API リクエスト チャットボットまたはライティングアシスタント はい サポートされる CometAPI のチャットモデルを呼び出し マルチモデルアプリ はい バックエンドのルーティングでモデル ID を構成 Lovable 内部のコーディングモデル置換 標準設定としては未確立 内部エージェントのモデル選択は別管理 CometAPI を通じたバックエンドサービス はい カスタム HTTP またはサーバー関数による統合 Lovable ワークスペース管理 API 別系統 プラットフォームリソースの管理であり、推論ではない
Lovable の内部モデルオーケストレーションの説明 は、開発エージェントのルーティング方法を解説しています。以下の CometAPI 連携はアプリケーションの推論に関するものであり、内部エージェント向けの CometAPI 設定が文書化されていると主張するものではありません。
Lovable は、あなたが構築するアプリにおいて主に次の 2 つの方法でこれをサポートします:
Secrets（ダイレクト利用に推奨）
CometAPI キーをプロジェクトのシークレット（例: COMETAPI_KEY または OPENAI_API_KEY）として保存します。プロジェクトチャットで Lovable に依頼し、安全な Edge Function を通じて API を統合します。キーはサーバー側に留まり、ブラウザには露出しません。
Custom connector
ワークスペースの Connectors カタログでカスタムコネクタを作成します。ベース URL（https://api.cometapi.com/v1）、認証（Bearer トークンまたはカスタムヘッダー）を設定し、CometAPI キーを貼り付けて接続を追加します。リクエストは Lovable のコネクタゲートウェイを通過し、資格情報は暗号化されコード外に保たれます。
アプリ向けの Lovable の組み込み AI 機能は、Lovable が管理するキーを使用し、ワークスペースのクレジットを消費します。これらを CometAPI（または他プロバイダ）のキーに差し替えることはできません。
あなたのアプリ内での外部 AI 呼び出し（チャットボット、生成など）については、Secrets またはカスタムコネクタのアプローチが機能し、課金は Lovable のクレジットではなくあなたの CometAPI アカウントに行われます。
最新ドキュメントの時点で、Lovable のコネクタカタログに CometAPI のネイティブ／プリセット対応は確認されていません。OpenAI 互換またはカスタム API 連携として設定してください。
要するに: Lovable は「バイブ・コーディング」／プロンプトからフルスタックアプリへと強力に導くビルダーであり、はい—作成したアプリ内の AI 機能において CometAPI キーを安全に構成・使用できます。
ブラウザは入力をアプリケーションのバックエンドへ送信します。バックエンドはシークレットを読み取り、CometAPI を呼び出して結果を返します。秘密の API キーを React コンポーネントやその他のクライアントサイドコードに置かないでください。
以下の例では、SmartWrite という AI ライティングアシスタントを構築します。テキスト入力、トーン選択、サーバーサイドの CometAPI リクエストを備えます。新しいプロジェクトでは TanStack の境界パターンを、古いプロジェクトでは Supabase Edge Function のエントリポイントを選択します。プロジェクトに合うバックエンド実装を 1 つ選び、シークレットを構成し、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 キーはサーバー上でのみ保存・読み取りすること。COMETAPI_API_KEY をプロジェクトの安全な Secrets インターフェースから追加し、サーバー側のシークレットまたはランタイムバインディングからのみ読み取ります。フロントエンドコード、ブラウザで参照可能な環境変数、チャットメッセージ、スクリーンショットにキーを含めないでください。
フロントエンドリクエストに API 構成を入れないこと。検証済みの CometAPI モデル ID を用いてサーバーで COMETAPI_MODEL を構成します。フロントエンドは prompt と tone のみを送信し、許可されたフィールドに対してリクエストを検証し、config、apiKey、model を含む不正なプロパティは拒否します。クライアントが任意の API キーを提供したり、サーバー側モデル設定を上書きすることを決して許可しないでください。
ランタイムに応じた正しいシークレットアクセス方法を使うこと。実装は実際のバックエンド環境に一致させてください。Worker ベースのデプロイでは注入されたバインディングを使用し、Supabase Edge Functions は Deno.env からシークレットにアクセスできます。process.env、Deno.env、Worker バインディングが相互に互換であると仮定しないでください。API ハンドラを実装する前に、シークレットの注入方法を確認してください。
公開後にシークレット保護を検証すること。本番の JavaScript バンドル、ブラウザの DevTools の Network パネル、アプリケーションログを確認します。API キーがクライアントサイドのアセット、リクエストのペイロード、レスポンス、URL、ログに現れないことを確かめてください。また、CometAPI リクエストがサーバー上で実行され、未承認の構成上書きが拒否されることを確認してください。
保存したシークレットがあるからといって、連携が自動的に安全・機能的になるわけではありません。サーバー側の API 呼び出しが動作し、クライアントリクエストで保護された設定を上書きできず、本番チェックで資格情報が非公開のままであることが確認できて初めて、連携の準備が整ったと言えます。
次のアーキテクチャ図を使って、フロントエンドからバックエンドへの境界と、保護された資格情報の位置を把握してください。図は概念図であり、Lovable の設定画面のスクリーンショットではありません。
Prompt to give Lovable SmartWrite を CometAPI に直接接続してください。認証付きのバックエンド関数経由で行います。安全なシークレットフォームで COMETAPI_API_KEY を尋ね、私が指定する正確なモデル ID を COMETAPI_MODEL として使用してください。https://api.cometapi.com/v1/chat/completions に対する POST リクエストはサーバーからのみ送信します。prompt と tone を受け付け、それらを検証し、ユーザーごとの制限を適用し、生成されたテキストのみをフロントエンドに返してください。このプロジェクトですでに使用しているバックエンドランタイムを使ってください。資格情報をチャット、フロントエンドコード、またはブラウザのリクエストに含めないでください。モックの成功結果を生成しないでください。連携のテスト方法を説明し、失敗時にはサニタイズされたエラーを表示してください。
Lovable はマネージドのカスタムコネクタもサポートしています。本手順は意図的に API integration guide に記載のダイレクト連携ルートを使用しており、以下のサーバーサイドヘルパーと一致します。
信頼できる Bash ターミナルから COMETAPI_API_KEY と COMETAPI_MODEL をローカルに設定し、https://api.cometapi.com/v1/chat/completions. に対する POST をテストします。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 が含まれます。認証に失敗したりモデルが利用できない場合は、ユーザーインターフェースに接続する前にそれを修正してください。資格情報全体や秘密のプロンプトを診断用スクリーンショットに貼り付けないでください。
Lovable は 2 つのバックエンドアーキテクチャをサポートしています:
新規プロジェクト（TanStack Start）: createServerFn を使用してサーバー上で API リクエストを処理
旧 React + Vite プロジェクト: Supabase Edge Functions を使用してサーバーサイド API 呼び出しを実行
あなたのプロジェクトに合致する実装を選択してください。
Option A: TanStack Start (New Projects)
Create 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 (Older Projects)
Create 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 });
}
});
Supabase プロジェクトのシークレットに COMETAPI_API_KEY と COMETAPI_MODEL を追加し、関数をデプロイします。
どちらのアプローチでも、API 資格情報はサーバーに留めてください。本番アプリケーションでは、認証、入力検証、ユーザーごとの使用制限も実装する必要があります。
Step 5: Connect the Lovable Interface import { generate } from "./server/writing.functions";
const { text } = await generate({ data: { prompt, tone } });
// Render text as text content, not as trusted HTML.
// 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 公開後は、エディタのプレビューだけでなく実際の公開 URL でテストしてください。秘密のテスト用資格情報を使用し、スクリーンショットや証跡に秘密の値を含めないでください。一般公開前に次のチェックを完了します:
ビルド済みのブラウザ用 JavaScript、ソースマップ、公開設定を検査し、秘密の CometAPI キーが含まれないことを確認します。共有ターミナル出力にキーを表示したり、レポートに保存したりせずにローカルで検索します。変数名があるだけでは流出の証拠になりません。
ブラウザの Network リクエストを検査し、ペイロード、ヘッダー、エラーレスポンスを含めて確認します。リクエストには許可されたライティング入力とアプリの認証データのみが含まれるべきであり、秘密の CometAPI の Authorization ヘッダーはサーバーからプロバイダへのリクエストだけに存在します。
関数ログ、アプリケーションログ、モニタリングのトレース、エラーレポートを確認します。キー、ベアラートークン、構成オブジェクト、上流のエラーボディ全体を記録しないでください。キーが露出した場合は無効化・交換し、露出を解消してから再テストします。
サインアウト状態やセッション切れのリクエストを試し、プロバイダ呼び出し前に拒否されることを確認します。apiKey、config、model を追加フィールドとして送信して拒否されるかを検証します。空や過大なプロンプト、無効なトーン、プロバイダ障害、デプロイ済みのユーザーごとのクォータもテストします。
有効なサインイン済みリクエストが、選択したモデルでテキストを生成することを確認します。デプロイのバージョンやサニタイズ済みの合否結果を記録します。ここでの例は、あなた自身のデプロイがこれらのチェックを通過したことを示すものではありません。
AI ライティングアシスタント コンテンツの下書き・書き直し トーン選択、テンプレート、エディタ ドキュメント要約 抽出テキストの要約 アップロード、ドキュメント Q&A、要点整理 カスタマーサポートデスク 分類と返信案の生成 チケット振り分け、返信候補 ビジネス分析アシスタント ビジネスデータの説明 KPI ダッシュボード、自然言語インサイト
通常のプロンプトで読みやすいモデル応答が得られます。
空や過大なプロンプトは安全に拒否されます。
API 資格情報はブラウザのネットワークパネルに一切表示されません。
モデル障害時は機密情報を含まないエラーメッセージを返します。
認証済みユーザーにはリクエスト制限とアクティビティ監視があります。
レイアウトはデスクトップとモバイルの両方で正しく動作します。
これらは推奨されるプロジェクトパターンであり、完成済みや独自ベンチマーク済みのデプロイを主張するものではありません。
FAQ
マルチテナントアプリで、ある顧客のレコードが別の顧客の AI 応答に出ないようにするには？ 検証済みサーバーセッションからテナントおよびユーザーのアイデンティティを導出し、モデルコンテキストを組み立てる前にあらゆるデータベース参照をスコープします。ブラウザから渡されたテナント ID を信頼したり、アクセス制御をプロンプト指示に依存したりしないでください。サポートされる場合は行レベルのデータベースポリシーを追加し、2 つのテストアカウントで検証します。レコード ID、検索結果、エクスポートファイル、会話履歴について、テナント間アクセスがないかを確認してください。これはアプリ設計上の推奨であり、生成コードやプラットフォームスキャンがポリシーの正しさを保証するものではありません。
取得強化型生成（RAG）は、いつドキュメントを毎回プロンプトに直接入れる方法より適していますか？ ドキュメント集合が毎回送るには大きすぎる、頻繁に更新される、またはソースレベルのトレーサビリティが必要な場合は、取得を使用します。ドキュメントを解析・インデックス化し、関連する少量を取得して、答案にソース識別子を付与します。取得にも評価は必要です。流暢な回答でも無関係な箇所を引用することがあります。取得クエリにアクセスフィルタを入れ、答えが存在しない質問もテストしてください。小規模で安定したドキュメントであれば、直接コンテキストの方が簡単な出発点になり得ます。
誤解を招く壊れたレスポンスを表示しないために、ストリーミングはどう追加すべきですか？ ストリーミングを 1 行の stream: false の置換ではなく、独立したトランスポート機能として扱います。選択したモデルのストリーミング形式を確認し、バックエンドでイベントを中継し、部分チャンク、キャンセル、タイムアウト、接続喪失を UI で扱います。中断された応答は不完全と明示し、ユーザーが意図的に再試行できるようにします。ストリームされたテキストを信頼済み HTML として表示するのは避けてください。公開ホスティングパスでテストしてください。中間経路がローカルでは動作していたストリームをバッファリングする場合があります。
フォールバックポリシーは、別モデルに切り替える前に何を確認すべきですか？ どの失敗で再試行やフォールバックを正当化するかを定義し、代替モデルが同じエンドポイント、指示、ツールスキーマ、出力形式をサポートするか確認します。再試行は制限し、挙動の一貫性が必要なワークフローで黙ってモデルを切り替えないでください。拒否や不正形式の出力ケースを含む代表的なプロンプトでフォールバックを評価します。モデル出力が外部アクションを引き起こす場合は、そのアクションを別の確認または冪等性ルールで保護し、再試行による生成で同じ操作が繰り返されないようにします。
パイロットから通常運用へ AI 機能を昇格する前に、チームはどのような証拠を保持すべきですか？ 期待される挙動を含むバージョン管理された評価セット、モデルとプロンプト構成、編集済みのリクエストメタデータ、失敗事例の記録を保持します。事実性、応答形状、レイテンシ、アクセス境界の受け入れ基準を定義し、モデルやプロンプトの変更後に結果を比較します。機微な入力については、機能を有効にする前に、何を送信・保持できるかを決めておきます。これらは推奨されるエンジニアリング管理であり、Lovable や CometAPI が特定の規制上の結果を保証するという主張ではありません。
Conclusion: Is Lovable Worth Using? Lovable は、アイデアを機能する Web アプリケーションへと変換する作業を容易にします。フルスタックのツール群と外部連携は、プロダクトコンセプトを迅速に検証するのに特に有用です。CometAPI は、チャット、ライティング、分析などの AI ワークフローに柔軟な推論経路を追加します。
小規模で安全なアプリケーションから始め、CometAPI 接続をテストし、生成されたコードをレビューし、コア体験の信頼性が確認できたら拡張していきましょう。
