Skip to main content

​
Creating custom integrations for your app

Build a custom integration you can use across your apps and share with your team. Keep it in your private catalog, or submit it to the Integration Catalog for review and earn credits if approved. This works for any API-powered integration across a wide range of platforms.
Create a public integration that gets approved and we will add 250 credits to your account.
This video uses an earlier version of the platform, but the flow is the same.

​
Step 1 | Creating a new custom integration

Start by entering the key details for your custom integration, including name, description, logo, example prompts, and visibility.
Before you begin, make sure you have:
  • An API key for the service you are connecting, for example OpenAI keys start with sk-.
  • A square image in PNG or JPG, recommended size 256×256.
  • 3–5 example prompts to help others understand how to use the integration.
To create an integration:
  1. Go to the Integrations Catalog.
  2. Click the My Integrations tab.
  3. Click Create Integration.
  4. Click Create New Integration.
  5. Enter the integration details:
    • Integration Name: Give your integration a clear and descriptive name.
    • Description: Explain what the integration does and its main use case.
    • Upload Logo: Add a 256×256 PNG or JPG image.
    • Example Prompts: Add 3–5 prompts to show how your integration works.
    • Integration Visibility: Keep it private, or set to Public to submit it for review in the Integration Catalog.
  6. Click Continue to Integration Content.
Integrationmetadata

​
Step 2 | Configuring the custom integration

Configure the core functionality of your integration to define how the integration works and what it needs. When you’re all set, click Save Integration at the bottom.
Keep Backend function turned on. This lets Base44 call external APIs securely without exposing credentials.Integration backend function toggle
List the API keys or credentials your integration needs. At this stage, you’re only describing which secrets are required, not adding your own. When you or your team connect this integration to an app, you’ll be asked to enter the real API keys securely.To specify required API keys:
  1. In the Integration Content tab, enter each key your integration requires:
    • Secret Name: For example:OPENAI_API_KEY.
    • Instructions for obtaining: Link or instructions for obtaining the key, for example: “Get your API key at platform.openai.com/account/api-keys.”
  2. Click Add API Key.
  3. Repeat for any additional keys or secrets this integration needs. Integration keys with fields for name and how to get it.
Provide an instruction set that tells Base44 how the integration works, including endpoints, parameters, and any code samples. When using the integration, these instructions are automatically added to the Base44’s AI system enabling it to perform the specific tasks defined here.Integration prompt area with code and instructions.
The example below uses OpenAI’s image generation API. If you are integrating a different service, replace the endpoint and parameters with the correct ones for that API.
# OpenAI Text to Image Integration

## 1. Overview
This integration generates images based on natural language prompts using OpenAI’s DALL·E model.

## 2. Environment Variables
```json
[
  {
    "name": "OPENAI_API_KEY",
    "description": "Your OpenAI secret API key (starts with sk-...)",
    "how_to_get": "https://platform.openai.com/account/api-keys"
  }
]
```

## 3. Backend Function (Deno)
```ts
Deno.serve(async (req) => {
  const OPENAI_API_KEY = Deno.env.get("OPENAI_API_KEY");
  const { prompt } = await req.json();

  if (!prompt) {
    return new Response(JSON.stringify({ error: "Missing prompt" }), {
      status: 400,
      headers: { "Content-Type": "application/json" }
    });
  }

  const response = await fetch("https://api.openai.com/v1/images/generations", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${OPENAI_API_KEY}`
    },
    body: JSON.stringify({ prompt })
  });

  const data = await response.json();

  if (!response.ok) {
    return new Response(JSON.stringify({ error: data }), {
      status: response.status,
      headers: { "Content-Type": "application/json" }
    });
  }

  return new Response(JSON.stringify(data), {
    status: 200,
    headers: { "Content-Type": "application/json" }
  });
});
```

## 4. Frontend Component (Optional)
```tsx
const generateImage = async (prompt) => {
  const res = await fetch("/functions/openai-image.js", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ prompt })
  });

  const result = await res.json();
  return result?.data?.[0]?.url || null;
};
```

## 5. Usage & Examples
- Prompt: “Generate an image of a futuristic flying car”  
- User types prompt → Backend calls OpenAI → Returns image URL

## 6. Research Summary & Resources
- [OpenAI Image Generation Docs](https://platform.openai.com/docs/api-reference/images/create)  
- API: `POST https://api.openai.com/v1/images/gene
Only edit the code if you are familiar with JavaScript/Deno. If you want the integration to work as described above, paste it exactly as shown.
If you do want to customize it, here’s what each main part does:
  • Read your API key → securely gets the key from your environment variables so it’s not exposed.
  • Accept a user request → waits for the prompt or input the user types.
  • Send the request to the API → calls the API endpoint (in this example, OpenAI’s image generation API).
  • Get the response → receives the API’s result (for OpenAI, that’s an image URL).
  • Return it to the app → sends the result back so it can be shown in chat or another interface.
For another platform, you would change the API endpoint, request format, and how the response is handled to match that service’s documentation.

​
Testing and finalizing your integration

Test the custom integration by building a new app that uses it, then run a quick prompt to confirm it works as expected. To test your integration:
  1. Click Use this integration.
  2. Describe the app you want to create with this integration.
  3. Provide your keys under Required API keys:
    • New value: Paste the API key in the input field.
    • Reuse existing: Select a saved secret for this app.
  4. Prompt the AI chat to test the integration, for example: Generate an image of a panda surfing a wave.

​
Troubleshooting tips

Click a topic to troubleshoot custom integrations.
Enter a description of the image you want.
Create a new key in your provider, for example OpenAI, and update the secret value in your app.
Click Save Integration and check visibility settings.
Wait a few minutes and try again, or check provider status.
Verify the secret value is set in the app and correctly referenced by the backend function.