Skip to content

feat: add visual Graph Builder tool to Burr UI#667

Open
skrawcz wants to merge 2 commits intomainfrom
feature/graph-builder
Open

feat: add visual Graph Builder tool to Burr UI#667
skrawcz wants to merge 2 commits intomainfrom
feature/graph-builder

Conversation

@skrawcz
Copy link
Contributor

@skrawcz skrawcz commented Mar 1, 2026

This takes work from @jaeyow and #572.

Adds a drag-and-drop graph editor for designing Burr application graphs visually and exporting as Python code or JSON.

Changes

  • these are UI only changes to add new graph-builder

Key changes:

  • New /graph-builder route with full visual editor (ReactFlow v12)
  • Migrate existing GraphView from reactflow v11 to @xyflow/react v12
  • Remove reactflow and @tisoap/react-flow-smart-edge dependencies
  • Per-node async/streaming toggles matching Burr's 4 action variants
  • Python code generation with correct decorators and signatures
  • 3 pre-built example graphs (MultiModal Chatbot, CRAG, Streaming)
  • localStorage auto-save/restore of graph state
  • Empty-state onboarding overlay and structured help sidebar
  • Fix appcontainer layout for full-height content

How I tested this

  • locally
Screenshot 2026-03-01 at 08 27 49

Notes

Next would be to unify the color schemes with the observability components.

Checklist

  • PR has an informative and human-readable title (this will be pulled into the release notes)
  • Changes are limited to a single goal (no scope creep)
  • Code passed the pre-commit check & code is left cleaner/nicer than when first encountered.
  • Any change in functionality is tested
  • New functions are documented (with a description, list of inputs, and expected output)
  • Placeholder code is flagged / future TODOs are captured in comments
  • Project documentation has been updated if adding/changing functionality.

This takes work from @jaeyow and #572.

Adds a drag-and-drop graph editor for designing Burr application graphs
visually and exporting as Python code or JSON.

Key changes:
- New /graph-builder route with full visual editor (ReactFlow v12)
- Migrate existing GraphView from reactflow v11 to @xyflow/react v12
- Remove reactflow and @tisoap/react-flow-smart-edge dependencies
- Per-node async/streaming toggles matching Burr's 4 action variants
- Python code generation with correct decorators and signatures
- 3 pre-built example graphs (MultiModal Chatbot, CRAG, Streaming)
- localStorage auto-save/restore of graph state
- Empty-state onboarding overlay and structured help sidebar
- Fix appcontainer layout for full-height content
@skrawcz skrawcz force-pushed the feature/graph-builder branch from ea60cbe to e9c7c88 Compare March 1, 2026 16:33
@github-actions
Copy link

github-actions bot commented Mar 1, 2026

A preview of b71f715 is uploaded and can be seen here:

https://burr.dagworks.io/pull/667

Changes may take a few minutes to propagate. Since this is a preview of production, content with draft: true will not be rendered. The source is here: https://github.com/apache/burr/tree/gh-pages/pull/667/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant