---
title: "Build with Lovable"
description: "Use Inttegro MCP while building in Lovable and call the live API from a protected Edge Function."
canonical: "https://studio.inttegro.com/ai-builders/lovable"
format: inttegro-machine-docs/v1
language: "Ruby"
sdk_version: "v10.0.0"
reader_profile: optional
reader_manifest: "https://studio.inttegro.com/machine/ruby/readers/index.json"
reader_identification: "Optional: declare your client only if known and your current-session capabilities; use reader_manifest for supplemental recommendations."
preamble_estimated_tokens: 607
model_token_report: "https://studio.inttegro.com/machine/token-report.json"
preamble_questions: 5
preamble_source: "general"
recommended_mcp_tools: ["design_integration","check_integration_readiness","get_integration_guide"]
estimated_tokens: 2128
token_estimate_method: "utf8_bytes_divided_by_4"
---

## Machine preamble

**Summary:** Use Inttegro MCP while building in Lovable and call the live API from a protected Edge Function. This Ruby representation uses the selected SDK's native names wherever Studio has a verified mapping.

### Five questions

#### Q1. When should the reader use Build with Lovable?

Use this builder guide when that AI app builder is responsible for generating or extending the application.

#### Q2. What is authoritative on this page?

Use this page for orientation; follow its canonical SDK, guide, API, or MCP links for exact contracts.

#### Q3. What page-specific constraint matters most?

Keep API keys and live commerce calls in the builder’s protected server environment, never generated browser code.

#### Q4. Can Inttegro MCP materially help with this task?

Yes, when the reader has an authenticated MCP connection and the task needs live context, guided planning, or a supported operation. The strongest matches are `design_integration`, `check_integration_readiness`, `get_integration_guide`; their exact roles and boundaries are listed below.

#### Q5. How should the reader verify the answer and continue?

Inspect the generated server boundary, confirm secrets are not client-visible, run the documented end-to-end test, and verify authoritative commerce state.

### Recommended MCP assistance

Use these through an authenticated Inttegro MCP connection. This document remains the contract source.

- [`design_integration`](https://studio.inttegro.com/machine/ruby/inttegro-mcp/tools.md#design_integration) — read-only integration guidance. Elicits the integration goal, AI app builder, server runtime, SDK preference, and checkout approach, then returns a platform-aware build and test plan without accepting credentials.
- [`check_integration_readiness`](https://studio.inttegro.com/machine/ruby/inttegro-mcp/tools.md#check_integration_readiness) — read-only integration guidance. Audits platform secret storage, server-runtime compatibility, idempotency, errors, state verification, checkout returns, and messaging consent without receiving source code or credentials.
- [`get_integration_guide`](https://studio.inttegro.com/machine/ruby/inttegro-mcp/tools.md#get_integration_guide) — read-only integration guidance. Returns a focused implementation sequence and canonical Studio links for authentication, checkout, orders, catalog, messaging, idempotency, or testing.

## Document content

# Build with Lovable

[Lovable](https://lovable.dev/) 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](https://lovable.dev/) · [Read the Lovable documentation](https://docs.lovable.dev/)

:::warning 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](https://docs.lovable.dev/integrations/introduction) for the
current workspace controls.

## Paste this into Lovable

Start in [Plan mode](https://docs.lovable.dev/features/plan-mode). Once you
approve the plan, Lovable can switch to Agent mode and implement it. Keep the
approved Inttegro boundary in
[project Knowledge](https://docs.lovable.dev/features/knowledge) so it survives
later conversations.

### Prompt

> **Copyable 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](https://docs.lovable.dev/integrations/github) 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](https://docs.lovable.dev/features/browser-testing) in a
follow-up prompt to exercise the finished flow with disposable Inttegro data.