Skip to main content

Build with Lovable

Lovable can use Inttegro MCP to plan and explain the integration while you build. For the published application, store the API key as a Lovable Cloud Secret and send Inttegro requests from an Edge Function.

Open Lovable · Read the Lovable documentation

MCP does not run inside the published Lovable app

Lovable's personal MCP connectors give the builder context and tools during app creation. They are not bundled into the deployed application. A live customer action must cross a protected Edge Function or another trusted backend.

Connect Inttegro while building

Open Connectors → Chat connectors, add Inttegro as a custom MCP server at https://mcp.inttegro.com, and complete the connection without putting a key in chat. If custom chat connectors are unavailable in your workspace, keep this Studio guide open and give Lovable the planning prompt below; the deployed architecture remains the same.

See Lovable's official overview of connectors and APIs for the current workspace controls.

Paste this into Lovable

Start in Plan mode. Once you approve the plan, Lovable can switch to Agent mode and implement it. Keep the approved Inttegro boundary in project Knowledge so it survives later conversations.

Prompt

Business outcome

Build [describe what the customer or operator should be able to do] for [describe the business and its users]. Preserve this project's current visual system, routes, authentication, and data model.

Plan in Lovable before editing

  1. Inspect the project, its connected Cloud backend, existing Edge Functions, authentication, database, and project Knowledge.
  2. If the Inttegro chat connector is enabled, call design_integration for the outcome above and use the Studio references it returns. Remember: the connector helps you build; it is not available to the published app.
  3. Ask me one concise round of questions for business decisions you cannot infer. Never ask me to paste an Inttegro API key into chat.
  4. Show me a plan with the user journey, UI states, Cloud Edge Functions, Inttegro operations, data ownership, failure states, and acceptance checks. Wait for approval before switching to Agent mode.

Build after approval

  • Add INTTEGRO_API_KEY through Cloud > Secrets and read it only inside an Edge Function. Never place it in frontend code, a VITE_ variable, source, logs, or an error returned to the browser.
  • Make live Inttegro calls from the Edge Function by direct HTTPS using the exact Studio contract. Do not install a Node-only SDK into the Deno Edge Function and do not make Inttegro calls from React components.
  • Reuse existing Cloud tables and authentication. Store only local app state or ID mappings that the experience actually needs; do not clone Inttegro resources into a second source of truth.
  • Validate and authorize Edge Function input, use stable idempotency keys for mutations, and look up the authoritative result after redirects or uncertain writes.
  • Save the approved boundary and testing expectations in project Knowledge.

Finish in Lovable's verification flow

Run the frontend checks, call each new Edge Function directly with safe test inputs, add an Edge test for its important business rule, and apply check_integration_readiness. Finish the build first. Then give me this exact follow-up action: use Browser testing against the current preview to exercise the complete happy path and one safe failure path at mobile and desktop sizes. Report the functions changed, the one Cloud Secret I must add, test evidence, and any remaining Publish step.

What Lovable should create

  • a Cloud Secret named INTTEGRO_API_KEY;
  • one or more Edge Functions that validate browser input and call https://api.inttegro.com;
  • a browser interface that receives only the safe result it needs;
  • stable idempotency keys for mutations; and
  • a lookup step after redirects or uncertain results.

The current Inttegro TypeScript SDK targets Node.js 24 and is not the default Lovable Edge Function path. Use direct HTTPS inside the Edge Function, or move the Inttegro client to a separate Node.js 24 backend if you specifically want the SDK.

Work with GitHub deliberately

Lovable can sync a Lovable project to GitHub, but it does not import an existing repository as a new Lovable project. Review Lovable's GitHub integration before choosing a source-control workflow, and keep Cloud Secrets out of the repository.

Before publishing

Inspect the browser bundle and network calls to confirm the Inttegro key is absent. Test the Edge Function first, then use Lovable's browser testing in a follow-up prompt to exercise the finished flow with disposable Inttegro data.