Document intake example
Document intake combines Sea context, an existing process and independently placed widgets. Copy this composition into your application and adjust its HTML or CSS to suit the screen.
The example includes uploads, a document list, a form beside its source, manual input and labelled check forms. These are the same widgets listed in Components.
React composition
Copy intake-example.tsx into App.tsx. Set apiUrl and the credential on its provider, then supply the existing run ID returned after your application starts the pipeline.
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>
);
}App returns the context provider, process and labelled child widgets directly. The SDK exports each of those components.
Application integration shows a function component, a React 16 class and a plain JavaScript mount. Quick start runs the same composition against a supplied run.
Match the pipeline
The pipeline's unique labels identify the exact steps. The intake example supplies documents to trade-licence, memorandum and financial-statements, and completes application-date. Change those labels to match your pipeline. stepRole constrains the expected step kind, such as extraction or analysis; it does not choose between different steps.
Every SeaForm displays data from a submission through the same form UI. The label and role properties resolve that submission from the run step's outputs. The example sets isCheck separately for boolean check decisions.
A multi step with no run instances leaves its form present and empty. Invalid labels or incompatible roles produce binding errors. Use exact run-step and output selectors when a step produces several instances or forms. Step binding explains those selectors.
The host starts the run before mounting the widgets. Bind SeaUpload to each extraction step's label to supply its document input. The SDK handles upload receipts, retries and refreshing outputs. Manual input completes the required form for its selected step. The composition needs no effects, refs or event handlers to coordinate these actions.
Position and style each widget
The example uses CSS Grid. Set classes, dimensions and placement on each widget directly. Add ordinary sections, headers or host controls wherever the screen needs them. Process and step groups use display: contents, so they leave layout to the host.
css
.intake-grid sea-form::part(field) {
padding-block: 10px;
}
.intake-grid sea-upload::part(dropzone) {
border-radius: 8px;
}
.intake-grid sea-source-viewer {
height: 640px;
}Remove a panel from the markup, change its grid area or replace it with host content. Use an optional sea-step to share a selector among several children. Theming lists the common tokens and styling parts.
Configure the widgets
Set upload formats, file limits and duplicate policy on SeaUpload. Set readOnly and field filters on SeaForm. Set the document-list view and source-viewer dimensions on those components. Example configuration shows direct options without a screen-wide SDK configuration object.
Sea context owns the connection, language, citation handling and interaction tracking. The process loads the run and its outputs. Form and source widgets share the selected document through the context.
A saved correction emits value-changed with the submission and item IDs. Listen on the form or context. Labelled check forms are separate outputs. Labelled check outputs explains how to bind them.