diff --git a/docs/source/guide/admin-interfaces.md b/docs/source/guide/admin-interfaces.md index 0257d92191fe..2527dc31ce09 100644 --- a/docs/source/guide/admin-interfaces.md +++ b/docs/source/guide/admin-interfaces.md @@ -19,6 +19,11 @@ These settings apply uniformly to every Interface in your organization — embed Access these settings from **Organization > Settings > Interfaces**. +!!! info Which section do I need? + - To let an Interface **call an external API/service** (`fetch`/XHR/WebSocket) → **API origins**. + - To let an Interface **load a third-party script/stylesheet** from a CDN → **Advanced: external scripts**. + - To use a library with **no external network at all**, bundle it into the Interface — nothing to configure here. See [Use external libraries and services](interfaces-libraries). + ## Enable Interfaces diff --git a/docs/source/guide/interfaces-agent.md b/docs/source/guide/interfaces-agent.md index 359c217a4cfb..f2094e05f5bb 100644 --- a/docs/source/guide/interfaces-agent.md +++ b/docs/source/guide/interfaces-agent.md @@ -10,12 +10,17 @@ meta_description: "Build custom labeling interfaces with React" section: "Interfaces" --- -You can create Interfaces in two ways: +You can create Interfaces in two ways — pick whichever you prefer: * **Within Label Studio** - Use Label Studio's out-of-the-box Interface builder to prompt our agent to build and refine your Interface. * **Developed locally** - Install the [`create-interface-skill`](/skills/interface.html) and use an agent of your choice to vibe code an Interface that you can then import into Label Studio. For more information, see [Develop an Interface locally](interfaces-local). +!!! note + These are two independent ways to build the same thing, and the resulting Interface is identical either way — only the authoring path differs. + + On Label Studio Cloud, both **Create with Agent** and [Develop Locally](interfaces-local) are available — choose whichever fits your workflow. **Create with Agent** is a Label Studio Cloud feature: on self-hosted or on-prem deployments it isn't available, so build your Interface with **Develop Locally** instead. + To begin, select **Interfaces** in the main menu and then select **Create Interface > Create with Agent**. diff --git a/docs/source/guide/interfaces-libraries.md b/docs/source/guide/interfaces-libraries.md new file mode 100644 index 000000000000..f9d83958b2d5 --- /dev/null +++ b/docs/source/guide/interfaces-libraries.md @@ -0,0 +1,130 @@ +--- +title: Use external libraries and services in an Interface +short: External libraries & APIs +tier: enterprise +type: guide +order: 0 +order_enterprise: 146 +meta_title: Use external libraries and network services in Label Studio Interfaces +meta_description: "How to call external APIs, load third-party packages, or bundle libraries directly into a Label Studio Interface — and which security setting each one needs." +section: "Interfaces" +--- + +An Interface runs as a **sandboxed module** inside the Label Studio editor. By default that sandbox has **no outbound network and cannot load third-party code** — a deliberate security posture, not a hard limitation. When your Interface genuinely needs an external API or a third-party library, you unlock exactly what you need, in one of three ways. + +The single most common point of confusion is that **"call an external API" and "use an external package" are unlocked in different places.** Allow-listing a host in the wrong section silently does nothing. This page explains which is which. + +## The three paths at a glance + +| You want to… | Example | Where to enable | +|---|---|---| +| **Call an external HTTP service** from your Interface | `fetch()` your ML backend, a geocoder, an internal microservice, a tile server | **Organization > Settings > Interfaces → API origins** | +| **Load a third-party package from a CDN** at runtime | Pull `three.js` or `d3` from `cdn.jsdelivr.net` via a `