TurboDocx + Lovable: Step-by-Step Integration Guide

This is the exact wiring, from a fresh API key to your first signed invoice in about 12 minutes. You build it inside a Lovable app, and the one backend feature that does not come for free is collecting a legally binding signature. This guide is the technical replica of the build this replicates, a signable invoice app that went from blank project to working e-signature in about 12 minutes and three prompts. If you want the broad, less code-heavy version first, read the broad how-to overview. If you would rather skip code entirely, there is also the no-code version.

Here we go deeper. You will see exactly what the skill installs, why the integration sends with sendSignature instead of createSignatureReviewLink, and how to fix the two hiccups you are most likely to hit. The whole thing runs on the TurboDocx Quickstart Skill, so your AI builder does the wiring while you review the result.

Three things before you start, and none of them takes long:

• A Lovable project. Any app will do. For this walkthrough it is an invoice form that produces a PDF, but the integration is identical for contracts, NDAs, or order forms.
• A free TurboDocx account. Sign up at app.turbodocx.com. Your first 5 signatures each month are free, so you can test end to end without a card.
• A verified sender email. This is the single most common thing people miss. Signature emails go out from a real address, so verify the one you plan to put in TURBODOCX_SENDER_EMAIL in your TurboDocx settings first. Skip this and your first send will be rejected.

Inside your Lovable project, tell your AI builder to run the open-source skills CLI, or just paste the command in chat and let it execute:

npx skills add TurboDocx/quickstart

The CLI clones the skill and writes it where your agent expects it. From there, the agent has ground truth: the real SDK surface, the exact method names, and the rule that the API key comes from an environment variable rather than getting hardcoded. That last part matters in Lovable, where it is easy to accidentally bake a secret into a component.

When you ask the agent to add signing, the skill does two concrete things:

• The TurboDocx SDK. It detects your project from the manifest, installs the SDK, and writes a small, self-contained integration module that talks to the TurboDocx API. You can see what the hand-written equivalent looks like in the JavaScript SDK guide.
• A TurboSign component. A simple form with a name field, an email field, and a “Send for signature” button. It collects who should sign, attaches your invoice PDF, and calls the send method when the button is clicked.

Nothing here is magic. It is the same code you would write by hand against the TurboDocx API and SDK, just generated and reviewed in a fraction of the time.

Grab your key from Settings, API Keys at app.turbodocx.com and add four environment variables. In Lovable, set these as project secrets rather than committing them:

TURBODOCX_API_KEY=your_api_key_here
TURBODOCX_ORG_ID=your_org_id_here
TURBODOCX_SENDER_EMAIL=you@company.com
TURBODOCX_SENDER_NAME=Your Company Name

TURBODOCX_SENDER_EMAIL is the one to get right. It must be a sender you verified in step zero, because it is the from address on the signing email. TURBODOCX_SENDER_NAME is what recipients see as the sender, so use your company or product name. Set these, restart the dev server, and the integration is ready to send.

This is the detail most people trip on. TurboDocx gives you two ways to kick off a signature request:

• createSignatureReviewLink creates the request but pauses it in a “review” state so a human can confirm fields and recipients before anything is emailed. Useful when a person needs a last look.
• sendSignature skips the review step and emails the recipient immediately. This is what you want for an automated invoice flow, where clicking “Send for signature” should just send.

In the original build, the first version came up using the review path, so the app showed an “under review” state. One prompt fixed it: switch to sendSignature so the email goes straight out. If your TurboSign component lands on the review path and you want immediate delivery, tell your agent to send with sendSignature directly.

The whole build took about 12 minutes across three prompts, including one Vite dependency hiccup that Lovable fixed on its own by restarting the dev server. No manual intervention was needed to get from a blank project to a working e-signature flow. The full timestamped walkthrough is on the hub:

I built a signable invoice app with Lovable

Open the app, fill in your own name and email as the signer, and click “Send for signature.” Within a few seconds you should receive the signing email from your sender address, open the invoice, drop a signature in the field, and complete it. That round trip, request to signed document, is your proof the integration works. The legal mechanics behind it (tamper-evident audit trails, ESIGN, UETA, and eIDAS alignment) run on TurboDocx infrastructure, so you do not maintain any of it. The US e-signature compliance and European compliance guides cover the high-level picture.

The most common first-run stumble is the sender email: if a send is rejected, double-check that TURBODOCX_SENDER_EMAIL is verified in your TurboDocx settings and matches the env variable character for character. For anything else, the fastest way to get unstuck is our community. Drop your question in the TurboDocx Discord and the team plus other builders can help.