{/* Viewer */}
{
const block = extractionResult.blocks.find(
(b) => b.id === bbox.metadata?.blockId
);
setSelectedBlock(block ?? null);
}}
/>
{/* Details Panel */}
) : (
);
}
```
### Custom Styling with CSS Variables
Override the default styles using CSS variables:
```css custom-theme.css theme={null}
:root {
/* Container */
--sv-background: #1a1a2e;
--sv-border-color: #2d2d44;
--sv-border-radius: 8px;
/* Tabs */
--sv-tab-background: #2d2d44;
--sv-tab-background-active: #3d3d5c;
--sv-tab-color: #a0a0b0;
--sv-tab-color-active: #ffffff;
/* Grid */
--sv-header-background: #2d2d44;
--sv-header-color: #ffffff;
--sv-cell-background: #1a1a2e;
--sv-cell-color: #e0e0e0;
--sv-cell-border-color: #2d2d44;
/* Bounding boxes */
--sv-bbox-border-width: 2px;
--sv-bbox-opacity: 0.15;
--sv-bbox-opacity-hover: 0.25;
}
```
Selected Block
{selectedBlock ? (Type: {selectedBlock.type}
Content:
{selectedBlock.content}
Click a bounding box to see details
)}| Q1 Results | |
|---|---|
| Product | Revenue |
| Widget A | $10,000 |
(documents, artifacts)"] rbac["RBAC Role Assignment
(Storage Blob Data Contributor)"] rbac --> blob end subgraph reducto["Reducto Infrastructure"] direction TB sp["Service Principal
(multi-tenant app)"] workers["Compute Workers"] sp --> workers end workers <--> blob ``` ## Setup
(documents, artifacts)"] app["Box Custom App
(CCG auth)"] app --> folder end subgraph reducto["Reducto Infrastructure"] direction TB workers["Compute Workers"] api["Reducto API + Database"] workers --> api end workers <--> folder ``` ## Setup
(S3 / Azure Blob / Box)"] auth["Access Credentials
(IAM Role / Service Principal / Box App)"] auth --> storage end subgraph reducto["Reducto Infrastructure"] direction TB workers["Compute Workers"] api["Reducto API + Database"] workers --> api end workers <--> storage ``` ### Data flow 1. You upload documents to your storage (or use Reducto's `/upload` endpoint) 2. You call Reducto API with a reference to your document 3. Reducto uses your configured credentials to access the document 4. Processing occurs on Reducto's compute infrastructure 5. Results and artifacts are written back to your storage 6. Objects expire automatically based on your lifecycle configuration ## Choosing a Storage Provider
| Date | Amount |
|---|
````markdown theme={null}
## Add Reducto MCP Server
### 1. Authenticate (one-time)
```bash
uvx mcp-server-reducto --login
```
This opens your browser to approve access. Your API key is saved to `~/.reducto/config.yaml`.
### 2. Add to your MCP client
**Claude Code:**
```bash
claude mcp add reducto -- uvx mcp-server-reducto
```
**Claude Desktop**: edit `~/Library/Application Support/Claude/claude_desktop_config.json`:
```json
{
"mcpServers": {
"reducto": {
"command": "uvx",
"args": ["mcp-server-reducto"]
}
}
}
```
**Cursor**: edit `.cursor/mcp.json`:
```json
{
"mcpServers": {
"reducto": {
"command": "uvx",
"args": ["mcp-server-reducto"]
}
}
}
```
**VS Code**: edit `.vscode/mcp.json`:
```json
{
"servers": {
"reducto": {
"command": "uvx",
"args": ["mcp-server-reducto"]
}
}
}
```
### 3. Use it
The server provides these tools:
| Tool | What it does |
|------|-------------|
| `upload_file` | Upload a local file or URL to Reducto (returns `reducto://` URL) |
| `parse_document` | Parse a document into structured text, tables, figures |
| `extract_data` | Extract structured JSON from a document using a schema |
| `split_document` | Segment a document into labeled sections |
| `classify_document` | Categorize a document type |
| `edit_document` | Fill forms or modify a PDF/DOCX |
**Local files:** Use `upload_file` first, e.g. `upload_file("./report.pdf")`, then pass the returned `reducto://` URL to other tools.
**Chain operations:** `parse_document` returns a `job_id`. Pass `jobid://` to `extract_data` or `split_document` to skip re-parsing.
````
minimum of 30 credits per document\* | Agentic loop for near-perfect accuracy |
\*Beta pricing, subject to change.