workflow-01

Live preview

Install it

Source

1"use client";
2 
3import {
4	Background,
5	Controls,
6	type EdgeTypes,
7	MiniMap,
8	type NodeTypes,
9	ReactFlow,
10	ReactFlowProvider,
11	useOnSelectionChange,
12	useReactFlow,
13} from "@xyflow/react";
14import { type DragEvent, useCallback, useEffect, useState } from "react";
15import { shallow } from "zustand/shallow";
16import "@xyflow/react/dist/style.css";
17import { useChat } from "@ai-sdk/react";
18import { DefaultChatTransport } from "ai";
19import { Workflow } from "lucide-react";
20import { useTheme } from "next-themes";
21import { SidebarTrigger } from "@/components/ui/sidebar";
22import {
23	AppHeader,
24	AppHeaderIcon,
25	AppHeaderSeparator,
26	AppHeaderTitle,
27} from "@/registry/blocks/workflow-01/components/app-header";
28import {
29	AppLayout,
30	AppLayoutInset,
31	AppLayoutSidebar,
32} from "@/registry/blocks/workflow-01/components/app-layout";
33import { Chat } from "@/registry/blocks/workflow-01/components/chat";
34import { NodeEditorPanel } from "@/registry/blocks/workflow-01/components/node-editor-panel";
35import { NodeSelectorPanel } from "@/registry/blocks/workflow-01/components/node-selector-panel";
36import { TemplateSelector } from "@/registry/blocks/workflow-01/components/template-selector";
37import { ThemeToggle } from "@/registry/blocks/workflow-01/components/theme-toggle";
38import { ValidationStatus } from "@/registry/blocks/workflow-01/components/validation-status";
39import { StatusEdge } from "@/registry/blocks/workflow-01/components/workflow/status-edge";
40import { useWorkflow } from "@/registry/blocks/workflow-01/hooks/use-workflow";
41import {
42	DEFAULT_TEMPLATE,
43	getTemplateById,
44} from "@/registry/blocks/workflow-01/lib/templates";
45import { getAllNodeDefinitions } from "@/registry/blocks/workflow-01/lib/workflow/nodes";
46import type { WorkflowUIMessage } from "@/registry/blocks/workflow-01/types/messages";
47import type { FlowNode } from "@/registry/blocks/workflow-01/types/workflow";
48 
49const nodeDefinitions = getAllNodeDefinitions();
50const nodeTypes: NodeTypes = {} as NodeTypes;
51for (const definition of nodeDefinitions) {
52	// biome-ignore lint/suspicious/noExplicitAny: ReactFlow nodeTypes accepts any component type
53	nodeTypes[definition.shared.type] = definition.client.component as any;
54}
55 
56const edgeTypes: EdgeTypes = {
57	status: StatusEdge,
58};
59 
60export function Flow() {
61	const { theme } = useTheme();
62	const store = useWorkflow(
63		(store) => ({
64			nodes: store.nodes,
65			edges: store.edges,
66			onNodesChange: store.onNodesChange,
67			onEdgesChange: store.onEdgesChange,
68// … truncated

What it pulls in

npm packages

• @xyflow/react
• zustand
• zod
• ai
• @ai-sdk/react
• @ai-sdk/openai
• nanoid
• @marcbachmann/cel-js
• @uiw/react-codemirror
• @codemirror/language
• @lezer/highlight
• lucide-react
• next-themes

Other registry items

• button
• card
• dialog
• input
• textarea
• sonner
• sidebar
• badge
• checkbox
• collapsible
• dropdown-menu
• popover
• select
• switch
• tooltip
• separator
• @simple-ai/chat-input
• @simple-ai/chat-message-area
• @simple-ai/chat-message
• @simple-ai/tool-invocation
• @simple-ai/chat-suggestions
• @simple-ai/reasoning
• @simple-ai/json-schema-editor

Files it writes

• ./src/registry/blocks/workflow-01/page.tsx
• ./src/registry/blocks/workflow-01/route.ts
• ./src/registry/blocks/workflow-01/components/app-header.tsx
• ./src/registry/blocks/workflow-01/components/app-layout.tsx
• ./src/registry/blocks/workflow-01/components/chat.tsx
• ./src/registry/blocks/workflow-01/components/editor/condition-editor.tsx
• ./src/registry/blocks/workflow-01/components/editor/condition-editor.css
• ./src/registry/blocks/workflow-01/components/node-editor-panel.tsx
• ./src/registry/blocks/workflow-01/components/node-execution.tsx
• ./src/registry/blocks/workflow-01/components/node-selector-panel.tsx
• ./src/registry/blocks/workflow-01/components/template-selector.tsx
• ./src/registry/blocks/workflow-01/components/theme-provider.tsx
• ./src/registry/blocks/workflow-01/components/theme-toggle.tsx
• ./src/registry/blocks/workflow-01/components/validation-status.tsx
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/index.ts
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/agent/agent.shared.ts
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/agent/agent.client.tsx
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/agent/agent.server.ts
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/agent/index.ts
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/if-else/if-else.shared.ts
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/if-else/if-else.client.tsx
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/if-else/if-else.server.ts
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/if-else/index.ts
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/start/start.shared.ts
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/start/start.client.tsx
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/start/start.server.ts
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/start/index.ts
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/end/end.shared.ts
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/end/end.client.tsx
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/end/end.server.ts
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/end/index.ts
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/note/note.shared.ts
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/note/note.client.tsx
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/note/note.server.ts
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/note/index.ts
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/wait/wait.shared.ts
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/wait/wait.client.tsx
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/wait/wait.server.ts
• ./src/registry/blocks/workflow-01/lib/workflow/nodes/wait/index.ts
• ./src/registry/blocks/workflow-01/components/workflow/primitives/base-handle.tsx