• A dashboard that suggests which products to reorder
• A Panel that recognizes a customer’s first order and drafts a welcome email
• A customer returns-risk score
• A weather-based sales and reorder tool for sports shops
• A tool that calculates the actual purchase value of goods sold
• A margin dashboard that breaks results down by supplier, customer, and delivery address

The Six Apps at a Glance

Every App Starts the Same Way

1. Create the app with npx @jtl-software/create-cloud-app@latest.
2. Register it with npm run register.
3. Install it from the JTL Hub under Manage apps → Apps in development.
4. Run it locally with npm run dev.

{
  "version": "1.0.0",
  "technicalName": "bestandsradar-e354dd",
  "lifecycle": {
    "configurationUrl": "http://localhost:3024/setup"
  },
  "capabilities": {
    "hub": {
      "appLauncher": { "redirectUrl": "http://localhost:3024/hub" }
    },
    "erp": {
      "menuItems": [
        { "id": "bestandsradar-menu", "name": "Bestandsradar", "url": "http://localhost:3024/erp" }
      ],
      "api": {
        "scopes": ["items.read", "salesorders.read"]
      }
    }
  },
  "authentication": {
    "publicClient": {
      "redirectUris": ["http://localhost:3024/callback"],
      "postLogoutRedirectUris": ["http://localhost:3024/"]
    },
    "serviceAccount": {
      "clientCredentials": true,
      "description": "bestandsradar backend service account"
    }
  }
} 

• configurationUrl is the setup page the JTL Hub opens during installation.
• menuItems puts an entry in the Cloud ERP’s Apps menu that loads /erp in an iframe.
• api.scopes is the data the app may read. Two scopes, both read-only, because a reorder dashboard needs items and sales orders and nothing else.
• serviceAccount lets the backend get its own access token with client credentials.

Pattern 1: Put a workflow behind a Cloud ERP menu item

Pattern 2: Put context where the work happens

• first-order-welcome looks at the sales order currently open.
• Kundenrisiko shows a risk score for the selected customer.
• Wetter-Sport connects an item to the weather conditions on the days it sold.

useEffect(() => {
  const unsubscribe = appBridge.event.subscribe(
    'CustomerChanged',
    (data: unknown) => {
      setCustomerId((data as { customerId: string }).customerId);
    }
  );

  appBridge.method
    .call('getCurrentCustomerId')
    .then((id) => setCustomerId(id as string))
    .catch(() => undefined);

  return () => unsubscribe();
}, [appBridge]);

Pattern 3: Sometimes you don’t need a backend

const { accessToken } =
  await appBridge.method.call<{ accessToken: string }>('getAppToken');

const client = new GraphQLClient(`${jtlApiUrl}/erp/v2/graphql`, {
  headers: {
    Authorization: `Bearer ${accessToken}`
  }
});

Pattern 4: ERP data becomes more useful when you combine it with other data

export function classify(
  tempMax: number,
  precipitation: number,
  sunshineHours: number
): WeatherClass {
  if (precipitation >= 1) return 'rain';
  if (tempMax < 8) return 'cold';
  if (tempMax >= 18 || (tempMax >= 14 && sunshineHours >= 6)) {
    return 'sunny';
  }

  return 'mixed';
}

Pattern 5: Working with more data changes the problem

async function parallelMap(values, limit, fn) {
  const results = new Array(values.length);
  let next = 0;

  await Promise.all(
    Array.from(
      { length: Math.min(limit, values.length) },
      async () => {
        while (next < values.length) {
          const index = next++;
          results[index] = await fn(values[index]);
        }
      }
    )
  );

  return results;
}

const invoiceItems = await parallelMap(valid, 5, (invoice) =>
  jtlGet(`/sales-invoices/${encodeURIComponent(invoice.salesInvoiceId)}/line-items`, context),
);

Pattern 6: Your backend language is your choice

What Building These Apps With AI Taught Us

From Conference Demo to Real JTL Cloud App

• Trim the scope to what the app reads and writes today.
• Host it on HTTPS and swap every localhost URL in the manifest for the real one.
• Handle the unhappy paths. An expired token, an empty tenant, a slow API, a customer with no orders. Live demos rarely hit these. Merchants hit them on day one.
• Keep secrets out of the repo. The template’s .gitignore already covers .env and appsettings.Local.json. Keep it that way.
• Know your data gaps. If a number depends on data the API can’t give you yet (returns, in Kundenrisiko’s case), say so in the UI.
• Test with a real tenant, not just the demo route, and with more than a handful of orders.
• Prepare for JTL App Store review if the app is going public, or share it through activation codes if it’s for one merchant.

Try it Yourself

• Create an app from the template to get the same starting point these apps used.
• Read up on app-token authentication and Panels in the JTL Developer Docs.
• Connect the JTL Developer Docs MCP server to your AI assistant before your first prompt.