Application integration
React wrappers and Web components use the same widget package. Set apiUrl and the credential on Sea context, then put the process for an existing run inside it. Your application creates the run before mounting widgets.
Start with the React example or the custom element mount below. Both use the same automatic assets. For server operations, upload over HTTP or run a pipeline.
React function
Copy intake-example.tsx into App.tsx, then set the provider's connection settings and the existing run ID.
tsx
import * as React from "react";
import {
SeaContextProvider,
SeaProcess,
SeaStep,
SeaUpload,
SeaFileBrowser,
SeaForm,
SeaSourceViewer,
SeaManualInput,
} from "@sea-dev/widget-lit/react";
export default function App({
apiUrl = "https://api.sea.dev",
bearerToken = "YOUR_ACCESS_TOKEN",
runId = "YOUR_RUN_ID",
} = {}): React.ReactElement {
return (
<SeaContextProvider apiUrl={apiUrl} bearerToken={bearerToken}>
<SeaProcess runId={runId}>
<style>{`
.sea-example { container: sea-example / inline-size; color: #242738; background: white; color-scheme: light; text-align: left; font: 14px/1.5 system-ui, sans-serif; }
.sea-example sea-manual-input { margin: 0 16px 16px; }
.sea-example details { margin-bottom: 16px; border: 1px solid #e2e8f0; border-radius: 8px; }
.sea-example summary { padding: 12px 16px; font-weight: 600; cursor: pointer; }
.sea-example .sea-document > sea-upload { margin: 0 16px 16px; }
.sea-example .sea-document > sea-file-browser { margin: 0 16px 16px; }
.sea-example .sea-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 16px 16px; }
.sea-example .sea-grid > * { min-width: 0; }
.sea-example .sea-panel { height: 560px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 8px; }
.sea-example sea-source-viewer { background: #f8fafc; }
.sea-example sea-source-viewer::part(status) { display: grid; place-items: center; height: 100%; margin: 0; padding: 24px; color: #64748b; text-align: center; }
@container sea-example (max-width: 680px) { .sea-example .sea-grid { grid-template-columns: minmax(0, 1fr); } .sea-example .sea-panel { height: 480px; } }
`}</style>
<div className="sea-example">
{(
[
["trade-licence", "Trade licence"],
["memorandum", "Memorandum"],
["financial-statements", "Financial statements"],
] as const
).map(([stepLabel, title]) => (
<SeaStep key={stepLabel} stepLabel={stepLabel}>
<details
className="sea-document"
open={stepLabel === "financial-statements"}
>
<summary>{title}</summary>
<SeaUpload multiple />
<SeaFileBrowser view="list" selectionOnly />
<div className="sea-grid">
<SeaForm className="sea-panel" />
<SeaSourceViewer className="sea-panel" />
</div>
</details>
</SeaStep>
))}
<details>
<summary>Application date</summary>
<SeaManualInput stepLabel="application-date" />
</details>
<details>
<summary>Check outputs</summary>
<div className="sea-grid">
<SeaForm
stepLabel="doc-check"
isCheck
readOnly
noBanner
noToolbar
/>
<SeaForm
stepLabel="cross-check"
isCheck
readOnly
noBanner
noToolbar
/>
</div>
</details>
</div>
</SeaProcess>
</SeaContextProvider>
);
}Reacting to events
Event handlers are optional. React handlers receive a CustomEvent; read its payload from event.detail. Plain elements use addEventListener. A saved correction triggers onValueChanged, while the SDK refreshes bound outputs. Observe it when your application also displays those values outside the widgets.
documents-uploaded reports a run-step upload receipt. input-completed reports the run, step and submission after a manual dependency is completed. process-change on SeaProcess reports run status and loading changes. Each component reference lists its events and payloads.
Typed React refs expose the underlying element's public methods. Use the process's refresh() after a host-side change.
React 16 class
The same props and events work with React 16.14 class components.
tsx
import * as React from "react";
import App from "./intake-example";
export class ReviewScreen extends React.Component<
React.ComponentProps<typeof App>
> {
render() {
return <App {...this.props} />;
}
}Custom element
Pass an existing run and import the focused component entries in your application bundle. The SDK coordinates uploads, manual completion, corrections and run refreshes.
js
import "@sea-dev/widget-lit/context";
import "@sea-dev/widget-lit/process";
import "@sea-dev/widget-lit/form";
import "@sea-dev/widget-lit/file-browser";
import "@sea-dev/widget-lit/source-viewer";
import "@sea-dev/widget-lit/upload";
export function mountReview(container, { apiUrl, bearerToken, runId }) {
const context = document.createElement("sea-context");
context.apiUrl = apiUrl;
context.bearerToken = bearerToken;
const process = document.createElement("sea-process");
process.runId = runId;
const layout = document.createElement("section");
layout.style.cssText =
"display:grid;grid-template-columns:14rem minmax(0,1fr) minmax(0,1fr);gap:16px";
const upload = document.createElement("sea-upload");
upload.stepLabel = "financial-statements";
upload.stepRole = "extraction";
upload.multiple = true;
upload.style.gridColumn = "1 / -1";
const documents = document.createElement("sea-file-browser");
documents.stepLabel = "financial-statements";
documents.stepRole = "extraction";
documents.view = "list";
documents.selectionOnly = true;
const form = document.createElement("sea-form");
form.stepLabel = "financial-statements";
form.stepRole = "extraction";
form.style.cssText = "min-width:0;height:640px;overflow:auto";
const source = document.createElement("sea-source-viewer");
source.stepLabel = "financial-statements";
source.stepRole = "extraction";
source.style.cssText = "min-width:0;height:640px";
layout.append(upload, documents, form, source);
process.append(layout);
context.append(process);
container.append(context);
return process;
}Mount the composition in your container with the provider's connection settings and the existing run ID. Add host event listeners only when your application needs to observe a completed action.
Resolve input dependencies
Use the run returned by Start the run. Bind an upload to each extraction step's unique label. Manual inputs use the required form returned by their blocked run step.
html
<sea-context api-url="{API_HOST}" bearer-token="{ACCESS_TOKEN}">
<sea-process run-id="{RUN_ID}">
<sea-upload step-label="trade-licence"></sea-upload>
<sea-upload step-label="memorandum"></sea-upload>
<sea-upload step-label="financial-statements" multiple></sea-upload>
<sea-manual-input step-label="application-date"></sea-manual-input>
</sea-process>
</sea-context>Each upload supplies its selected extraction step's missing_upload input; other parent blockers may remain. Completing a manual input saves and finalises the required submission before attaching it. Widgets do not create pipeline runs.
Compose a review screen
Use host HTML and CSS Grid to place the individual widgets. Each panel receives its own style and binds to a step label. Unique labels resolve outputs directly; the document list selects a source document and, when a step genuinely has several output instances, its output.
The React function example returns the provider, process and labelled children directly.
Upload supplies documents directly to an extraction step. Manual input completes a manual step's required form. Step binding covers labels and precise selectors.
Layout and parts shows responsive CSS and internal styling. Deploy the complete application build, following Compatibility and deployment.
Group several widgets
Wrap related panels in an optional step group when they share a binding. A descendant can supply its own step label to show another output. Host containers can sit inside or outside that group.
Multiple instances
Put several processes inside one context to share the connection. Each process loads its run; Sea context scopes selection to that process. Use separate contexts when the API host, credential or shared language differs.
Existing submission integrations
Known submission views remain available inside Sea context. Set submissionId on the context for individual form and source widgets. Keep connection credentials on the context.
The upload reference describes explicit submission-based compatibility mode. For an existing run, use the declarative composition above.