Integrations
Connect third-party services like Resend, Stripe, and custom APIs to extend your app's functionality.
What are integrations?
Integrations allow you to connect third-party services to your Beautiful.dev application.
To access them, open your project and click Integrations at the top of the page.
In this panel you will find:
- Integrations (supported providers like Resend and Stripe)
- Secrets (custom key-value pairs for other APIs)
- Project environments (Preview vs. Published)
Your preview and published apps have completely separate integration settings.
This lets you use different API keys per environment. For example, Stripe test keys in preview and live keys in production.
Resend
Resend is an email delivery service you can integrate to send emails from your app.
Domain required
To integrate Resend, your Beautiful.dev app must be connected to a domain.
How to integrate Resend
Go to resend.com and create an account.
In the Resend dashboard, follow their onboarding steps and add your domain under Domains.
Create an API key or copy the key generated during onboarding.
In your Beautiful.dev project, go to Integrations → Resend and paste your API key.
Set your From email (for example: notify@yourdomain.com).
Set your From name (the sender name displayed in email clients).
You can override the sender email or name in specific cases by telling the AI Agent, but the integration values define the defaults.
Stripe
Stripe allows your app to accept payments, sell subscriptions, and manage billing.
Before integrating, we recommend asking the AI Agent:
- What is the Stripe webhook endpoint for my app?
- Which events should I listen to?
Steps to integrate Stripe
Create a Stripe account if you haven't already.
For your preview app, use a Stripe test account; for your published app, use your live account.
In Stripe, search for API Keys and create a key.
- Paste this key into Integrations → Stripe in Beautiful.dev.
In Stripe, search for Webhooks.
Click Add destination and select the events recommended by the AI Agent (e.g. customer.subscription.created).
Enter your webhook URL
- Use the URL/path provided by the AI Agent.
- Example:
https://my-app.btfl.app/api/stripe
or for preview:https://preview-my-app.btfl.app/api/stripe
Save the destination and copy the webhook secret into Beautiful.dev.
Updating webhook URLs
If you change your project URL or add a custom domain:
- Update the webhook destination in Stripe
- Add an additional endpoint for your custom domain (e.g.
https://mydomain.com/api/stripe)
Once Stripe is connected, the AI Agent or Stripe's documentation can help you use product IDs, price IDs, and subscription events inside your app.
Other integrations via Secrets
If you need to integrate other third-party services (API keys, secret tokens, private endpoints, etc.) you can add them as Secrets.
To add a secret:
Go to Integrations → Secrets
Click Add secret
Enter a key and value (for example: OPENAI_API_KEY)
Save to make the secret available to your app
Secrets are isolated per environment, so preview and published apps can use different credentials when needed.