1- # @flowise /agentflow
1+ # @flowiseai /agentflow
22
3- [ ![ Version] ( https://img.shields.io/npm/v/@flowise /agentflow )] ( https://www.npmjs.com/package/@flowise /agentflow )
3+ [ ![ Version] ( https://img.shields.io/npm/v/@flowiseai /agentflow )] ( https://www.npmjs.com/package/@flowiseai /agentflow )
44[ ![ License] ( https://img.shields.io/badge/license-Apache--2.0-blue )] ( https://github.com/FlowiseAI/Flowise/blob/main/LICENSE.md )
55
66> Embeddable React component for building and visualizing AI agent workflows
1919
2020## Overview
2121
22- ` @flowise /agentflow ` is a React-based flow editor for creating AI agent workflows. It provides a visual canvas built on ReactFlow for connecting AI agents, LLMs, tools, and logic nodes.
22+ ` @flowiseai /agentflow ` is a React-based flow editor for creating AI agent workflows. It provides a visual canvas built on ReactFlow for connecting AI agents, LLMs, tools, and logic nodes.
2323
2424## Installation
2525
2626``` bash
27- pnpm add @flowise /agentflow
27+ pnpm add @flowiseai /agentflow
2828```
2929
3030** Peer Dependencies:**
@@ -36,9 +36,9 @@ pnpm add react react-dom @mui/material @mui/icons-material @emotion/react @emoti
3636## Basic Usage
3737
3838``` tsx
39- import { Agentflow } from ' @flowise /agentflow'
39+ import { Agentflow } from ' @flowiseai /agentflow'
4040
41- import ' @flowise /agentflow/flowise.css'
41+ import ' @flowiseai /agentflow/flowise.css'
4242
4343export default function App() {
4444 return (
@@ -54,9 +54,9 @@ export default function App() {
5454``` tsx
5555import { useRef } from ' react'
5656
57- import { Agentflow , type AgentFlowInstance , type FlowData } from ' @flowise /agentflow'
57+ import { Agentflow , type AgentFlowInstance , type FlowData } from ' @flowiseai /agentflow'
5858
59- import ' @flowise /agentflow/flowise.css'
59+ import ' @flowiseai /agentflow/flowise.css'
6060
6161export default function App() {
6262 const ref = useRef <AgentFlowInstance >(null )
@@ -98,33 +98,33 @@ export default function App() {
9898
9999## Props
100100
101- | Prop | Type | Default | Description |
102- | ------| ------| ---------| -------------|
103- | ` apiBaseUrl ` | ` string ` | ** (required)** | Flowise API server endpoint |
104- | ` token ` | ` string ` | — | Authentication token for API calls |
105- | ` initialFlow ` | ` FlowData ` | — | Initial flow data to render (uncontrolled — only used on mount) |
106- | ` components ` | ` string[] ` | — | Restrict which node types appear in the palette |
107- | ` onFlowChange ` | ` (flow: FlowData) => void ` | — | Called when the flow changes (node/edge add, remove, move) |
108- | ` onSave ` | ` (flow: FlowData) => void ` | — | Called when the user triggers a save |
109- | ` onFlowGenerated ` | ` (flow: FlowData) => void ` | — | Called when a flow is generated via AI |
110- | ` isDarkMode ` | ` boolean ` | ` false ` | Use dark mode theme |
111- | ` readOnly ` | ` boolean ` | ` false ` | Disable editing (nodes not draggable/connectable) |
112- | ` showDefaultHeader ` | ` boolean ` | ` true ` | Show built-in header (ignored if ` renderHeader ` provided) |
113- | ` showDefaultPalette ` | ` boolean ` | ` true ` | Show built-in node palette |
114- | ` enableGenerator ` | ` boolean ` | ` true ` | Show the AI flow generator button |
115- | ` renderHeader ` | ` (props: HeaderRenderProps) => ReactNode ` | — | Custom header renderer |
116- | ` renderNodePalette ` | ` (props: PaletteRenderProps) => ReactNode ` | — | Custom node palette renderer |
101+ | Prop | Type | Default | Description |
102+ | -------------------- | ------------------------------------------ | -------------- | --------------------------------------------------------------- |
103+ | ` apiBaseUrl ` | ` string ` | ** (required)** | Flowise API server endpoint |
104+ | ` token ` | ` string ` | — | Authentication token for API calls |
105+ | ` initialFlow ` | ` FlowData ` | — | Initial flow data to render (uncontrolled — only used on mount) |
106+ | ` components ` | ` string[] ` | — | Restrict which node types appear in the palette |
107+ | ` onFlowChange ` | ` (flow: FlowData) => void ` | — | Called when the flow changes (node/edge add, remove, move) |
108+ | ` onSave ` | ` (flow: FlowData) => void ` | — | Called when the user triggers a save |
109+ | ` onFlowGenerated ` | ` (flow: FlowData) => void ` | — | Called when a flow is generated via AI |
110+ | ` isDarkMode ` | ` boolean ` | ` false ` | Use dark mode theme |
111+ | ` readOnly ` | ` boolean ` | ` false ` | Disable editing (nodes not draggable/connectable) |
112+ | ` showDefaultHeader ` | ` boolean ` | ` true ` | Show built-in header (ignored if ` renderHeader ` provided) |
113+ | ` showDefaultPalette ` | ` boolean ` | ` true ` | Show built-in node palette |
114+ | ` enableGenerator ` | ` boolean ` | ` true ` | Show the AI flow generator button |
115+ | ` renderHeader ` | ` (props: HeaderRenderProps) => ReactNode ` | — | Custom header renderer |
116+ | ` renderNodePalette ` | ` (props: PaletteRenderProps) => ReactNode ` | — | Custom node palette renderer |
117117
118118### Imperative Methods (via ` ref ` )
119119
120- | Method | Return Type | Description |
121- | --------| -------------| -------------|
122- | ` getFlow() ` | ` FlowData ` | Get current flow data |
123- | ` toJSON() ` | ` string ` | Export flow as JSON string |
124- | ` validate() ` | ` ValidationResult ` | Validate the current flow |
125- | ` fitView() ` | ` void ` | Fit all nodes into view |
126- | ` clear() ` | ` void ` | Remove all nodes and edges |
127- | ` addNode(nodeData) ` | ` void ` | Add a node (` Partial<FlowNode> ` ) |
120+ | Method | Return Type | Description |
121+ | ------------------- | ------------------ | -------------------------------- |
122+ | ` getFlow() ` | ` FlowData ` | Get current flow data |
123+ | ` toJSON() ` | ` string ` | Export flow as JSON string |
124+ | ` validate() ` | ` ValidationResult ` | Validate the current flow |
125+ | ` fitView() ` | ` void ` | Fit all nodes into view |
126+ | ` clear() ` | ` void ` | Remove all nodes and edges |
127+ | ` addNode(nodeData) ` | ` void ` | Add a node (` Partial<FlowNode> ` ) |
128128
129129### Design Note
130130
@@ -178,7 +178,7 @@ npm publish --dry-run
178178### Publish
179179
180180``` bash
181- # Prerelease — tagged so `npm install @flowise /agentflow` won't pick it up
181+ # Prerelease — tagged so `npm install @flowiseai /agentflow` won't pick it up
182182npm publish --tag dev
183183
184184# Stable release — gets the `latest` tag
0 commit comments