Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
React Flow + CopilotKit
Interactive flow diagram powered by @xyflow/react! 🪁
Ask the assistant to add nodes, modify the flow, or change colors!
Flow Assistant
👋 Hi! You're chatting with an agent that can control this React Flow diagram. This agent comes with powerful tools to manipulate the flow.
For example you can try:
- Theme Control: "Set the theme to orange"
- Add Nodes: "Add a node labeled 'Database' at position 400, 300"
- Connect Nodes: "Connect CopilotKit to Amazing UI"
- Delete Nodes: "Delete the Database node" or click the ✕ on any node
- Build Workflows: "Create a login flow with User -> Auth -> Dashboard"
- Complex Operations: "Add API node and connect it to Database"
- Generative UI: "Get the weather in SF"
As you interact with the agent, you'll see the flow diagram update in real-time to reflect your requests!
Powered by CopilotKit