Migrate Custom Assistants to Agents

.gitignore

@@ -118,4 +118,5 @@ apps/*/
 # Claude - session/user specific files
 .claude/plans/
 .claude/settings.local.json
-.claude/agent-memory/*
+.claude/agent-memory/*
+.claude/launch.json

CONTRIBUTING.md

@@ -159,6 +159,7 @@ Flowise support different environment variables to configure your instance. You
 | PORT                                 | The HTTP port Flowise runs on                                                                                                                                                                                                                                                     | Number                                           | 3000                                |
 | CORS_ALLOW_CREDENTIALS               | Enables CORS `Access-Control-Allow-Credentials` when `true`                                                                                                                                                                                                                       | Boolean                                          | false                               |
 | CORS_ORIGINS                         | The allowed origins for all cross-origin HTTP calls                                                                                                                                                                                                                               | String                                           |                                     |
+| MCP_CORS_ORIGINS                     | The allowed origins for MCP endpoint cross-origin calls. If unset, only non-browser (no Origin header) requests are allowed. Set to `*` to allow all origins.                                                                                                                     | String                                           |                                     |
 | IFRAME_ORIGINS                       | The allowed origins for iframe src embedding                                                                                                                                                                                                                                      | String                                           |                                     |
 | FLOWISE_FILE_SIZE_LIMIT              | Upload File Size Limit                                                                                                                                                                                                                                                            | String                                           | 50mb                                |
 | DEBUG                                | Print logs from components                                                                                                                                                                                                                                                        | Boolean                                          |                                     |

docker/.env.example

@@ -76,6 +76,7 @@ PORT=3000
 # NUMBER_OF_PROXIES= 1
 # CORS_ALLOW_CREDENTIALS=false
 # CORS_ORIGINS=*
+# MCP_CORS_ORIGINS=*
 # IFRAME_ORIGINS=*
 # FLOWISE_FILE_SIZE_LIMIT=50mb
 # SHOW_COMMUNITY_NODES=true

docker/docker-compose-queue-prebuilt.yml

@@ -76,6 +76,7 @@ services:
             # SETTINGS
             - NUMBER_OF_PROXIES=${NUMBER_OF_PROXIES}
             - CORS_ORIGINS=${CORS_ORIGINS}
+            - MCP_CORS_ORIGINS=${MCP_CORS_ORIGINS}
             - IFRAME_ORIGINS=${IFRAME_ORIGINS}
             - FLOWISE_FILE_SIZE_LIMIT=${FLOWISE_FILE_SIZE_LIMIT}
             - SHOW_COMMUNITY_NODES=${SHOW_COMMUNITY_NODES}

docker/docker-compose.yml

@@ -61,6 +61,7 @@ services:
             # SETTINGS
             - NUMBER_OF_PROXIES=${NUMBER_OF_PROXIES}
             - CORS_ORIGINS=${CORS_ORIGINS}
+            - MCP_CORS_ORIGINS=${MCP_CORS_ORIGINS}
             - IFRAME_ORIGINS=${IFRAME_ORIGINS}
             - FLOWISE_FILE_SIZE_LIMIT=${FLOWISE_FILE_SIZE_LIMIT}
             - SHOW_COMMUNITY_NODES=${SHOW_COMMUNITY_NODES}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flowise",
-    "version": "3.1.1",
+    "version": "3.1.2",
     "private": true,
     "homepage": "https://flowiseai.com",
     "workspaces": [
@@ -25,8 +25,8 @@
         "user:default": "cd packages/server/bin && ./run user",
         "test": "turbo run test",
         "test:coverage": "turbo run test:coverage",
-        "clean": "pnpm --filter \"./packages/**\" clean",
-        "nuke": "pnpm --filter \"./packages/**\" nuke && rimraf node_modules .turbo",
+        "clean": "pnpm -r clean",
+        "nuke": "pnpm -r nuke && rimraf node_modules .turbo",
         "format": "prettier --write \"**/*.{ts,tsx,md}\"",
         "lint": "eslint \"**/*.{js,jsx,ts,tsx,json,md}\"",
         "lint-fix": "pnpm lint --fix",

packages/agentflow/examples/src/App.tsx

@@ -15,7 +15,8 @@ import {
     DarkModeExampleProps,
     FilteredComponentsExampleProps,
     MultiNodeFlowProps,
-    StatusIndicatorsExampleProps
+    StatusIndicatorsExampleProps,
+    ValidationActionsExampleProps
 } from './demos'
 import { PropsDisplay } from './PropsDisplay'
 
@@ -81,6 +82,13 @@ const examples: Array<{
         description: 'Restrict available nodes with presets',
         props: FilteredComponentsExampleProps,
         component: lazy(() => import('./demos/FilteredComponentsExample').then((m) => ({ default: m.FilteredComponentsExample })))
+    },
+    {
+        id: 'canvas-actions',
+        name: 'Canvas Actions',
+        description: 'Custom FABs alongside the validation button via canvasActions',
+        props: ValidationActionsExampleProps,
+        component: lazy(() => import('./demos/ValidationActionsExample').then((m) => ({ default: m.ValidationActionsExample })))
     }
 ]
 

packages/agentflow/examples/src/demos/CustomUIExample.tsx

@@ -12,26 +12,6 @@ import { Agentflow } from '@flowiseai/agentflow'
 
 import { apiBaseUrl, token } from '../config'
 
-const initialFlow: FlowData = {
-    nodes: [
-        {
-            id: 'startAgentflow_0',
-            type: 'agentflowNode',
-            position: { x: 300, y: 200 },
-            data: {
-                id: 'startAgentflow_0',
-                name: 'startAgentflow',
-                label: 'Start',
-                color: '#7EE787',
-                hideInput: true,
-                outputAnchors: [{ id: 'startAgentflow_0-output-0', name: 'start', label: 'Start', type: 'start' }]
-            }
-        }
-    ],
-    edges: [],
-    viewport: { x: 0, y: 0, zoom: 1 }
-}
-
 // Custom header component
 function CustomHeader({ flowName, isDirty, onSave, onExport, onValidate }: HeaderRenderProps) {
     const [validationStatus, setValidationStatus] = useState<'valid' | 'invalid' | null>(null)
@@ -259,11 +239,11 @@ export function CustomUIExample() {
                     ref={agentflowRef}
                     apiBaseUrl={apiBaseUrl}
                     token={token ?? undefined}
-                    initialFlow={initialFlow}
                     renderHeader={(props: HeaderRenderProps) => <CustomHeader {...props} />}
                     renderNodePalette={(props: PaletteRenderProps) => <CustomPalette {...props} />}
                     showDefaultHeader={false}
                     showDefaultPalette={false}
+                    enableGenerator={false}
                     onSave={(flow: FlowData) => {
                         console.log('Saving flow:', flow)
                         alert('Flow saved! Check console.')
@@ -277,10 +257,10 @@ export function CustomUIExample() {
 export const CustomUIExampleProps = {
     apiBaseUrl: '{from environment variables}',
     token: '{from environment variables}',
-    initialFlow: 'FlowData',
     renderHeader: '(props: HeaderRenderProps) => ReactNode',
     renderNodePalette: '(props: PaletteRenderProps) => ReactNode',
     showDefaultHeader: false,
     showDefaultPalette: false,
+    enableGenerator: false,
     onSave: '(flow: FlowData) => void'
 }

packages/agentflow/examples/src/demos/ValidationActionsExample.tsx

@@ -0,0 +1,71 @@
+/**
+ * Canvas Actions Example
+ *
+ * Demonstrates how to add custom FAB buttons alongside the built-in validation
+ * button in the top-right canvas overlay using the `canvasActions` prop.
+ *
+ * Mirrors the legacy v2 pattern where a chat FAB and validation FAB sit side-by-side.
+ */
+
+import { useState } from 'react'
+
+import { Agentflow } from '@flowiseai/agentflow'
+import { Box, Dialog, DialogContent, DialogTitle, Fab, IconButton, Typography } from '@mui/material'
+import { IconMessage, IconX } from '@tabler/icons-react'
+
+import { apiBaseUrl, token } from '../config'
+
+function ChatFab() {
+    const [open, setOpen] = useState(false)
+
+    return (
+        <>
+            <Fab
+                size='small'
+                aria-label='chat'
+                title='Chat'
+                onClick={() => setOpen(true)}
+                sx={{
+                    color: 'white',
+                    backgroundColor: 'secondary.main',
+                    '&:hover': {
+                        backgroundColor: 'secondary.main',
+                        backgroundImage: 'linear-gradient(rgb(0 0 0/10%) 0 0)'
+                    }
+                }}
+            >
+                <IconMessage />
+            </Fab>
+
+            <Dialog open={open} onClose={() => setOpen(false)} maxWidth='sm' fullWidth>
+                <DialogTitle sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    Chat
+                    <IconButton size='small' onClick={() => setOpen(false)}>
+                        <IconX size={18} />
+                    </IconButton>
+                </DialogTitle>
+                <DialogContent>
+                    <Box sx={{ py: 4, textAlign: 'center' }}>
+                        <Typography variant='body2' color='text.secondary'>
+                            Your chat UI goes here. Full control — bring any component.
+                        </Typography>
+                    </Box>
+                </DialogContent>
+            </Dialog>
+        </>
+    )
+}
+
+export function ValidationActionsExample() {
+    return (
+        <div style={{ width: '100%', height: '100%' }}>
+            <Agentflow apiBaseUrl={apiBaseUrl} token={token ?? undefined} canvasActions={<ChatFab />} />
+        </div>
+    )
+}
+
+export const ValidationActionsExampleProps = {
+    apiBaseUrl: '{from environment variables}',
+    token: '{from environment variables}',
+    canvasActions: '<ChatFab />'
+}

packages/agentflow/examples/src/demos/index.ts

@@ -6,3 +6,4 @@ export * from './DarkModeExample'
 export * from './FilteredComponentsExample'
 export * from './MultiNodeFlow'
 export * from './StatusIndicatorsExample'
+export * from './ValidationActionsExample'

packages/agentflow/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flowiseai/agentflow",
-    "version": "0.0.0-dev.10",
+    "version": "0.0.0-dev.12",
     "description": "Embeddable React component for building and visualizing AI agent workflows",
     "license": "Apache-2.0",
     "repository": {
@@ -55,7 +55,7 @@
         "test": "jest",
         "test:watch": "jest --watch",
         "test:coverage": "jest --coverage",
-        "nuke": "rimraf dist node_modules .turbo",
+        "nuke": "pnpm clean && rimraf node_modules .turbo",
         "prepublishOnly": "npm run clean && npm run build"
     },
     "peerDependencies": {

packages/agentflow/src/Agentflow.test.tsx

@@ -6,14 +6,17 @@
 import { createRef } from 'react'
 
 import { fireEvent, render, waitFor } from '@testing-library/react'
+import mockAxios from 'axios'
 
-import type { AgentFlowInstance, FlowData } from './core/types'
+import type { AgentFlowInstance, AgentflowProps, FlowData } from './core/types'
 import { Agentflow } from './Agentflow'
 
 // Mock external dependencies - implementations in __mocks__/
 jest.mock('reactflow')
 jest.mock('axios')
 
+const mockGet = mockAxios.get as jest.Mock
+
 // Mock GenerateFlowDialog to expose callbacks for testing
 jest.mock('./features/generator', () => ({
     GenerateFlowDialog: ({
@@ -425,6 +428,30 @@ describe('Agentflow Component', () => {
         })
     })
 
+    describe('Canvas Actions', () => {
+        it('should render canvasActions content in the canvas', async () => {
+            const { getByTestId } = render(
+                <Agentflow {...defaultProps} canvasActions={<button data-testid='custom-action'>My Button</button>} />
+            )
+
+            await waitFor(() => {
+                expect(getByTestId('custom-action')).toBeInTheDocument()
+            })
+        })
+
+        it('should not render canvasActions in read-only mode', async () => {
+            const { container, queryByTestId } = render(
+                <Agentflow {...defaultProps} readOnly={true} canvasActions={<button data-testid='custom-action'>My Button</button>} />
+            )
+
+            await waitFor(() => {
+                expect(container.querySelector('.agentflow-container')).toBeInTheDocument()
+            })
+
+            expect(queryByTestId('custom-action')).not.toBeInTheDocument()
+        })
+    })
+
     describe('Imperative Ref', () => {
         it('should expose agentflow instance via ref', async () => {
             const ref = createRef<AgentFlowInstance>()
@@ -482,4 +509,106 @@ describe('Agentflow Component', () => {
             expect(document.getElementById('agentflow-css-variables')).not.toBeInTheDocument()
         })
     })
+
+    describe('Auto Start Node Initialization', () => {
+        const startNodeSchema = {
+            name: 'startAgentflow',
+            label: 'Start',
+            type: 'Start',
+            category: 'Agent Flows',
+            description: 'Start node',
+            baseClasses: ['Start'],
+            inputs: [],
+            outputs: [],
+            version: 1
+        }
+
+        beforeEach(() => {
+            // Mock API to return a startAgentflow node definition
+            mockGet.mockImplementation((url: string) => {
+                if (typeof url === 'string' && url.includes('/nodes')) {
+                    return Promise.resolve({ data: [startNodeSchema] })
+                }
+                return Promise.resolve({ data: [] })
+            })
+        })
+
+        afterEach(() => {
+            // Restore default mock (empty array)
+            mockGet.mockImplementation(() => Promise.resolve({ data: [] }))
+        })
+
+        /** Helper: render without initialFlow and assert Start node via ref */
+        const renderAndGetNodes = async (initialFlow?: FlowData | null) => {
+            const ref = createRef<AgentFlowInstance>()
+            const props: Record<string, unknown> = { apiBaseUrl: 'https://example.com', ref }
+            if (initialFlow !== undefined) props.initialFlow = initialFlow
+
+            render(<Agentflow {...(props as unknown as AgentflowProps)} />)
+
+            await waitFor(() => {
+                expect(ref.current).toBeDefined()
+                const flow = ref.current!.getFlow()
+                expect(flow.nodes.length).toBeGreaterThan(0)
+            })
+            return ref.current!.getFlow().nodes
+        }
+
+        it('should auto-add Start node when initialFlow is undefined', async () => {
+            const nodes = await renderAndGetNodes()
+            expect(nodes).toHaveLength(1)
+            expect(nodes[0].id).toBe('startAgentflow_0')
+            expect(nodes[0].data.name).toBe('startAgentflow')
+            expect(nodes[0].data.label).toBe('Start')
+        })
+
+        it('should auto-add Start node when initialFlow is null', async () => {
+            const nodes = await renderAndGetNodes(null)
+            expect(nodes).toHaveLength(1)
+            expect(nodes[0].data.name).toBe('startAgentflow')
+        })
+
+        it('should auto-add Start node when initialFlow has empty nodes', async () => {
+            const emptyFlow: FlowData = { nodes: [], edges: [], viewport: { x: 0, y: 0, zoom: 1 } }
+            const nodes = await renderAndGetNodes(emptyFlow)
+            expect(nodes).toHaveLength(1)
+            expect(nodes[0].data.name).toBe('startAgentflow')
+        })
+
+        it('should auto-add Start node when initialFlow is empty object', async () => {
+            const nodes = await renderAndGetNodes({} as FlowData)
+            expect(nodes).toHaveLength(1)
+            expect(nodes[0].data.name).toBe('startAgentflow')
+        })
+
+        it('should handle initialFlow with unrelated fields without errors', async () => {
+            const illegalFlow = { foo: 'bar', baz: 123 } as unknown as FlowData
+            const nodes = await renderAndGetNodes(illegalFlow)
+
+            expect(nodes).toHaveLength(1)
+            expect(nodes[0].data.name).toBe('startAgentflow')
+        })
+
+        it('should handle initialFlow with wrong types for nodes/edges without crashing', async () => {
+            const illegalFlow = { nodes: 'not-an-array', edges: 42 } as unknown as FlowData
+            const nodes = await renderAndGetNodes(illegalFlow)
+
+            // Non-array nodes/edges are safely ignored, auto-init adds Start node
+            expect(nodes).toHaveLength(1)
+            expect(nodes[0].data.name).toBe('startAgentflow')
+        })
+
+        it('should not auto-add Start node when initialFlow has nodes', async () => {
+            const ref = createRef<AgentFlowInstance>()
+            render(<Agentflow {...defaultProps} initialFlow={mockFlow} ref={ref} />)
+
+            await waitFor(() => {
+                expect(ref.current).toBeDefined()
+            })
+            const nodes = ref.current!.getFlow().nodes
+            // Should only have the one node from mockFlow, no duplicate Start added
+            const startNodes = nodes.filter((n) => n.data.name === 'startAgentflow')
+            expect(startNodes).toHaveLength(1)
+        })
+    })
 })