Inspiration

Flume was primarily inspired by two things:

1. Palantir Foundry’s visual transformation graphs Last month I was exploring Palantir's commercial software -- Foundry. At its core, it is a software to gather better insights from scattered data. One of the most useful features in the software is called Pipline Builder, which allows one to use flows to easily transform data into meaningful insights with visual blocks. You can see your system, not just script it. The idea that powerful operations could be represented as objects was really interesting to me, and hence I decided to translate that into Solana actions.

2. The natural-language automation on Solana Short prompts like: “Swap these tokens, stake that, and send the rest here.” …should be enough for a system to wire up the sequence of steps automatically. Especially now with tools like SendAI's Solana agent SDK, this is more obvious than ever. All that was missing was a frontend that lets users visualize the entire flow.

Flume is the combination of both: A visual automation board where crypto assets behave like draggable app icons, and AI turns human instructions into executable on-chain flows.

What I Learned

• Declarative vs. procedural workflows While using React Flow, I learnt that a graph of nodes is not just a UI, rather a declarative description of computation. The user arranges nodes visually, but the system must interpret that structure as a deterministic execution plan.
• How to turn human language into structured Solana actions I had to design a constrained prompt format that prevents the model from hallucinating fields, ensures real numeric operations, and emits strictly typed SendAIActionType configs. Given a prompt like: “Swap my SOL into USDC, then send half to another wallet.” …Flume must produce a valid sequence like:

[
  { "type": "swap", "config": { "inputMint": "...", "outputMint": "...", "amount": 1.23 } },
  { "type": "transfer", "config": { "to": "xxx", "amount": 0.615 } }
]

• Building spatial UX that feels iOS-like Drag-and-drop wallets don’t really exist yet. Reproducing a smart-phone-style home screen using React Flow (with folders, snapping, animated merging, and node metadata propagation) taught me a lot about spatial interfaces and gesture heuristics especially in a very short amount of time.

How I Built Flume

Flume consists of four coordinated layers:

1. Portfolio Canvas (React Flow) In pages/index.tsx, I generate: wallet node token nodes (SPL balances from Moralis) NFT nodes folder nodes (merged assets) React Flow provides: custom node renders edges for asset -> action wiring selection logic minimap & canvas controls The smart phone-like folder experience is implemented via a drag handler that checks proximity and merges nodes into a folder if close enough.

2. AI Flow Generator CommandPalette.tsx captures the user’s natural language prompt, attaches their live balances, and posts to: /api/generate-flow.ts The API constructs a system prompt including: supported SendAI action catalog required numeric accuracy formatting rules validation constraints GPT-4o returns a deterministic list of nodes, which Flume places and auto-connects in sequence on the canvas.

3. Action Nodes (SendAI) Each AI-produced step becomes a DeFiActionNode in React Flow. These nodes: surface editable configuration fields infer upstream tokens via custom handles construct a Solana Agent Kit instance call the correct function from util/sendaiActions.ts append success/error result nodes with signatures

4. Flow Execution Layer InfoSidebar.tsx reads the graph from left -> right, extracts asset payloads, and executes each node against: runSendAIAction(agent, step.type, step.config) Each action either: succeeds -> produces a result node fails -> produces an error node with metadata Everything stays on the same canvas -- assets, actions, results.

Challenges I Faced

1. SendAI DeFi plugin compatibility issues The SendAI DeFi plugin wasn’t compatible with Next.js, and nowhere in the documentation was this mentioned. I faced a lot of issues like hydration mismatches, dynamic imports breaking, and plugin initialization errors. There were some open issues regarding this on their GitHub, but the questions were unanswered. Ultimately I couldn't figure out a solution and skipped the DeFi plugin for now. I will get in touch with SendAI folks to resolve this.

2. Parsing human language into executable Solana steps Natural language is ambiguous, but on-chain actions are not. Ensuring the model emitted real amounts, correct mints, and a proper sequence without hallucinated fields required: strict schema validation auto-repair loops prompt shielding numeric constraints This was a big chunk of engineering.

3. Outdated Jupiter integration in SendAI SendAI’s Jupiter swap bindings use a deprecated route API. This means swaps currently don’t work through the provided SendAI tooling. I had to disable or skip certain actions, and it limited the expressiveness of generated flows.

4. Building a clean canvas with React Flow React Flow is powerful but low-level. The hardest parts were: propagating asset payloads through custom handles preventing users from connecting invalid node types preserving node metadata when merging into folders managing z-index, drag layering, and hitboxes on mobile The “simple” smart phone-style UX took far more engineering than I had expected.

What’s Next for Flume

Flume today is a visual automation board that turns instructions into flows. I am looking to make the following updates:

1. Complex strategies Support for conditionals, branching, and multi-path flows. E.g., “If price < X, do Y.”

2. Loops / recurring automations Daily, weekly, or event-driven actions: rebalance this folder auto-sweep rewards rotate positions every Sunday

3. Better logs & observability Structured logs for every execution step: timestamps, token movements, tx fee usage, error traces

4. Improved swap engine Once SendAI updates Jupiter integration, Flume will unlock proper asset swaps on Solana.

5. Mobile-first canvas Touch-friendly gestures and haptic feedback.

Built With

• ai-sdk
• next.js
• reactflow
• solana-agent-kit
• solana/web3.js
• typescript