An interface is a JSX module where the final expression returns an object containing a default React component and several optional metadata/logic exports.
Important Constraints:
- No
import statements: Use globals provided by the Label Studio runtime (e.g., React, getField, EditorUI, hooks). - The
default export must be a React function component.
Required and Optional Exports
default: The React component (receives task, regions, setRegions, and params as props).getResults(regions, relations): Serializes interface state into Label Studio annotation results.parseResults(results): Deserializes Label Studio results back into { regions: [...] }.inputSchema: Declares task data fields used by the interface.outputSchema: Declares fields produced by the interface (used by Prompter-style auto-labeling).paramsSchema: Declares per-project configuration passed into the component as params.regionSchema: (Optional) Metadata for custom region shapes.specVersion: (Optional) Numeric compatibility marker.
function Screen({ task, regions, setRegions, params }) {
return <div>{task.data.text}</div>;
}
function getResults(regions) {
return regions;
}
function parseResults(results) {
return { regions: results };
}
({
default: Screen,
getResults,
parseResults,
inputSchema: {
type: "object",
properties: {
text: { type: "dataField", default: "text" },
},
},
outputSchema: {
type: "object",
properties: {
sentiment: { type: "string", enum: ["Positive", "Negative"] },
},
},
paramsSchema: {
type: "object",
properties: {
mode: { type: "string", default: "review" },
},
},
});