Load React Flow data to DuckDB

React Flow is a node-based UI library for React that provides a REST API for accessing data such as devtools and zoom-select configurations. Everything needed to build a working React Flow → DuckDB pipeline is on this page: the API's base URL, authentication, endpoints, pagination and incremental field — plus a prompt that hands the whole job to your coding agent.

---

Build your React Flow to DuckDB pipeline

Paste this prompt into Claude, Codex, or Cursor. The agent does the rest.

PromptCopy prompt
Run uvx dlthub-init@latest to build a pipeline from React Flow to DuckDB and run it on dltHub

That scaffolds a dltHub workspace and installs the dltHub AI harness — the project rules, the secrets-management skill, and the dlt MCP server your agent needs to work safely. From there it reads the React Flow API, proposes the endpoints to load, then writes, runs and validates the pipeline while you review rather than type. Credentials are inspected through MCP tools, so your agent never reads secrets.toml itself. How the LLM-native workflow works →

Prefer to write it yourself? Every fact the agent uses is below.

---

React Flow API at a glance

These values come from the React Flow API reference — the authoritative source if anything here looks out of date.

---

How do I authenticate with the React Flow API?

Authentication is handled using a Bearer token, which is passed in the Authorization header of HTTP requests.

1. Get your credentials

React Flow is a frontend library and does not provide a public REST API for general usage. If you are using React Flow Pro, you can manage your account and access-related information through the Pro Dashboard at https://reactflow.dev/pro/dashboard. For integrations involving data pipelines (such as those configured in dlt), you must use your own backend infrastructure to expose data. In cases like the dltHub React Flow source, you are responsible for providing the access token generated or required by your specific backend implementation.

2. Add them to .dlt/secrets.toml

Copy
[sources.react_flow_source]
access_token = "your_api_token_here"

dlt reads this file automatically at runtime. With the harness, the setup-secrets skill prompts you for the values and never handles the raw credential in chat. For production, see setting up credentials with dlt.

---

What React Flow data can I load into DuckDB?

These are the React Flow endpoints dlt can load into DuckDB:

---

How do I load only new React Flow records?

React Flow exposes None on devtools, so dlt can request only the records that changed since the last run. Set it as the cursor_path and dlt tracks the high-water mark for you between runs.

Copy
{"name": "devtools", "endpoint": {
    "path": "devtools",
    "data_selector": "None",
    "incremental": {"cursor_path": "None", "initial_value": "2024-01-01T00:00:00Z"},
}}

On the first run dlt loads everything from initial_value; on every run after that it requests only what changed and appends with write_disposition="merge" if you set a primary key. See incremental loading.

---

What does the generated React Flow pipeline look like?

A standard dlt REST API pipeline — the same code you would write by hand, loading devtools and zoom-select from the React Flow API into DuckDB:

Copy
import dlt
from dlt.sources.rest_api import RESTAPIConfig, rest_api_resources

@dlt.source
def react_flow_source(access_token=dlt.secrets.value):
    config: RESTAPIConfig = {
        "client": {
            "base_url": "https://ui.reactflow.dev/",
            "auth": {"type": "bearer", "token": access_token},
        },
        "resources": [
            {"name": "devtools", "endpoint": {"path": "devtools", "data_selector": "None"}},
            {"name": "zoom_select", "endpoint": {"path": "zoom-select", "data_selector": "None"}}
        ],
    }
    yield from rest_api_resources(config)


def load_react_flow_to_duckdb() -> None:
    pipeline = dlt.pipeline(
        pipeline_name="react_flow_pipeline",
        destination="duckdb",
        dataset_name="react_flow_data",
    )
    load_info = pipeline.run(react_flow_source())
    print(load_info)


if __name__ == "__main__":
    load_react_flow_to_duckdb()

Run it with python react_flow_pipeline.py. The agent iterates on this until it loads cleanly — you review and approve, rather than write it from scratch.

---

How do I query React Flow data in DuckDB?

dlt creates one table per resource. Query the loaded data with Python or SQL — or ask your agent to, through the MCP server's execute_sql_query tool.

Python (pandas DataFrame):

Copy
import dlt

data = dlt.pipeline("react_flow_pipeline").dataset()
df = data.devtools.df()
print(df.head())

SQL:

Copy
SELECT * FROM react_flow_data.devtools LIMIT 10;

See querying your data with dataset and exploring it in marimo notebooks.

---

How do I deploy the React Flow to DuckDB pipeline in production?

The pipeline runs locally, which is ideal for prototyping and one-off analysis. When you need it on a schedule, monitored on every load, and shared with your team, deploy the same dlt code on the dltHub platform — no infrastructure to maintain. The prompt above already ends with "run it on dltHub", so your agent can take it there directly.

• Deploy & schedule — run the pipeline as a managed job with automatic retries.
• Monitor — observable job queues, alerting, and load metrics for every run.
• Transform — promote raw React Flow loads into governed, documented models.
• Visualize & share — explore data in notebooks and publish live dashboards instead of static screenshots.

Book a demo →

---

What other destinations can I load React Flow data to?

dlt loads into any of these — only the destination argument changes:

Set dlt.pipeline(destination="snowflake") and add credentials in .dlt/secrets.toml. On the dltHub platform the same pipeline runs against a managed Iceberg lakehouse. See the full destinations list.

---

Next steps

• Ready for production? Book a demo of the dltHub platform →
• dlt LLM-native workflow docs
• REST API source reference
• Join the dlt community on Slack