__CAPGO_KEEP_0__

Lovable vibe coding to mobile

Lovable vibe codingを実際のモバイルアプリに変える

Lovableでは、製品アイデアをスクリーンに表示することができます。デモ後、ネイティブシェル、署名、ストアビルド、ポストラウンドフィックスのリスクが生じます。Capgoは、AIで作成されたアプリにモバイルリリースシステムを提供し、実際のユーザーに耐えるようにします。

1つのGitリポジトリ
LovableからWebアプリのソース
iOS + Android
ネイティブターゲットとCapacitor
OTAチャンネル
ポストラウンドアップデートパス

Lovableプロジェクト

AIを活用したプロンプトと視覚編集で、ウェブアプリを迅速に設計・実験してください。

エクスポートして Wrap

Capacitor モバイルシェル

Export to GitHub, add Capacitor, and keep the web app as the product source.

ビルドして更新

Capgo リリースループ

ネイティブバイナリをビルドして、ストアで安全にウェブアップデートを公開し、リリース後も改善を続けます。

問題

Vibe コーディングでアイデアを実現します。モバイルにはリリースシステムが必要です。

プロトタイプはブラウザで止まります。

愛されるプロジェクトはまだウェブアプリです。ユーザーはインストール可能なアプリ、アイコン、パーミッション、オフライン動作、ディープリンク、ネイティブシェルが必要です。

ネイティブリリース作業はVibe コーディングでなくされます。

AIはスクリーンを迅速に生成できますが、iOS署名、Androidキーストア、App Store Connect、ネイティブプロジェクト、およびストアのアップロードには正しいパイプラインが必要です。

ストアビルド後、繰り返しは遅くなります。

最初のバイナリはただの始まりです。オンボーディングの調整、価格のコピーの変更、またはバグの修正は、また別のフルアプリのレビューを待つ必要はありません。

例のスタック

Lovableがアプリをエクスポートした後、実際に何が起こるのか

Lovableは、ウェブエクスペリエンスを迅速に作成することを最も適している: フロー、スクリーン、コピー、Supabaseのワイヤリング、およびネイティブの作業が始まる前に製品のイテレーション

ウェブアプリをネイティブシェルに変換する

__CAPGO_KEEP_0__は真実の源となります。__CAPGO_KEEP_1__はウェブ出力をネイティブのiOSおよびAndroidプロジェクトに包み込み、App ID、アイコン、スプラッシュスクリーン、およびパーミッションを含めます。

GitHub becomes the source of truth. Capacitor wraps the web output into native iOS and Android projects with app identity, icons, splash screens, and permissions.

__CAPGO_KEEP_0__は署名されたバイナリを生成し、ストアの承認後もUIの修正、コピーの変更、オンボーディングの調整、およびアセットの移動が可能です。

Capgo builds the signed binaries, then live updates keep UI fixes, copy changes, onboarding tweaks, and assets moving after store approval.

__CAPGO_KEEP_0__

The practical command path

A typical Lovable project becomes mobile when the generated web app is exported to GitHub, made static-build friendly, wrapped with Capacitor, then built and updated through Capgo.

# From the GitHub repo exported by Lovable
npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android
npx cap init "Your Lovable App" "com.company.app"
npx cap add ios
npx cap add android

# Build web output, sync native projects, and ship updates
npm run build
npx cap sync
npx @capgo/cli@latest init
npx @capgo/cli@latest bundle upload --channel production

# When you need a signed binary
npx @capgo/cli@latest build init --platform ios
npx @capgo/cli@latest build request --platform ios

Lovable AIの質問

Lovable内でモバイルリリース設定を開始

Lovableにこの内容を貼り付けてください。Webアプリが動作する後、エージェントにMCPのオンボーディングパスでCapacitorとCapgoを準備するように指示します。

Lovable AIの質問

I want this Lovable project to become a Capacitor mobile app using Capgo from the start.

Set up the project so an AI agent can use Capgo's MCP release tools through install-mcp:

1. Install the Capgo CLI MCP server for the active AI client. For Codex, run:
   - npx @capgo/cli@latest login
   - npx install-mcp 'npx @capgo/cli@latest mcp' --client codex
   Replace codex with cursor, claude-code, gemini-cli, or windsurf if that is the client this project uses.
2. Read Capgo's public MCP metadata when tool details are needed:
   - https://capgo.app/.well-known/mcp/server-card.json
   - https://capgo.app/.well-known/agent-skills/capgo-cli-mcp/SKILL.md
3. Add a short docs/agent-mobile-release.md file that tells the agent to use the Capgo CLI MCP server as a local stdio server, not a remote HTTP endpoint.
4. Add Capacitor for iOS and Android using the package manager already used by this project.
5. Configure capacitor.config.ts with:
   - appName: the current Lovable app name
   - appId: a production-style bundle ID I can edit later, such as com.company.app
   - webDir: the production build output folder
   - plugins.CapacitorUpdater.defaultChannel: production
6. Install and configure @capgo/capacitor-updater.
7. Add package scripts for:
   - building the web app
   - syncing Capacitor
   - uploading a production Capgo bundle
   - starting Capgo Builder setup for iOS
   - requesting an iOS cloud build
8. Create a first production channel plan:
   - production for users
   - preview for stakeholder review
   - staging for internal testing
9. Keep normal docs and README commands copy-pasteable with npm/npx unless this project already uses another package manager. Keep the Capgo MCP install command exactly as shown above.
10. Do not fake native signing credentials. Leave clear TODOs for the Capgo API key, Apple team details, and bundle ID.
11. After making changes, summarize exactly what changed and what command I should run next.

The Solution

AI WebアプリからモバイルリリースまでのCapgoのパス

買い手はきれいなデモを見たいわけではありません。インストール、更新、信頼できるアプリを提供したいです。Capgoはリリース層を提供し、Lovableはそれを所有しようとはしません。

生成されたアプリをGitに保存

LovableからGitHubにエクスポートして、アプリに実際のソースコード、変更履歴、CIまたはBuilderへのパスを提供します。

モバイル対応

静的出力、Capacitor webDir、アプリID、アイコン、スプラッシュ画面、パーミッション、ネイティブプロジェクトを設定

Build it with Capgo

Capgo Builderを使用して、プロジェクトをネイティブツールのマラソンに変えることなく、署名済みのiOSおよびAndroidビルドを作成

ライブアップデートで継続してリリース

Capgo チャンネルを使用して、生産、ステージング、プレビューの変更をプロダクション、ステージング、プレビューの変更でWebの修正とアセットをインストールされたバイナリの後

起動パス

AIで作られたアプリの実用的な起動パス

目標は、リリース後に使用できるモバイルリリースループではなく、チュートリアルのみのプロジェクトです。

1

アプリをエクスポート

Lovableに接続し、プロジェクトをクローンし、生産用Webビルドがローカルで正常に動作することを確認し、GitHub

2

ネイティブシェルを作成

Capacitor を追加し、アプリのアイデンティティを設定し、実機で初回の同期を実行し、コア画面を検証します。

3

ビルドと署名

Capgo ビルダを使用して署名済みバイナリとランダムなノートブックやスクリーンショットからシークレットを外す

4

リリースと反復

バイナリを一度だけ公開し、Capgo ライブアップデートを使用してUI、コピー、CSS、アセット、安全なJavaScript変更を実行します。

ユーザー信号

繰り返される顧客ポイントは単純です: Lovableはプロトタイプを作成可能にしましたが、Capgoはそれが製品のように感じるようにしました。リリースループは、最初のストアビルド後もアプリを存続させるものです。

Lovableからモバイルへの共通フィードバック

Capacitorで作成されたアプリ

テンプレートと学習製品は自然なモバイル候補です

作成と学習アプリは、パッケージング、署名、更新をきれいに管理することで、ウェブスタイルのフローをストア用に準備できることを示しています。

アプリの種類
Web-to-モバイル
カテゴリ
イベント、教育、教育
ソース
パブリック ストア データセット
招待カードデザインアプリアイコン

イベント

招待カードデザイン

レスポンシブ ウェブから自然にマップされるテンプレートドライブのデザインフロー。

20.0M インストール 4.6 評価
Google Play リストを表示
無限日本語アプリアイコン

教育

無限日本語

小さなレッスンとオンボーディングの改善が積み重なる集中学習アプリ。

180万インストール 4.6の評価
Google Playのリストを表示
StudySmarter - 学校 & 大学アプリアイコン

教育

StudySmarter - 学校 & 大学

アプリパッケージング後もウェブ製品の改善が続く学習フローアプリ。

6500万インストール 4.8 評価
Google Play のリストを表示

インストール可能なアプリにプロトタイプを変換

Capgoで速度をLovableで、Capacitorでネイティブシェル、Capgoでビルド、リアルタイムの更新、リリースの制御を使用