From Logic to Canvas: Streamlining Agentic Workflows with Refly for Your Team

refly-ai/refly

You've pointed out Refly, an intriguing project that sits at the intersection of AI Agents, Visual Workflows, and Canvas UI. From a developer's perspective, this isn't just "another no-code tool"; it's a way to bridge the gap between your complex backend logic and your non-technical stakeholders (like PMs or Designers).

Here is a breakdown of what makes it special and how you can get started.

As engineers, we often get bogged down building internal tools or "admin panels" so that non-tech teammates can trigger workflows. Refly changes that dynamic in three ways

Orchestration over Coding
It treats AI agents as modular blocks. You define the "capabilities" (tools/APIs), and the canvas handles the flow logic.

State Management & Persistence
Managing the state of a multi-step AI conversation is a pain. Refly’s workflow engine handles the "memory" and execution order out of the box.

Extensibility
You can build custom nodes. This means you can write a specific Python or TypeScript function to handle your proprietary data, and then hand it off to a "Creator" to use in their visual workflow.

Refly is designed to be developer-friendly. Since it's often used as a self-hosted or integrated platform, you'll usually start by cloning the repository and setting up the environment.

Make sure you have Node.js (v18+) and pnpm (or npm/yarn) installed.

# Clone the repository
git clone https://github.com/refly-ai/refly.git
cd refly

# Install dependencies
pnpm install

# Set up your environment variables (API keys for LLMs)
cp .env.example .env

pnpm dev

This will typically launch the Canvas UI, where you can start dragging and dropping nodes to see how the "Agent" interacts with the "Workflow."

In Refly, the logic is often defined via a JSON-like schema or a DSL (Domain Specific Language) that represents the graph. Here’s a conceptual look at how you might define a simple Research Agent workflow programmatically.

Imagine you want to create a node that fetches data from your own API to be used by the AI

// Example of defining a custom "Tool" node for the Refly Agent
const myCustomTool = {
  name: "fetchInternalData",
  description: "Fetches latest project metrics from our internal DB",
  parameters: {
    type: "object",
    properties: {
      projectId: { type: "string" }
    }
  },
  execute: async ({ projectId }) => {
    const data = await db.projects.findUnique({ where: { id: projectId } });
    return JSON.stringify(data);
  }
};

// You then register this tool within the Refly Agent environment
// so it appears as a block on the Canvas.

Once registered, a Non-technical Creator can simply drag this "Fetch Internal Data" block onto the canvas, connect it to an LLM block, and build an automated reporting tool without asking you to write a single line of UI code.

Refly effectively turns your code into UI-ready building blocks. It’s a huge win for engineers because

You stop building one-off internal UIs.

You maintain control over the "Tools" (the logic).

The "Creators" get the freedom to experiment with the "Workflow" (the sequence).