Lovable.dev は、数分でモダンで使いやすいサイトやアプリを生成できる素晴らしい強力な AI コーディング エージェントです。 インタラクティブなダッシュボード、ポーリングされたUI、およびスムーズなユーザー体験。 fast and effective scaffolding しかし、あなたがLovableにエンド・トゥー・エンド・インテグレーションを構築するように頼んだことがあるなら、あなたはそれを知るでしょう。 しかし、外部サービスとの信頼性の高い接続に苦労することができる。 looks amazing, インテグレーションは欠陥容認ではありません。 彼らは要求 それがどこ AI ネイティブのユニバーサルな統合層で、あらゆるアプリケーションへの接続を構築することができます。 reliable authentication, solid integration logic, and secure execution routes. メンバー 実践実験 Lovable に、ユーザーが独自に接続できるサアスプラットフォームダッシュボードを作成するように依頼しましょう。 そして アカウントを設定し、HubSpot タスクからスマート トゥー リストを作成します。 HubSpot OpenAI 以下は初めの「Lovable」です。 「Hubspot に接続する」ボタン、「OpenAI に接続する」ボタン、ユーザーが Hubspot タスクを取得し、OpenAI で処理する方法を含む SaaS ダッシュボードを作成します。 「Hubspot に接続する」ボタン、「OpenAI に接続する」ボタン、ユーザーが Hubspot タスクを取得し、OpenAI で処理する方法を含む SaaS ダッシュボードを作成します。 The Results: What Lovable Does Really Well (On Its Own): Generates a slick UI with connection buttons: Prompts us to connect Supabase for a backend (which our use case would require): Generates a scaffolded, API-based infrastructure after referencing the relevant OpenAI and Hubspot docs: いくつかの助けを用いることができる場所: Lovable は私の個人的な OpenAI API キーを要求しましたが、これは私たちの使用例にとって意味がありません。 それは脆弱でカスタマイズされたOAuthフローを生成し、クライアントステータスでトークンを漏洩させた(機能していたら)。 システムには信頼性の高い統合論理が欠けていたため、一度のAPI キャッチを使用して設計され、機能していても、リトリ、複数のユーザー、または安全なアクションを実行することは許されなかった。 APP しかし、統合は最後まで機能しなかった。 Result: 見た目大 MembraneをMixに追加する 愛しいお手伝い 完全に統合されたアプリケーションへの道のりでは、Membraneを導入します。 VIBE こちらは、How: Feed Lovable the Membrane AI Context We pasted directly into the conversation. This gave Lovable knowledge of : connection UIs, connectors, authentication tokens, etc: Membrane’s Initial AI Context Membrane’s integration framework Leverage Membrane’s Connection UI Instead of trying to scaffold its own interface for user connections, Lovable was nudged to use Membrane’s , which automatically handles OAuth, token storage, and user-specific authentication: pre-built Connection UI Implement Supabase Backend Pasting the also taught Lovable how to configure Supabase to support Membrane’s backend requirements. Membrane AI Quickstart Context Lovable asked for my Membrane credentials and stored them as Secrets to be retrieved by Supabase Edge Functions. Now, when prospective users want to connect their accounts for HubSpot and OpenAI, the system will create Membrane connections that are authenticated with my workspace credentials: Configure the Membrane Workspace Since Lovable doesn’t currently support connecting to Membrane in a local dev environment, we manually: Added HubSpot and OpenAI connectors through the Membrane console, which only takes a few clicks. Configured the relevant (fetch-tasks, summarize-tasks). Actions Grabbed the drop-in from the console. Membrane provides exact code snippets that you can drop into your app for Action execution: SDK calls Provide Lovable with the SDK Calls We pasted the Membrane Action snippets into Lovable so that it could wire up backend calls correctly: Troubleshoot with “Vibes” If Lovable became confused (which can be expected within the vibe-coding experience), we reminded it of two truths: that handles backend auth & token persistence, and users connect their own accounts. Never ask for my individual API keys for HubSpot or OpenAI. Remember Supabase The is the source of truth for connections & actions. Membrane AI context Experiment Result: After Lovable elegantly vibe-squashed a couple of runtime errors, the app worked! Integrated end-to-end and reproducible: The app features a workflow, allowing users to: fully-integrated Connect to their own OpenAI and Hubspot accounts with Membrane’s Connection UI components. Generate an AI-optimized, smart to-do list Navigate a sleek, interactive UI. The only manual steps required were adding connectors in the Membrane workspace and configuring Membrane Actions — each of which required just a few clicks. コンテキスト I Context Membraneとの違い Membrane turned Lovable from a 入 A : UI wizard production-ready integrations builder Auth フロー: API キーを個別に管理することはなくなり、ユーザーは自分の HubSpot および OpenAI アカウントを接続することができ、接続は Membrane によって安全に処理されます。 アクション: 脆弱な一度のキャッチの代わりに、Membrane Actions は、再利用可能で信頼できる統合論理を提供しました。 Supabase + Membrane: 車輪を再発明することなく、セキュアで複数のレンタンのバックエンド。 現在、ユーザがHubSpot と OpenAI を接続すると、アプリはタスクを信頼的に取り出し、それらを概要し、安全でユーザ特有のタスクリストを提供します。 実験分析 Vibe-coding Pain Point Membrane Fix Result Lovable tries to create a single-user, hardcoded integration 🔑 Membrane Connection UIs Each user connects their own accounts securely Brittle/non-functional OAuth, token leaks 🔒 Membrane Authentication Secure, multi-tenant auth One-off API calls 🔁 Membrane Actions Reusable, reliable integrations Integration Debugging 🏁 Membrane Integration Logic Minimal debugging required Lovableは、ハードコード化されたシングルユーザ統合を作成しようとしています。 ↓↓↓ メンバー接続 UI 各ユーザーは自分のアカウントを安全に接続します。 Brittle/non-functional OAuth、トークン漏洩 ↓↓↓ メンバー認証 セキュア・マルチテナント Auth One-off API コール メンバーアクション 再利用可能で信頼性の高い統合 統合デバッグ ↓↓↓ 構造統合の論理 最低限のデバッグが必要 SCALING THE VIBE Lovableの価値は、 そして美しいUI. Membraneの価値はその内にある。 fast iteration reliable and scalable integrations. 一緒に、彼らはより大きなものに振り向く: 開発者はLovableでアイデアを思考のスピードでスケッチできます。 Membrane は、これらのアイデアがどの SaaS アプリケーションでも実際に動作することを保証します。 :With ループの中で、Lovableはアイデアに止まらず、真のSaaS統合の構築者になるようになります。 Bottom Line メンバー 今日、インテグレーションを開始してください Membrane: メンバー試し メンバーDOCS 愛しき探検
