Skip to main content

Quick Start

This guide walks you through installing the Ollang SDK, configuring your project, starting the Asset Management interface, and (optionally) enabling the browser CMS capture.

1. Install the SDK

npm install @ollang-dev/sdk
Or with yarn:
yarn add @ollang-dev/sdk

2. Get Your API Key

  1. Sign up or log in at Olabs
  2. Create or select a project
  3. Generate an API key from project settings
  4. Set it in your environment:
export OLLANG_API_KEY="your-api-key"

3. Configure Your Project

In your project root, create ollang.config.ts:
// ollang.config.ts
export default {
  projectRoot: "/xxx/xxx/xxx/xxx/xxx",
  sourceLanguage: "en",
  targetLanguages: ["tr", "ko", "es"],
  video: {
    translationType: "aiDubbing" as "aiDubbing" | "subtitle",
  },
};

4. Start the Asset Management Interface

From your project root, run:
npx @ollang-dev/sdk start
This starts the Ollang Asset Management server. The control panel opens automatically in your browser at:
http://localhost:5972
If the browser doesn’t open automatically, visit http://localhost:5972 manually.

What the Asset Management Does

  • Scans your i18n files (JSON, YAML), hardcoded strings, videos, images, and audio
  • Shows a Kanban board (Scanned → Translating → Translated → Submitted)
  • Sends selected items to Ollang for translation
  • Applies translations back to your codebase

5. Run Your First Scan

  1. In the Asset Management UI, enter your API key if prompted
  2. Select a folder (or create one, e.g. local-test) for local project content
  3. Click Scan Project
  4. Wait for the scan to complete — items appear in the Scanned column
  5. Select items, choose a target language, and click Translate

6. Browser CMS Capture (Optional)

For CMS content (e.g., Strapi), add the Browser SDK to your site.

Install the script

Add to your HTML, before </body>:
<script src="https://unpkg.com/@ollang-dev/sdk/dist/browser/ollang-browser.min.js"></script>
Or configure programmatically:
<script>
  window.ollangConfig = {
    strapiUrl: "https://your-strapi.com",
  };
</script>
<script src="https://unpkg.com/@ollang-dev/sdk/dist/browser/ollang-browser.min.js"></script>

Open the browser for CMS capture

  1. Visit your site with ?ollang-localize=true in the URL
  2. The debug panel appears; use it to capture CMS content
  3. Push content to Ollang; it appears in the Asset Management under the CMS folder

Ports and URLs

ServiceDefault URL
Asset Management Control Panelhttp://localhost:5972
Asset Management API (internal)http://localhost:5972/api/\*
Use ASSET_MANAGEMENT_PORT to change the port:
ASSET_MANAGEMENT_PORT=8080 npx @ollang-dev/sdk start

Troubleshooting

Ensure you run npx @ollang-dev/sdk start from your project root where ollang.config.ts (or env vars) is set. Run npm run build in the SDK package if you’re developing from source.
Verify your key at Olabs. Ensure OLLANG_API_KEY is set or entered in the Asset Management UI.
Manually visit http://localhost:5972. On some systems, the open package may not launch a browser.
Check includePaths and includePatterns in your config. Ensure your i18n files match the configured paths (e.g., messages/*.json, locales/**/*.json).

Next Steps