build agent builder UI with react flow

packages/components/agent-builder/README.md

@@ -0,0 +1,87 @@
+# @openassistant/agent-builder
+
+> Visual workflow builder for composing OpenAssistant tools into agents with React Flow.
+
+## Features
+
+- 📦 Automatically imports every tool that ships with OpenAssistant (plots, geoda, duckdb, osm, places, …) and makes them available as drag-and-drop nodes.
+- 🧱 Provides custom metadata nodes (name, description, result, error) so you can describe the agent contract right on the canvas.
+- 🕸️ Uses [React Flow](https://reactflow.dev/) to let you draw DAGs that represent the execution graph for the experimental AI SDK v5 `Agent` class.
+- 🧾 Generates a rich JSON schema (tools, metadata, adjacency, topological order, zod-powered parameter schemas) with a single `Create Agent` click.
+- 🎨 Modern Tailwind-based UI with search, grouping, and real-time schema preview.
+
+## Installation
+
+```bash
+yarn add @openassistant/agent-builder
+# or
+npm install @openassistant/agent-builder
+```
+
+This package ships as an ES module + CommonJS bundle and expects `react`, `react-dom`, and `reactflow` as peer dependencies.
+
+## Quick start
+
+```tsx
+import { AgentBuilder, defaultToolRegistry } from '@openassistant/agent-builder';
+import '@openassistant/agent-builder/dist/index.css';
+
+export function BuilderExample() {
+  return (
+    <div className="h-screen">
+      <AgentBuilder
+        tools={defaultToolRegistry}
+        onCreateAgent={(schema) => {
+          // Persist the schema or hydrate an Agent instance.
+          console.log(schema);
+        }}
+      />
+    </div>
+  );
+}
+```
+
+By default the builder loads every OpenAssistant tool it can find. You can limit or extend the catalog by passing your own `tools` prop (array of `AgentBuilderTool`).
+
+## JSON schema
+
+Click **Create Agent** to produce a schema shaped like:
+
+```json
+{
+  "agent": {
+    "name": "Spatial Analyst Agent",
+    "description": "Runs Moran scatterplot after DuckDB query",
+    "result": "GeoJSON feature collection",
+    "error": "Surface upstream DuckDB errors"
+  },
+  "workflow": {
+    "order": ["meta_agentName_ab1", "tool_duckdb_1", "tool_moran_2"],
+    "edges": [{ "id": "e1", "source": "tool_duckdb_1", "target": "tool_moran_2" }],
+    "adjacency": { "tool_duckdb_1": ["tool_moran_2"] }
+  },
+  "tools": [
+    {
+      "nodeId": "tool_duckdb_1",
+      "name": "duckdbQuery",
+      "description": "Run SQL queries against DuckDB",
+      "parametersSchema": { "...": "zod-based JSON schema" }
+    }
+  ],
+  "customNodes": [
+    { "nodeId": "meta_agentName_ab1", "type": "agentName", "value": "Spatial Analyst Agent" }
+  ]
+}
+```
+
+You can feed this JSON directly into downstream orchestration layers to instantiate the AI SDK Agent or to persist/share templates.
+
+## Customization tips
+
+- `customNodes`: provide your own metadata node definitions (label, description, placeholder).
+- `initialNodes` / `initialEdges`: hydrate the canvas from a previously saved schema.
+- Use `buildAgentSchema(nodes, edges)` if you need to generate the schema outside of the built-in button.
+
+## License
+
+MIT – see the root repository for details.

packages/components/agent-builder/esbuild.config.mjs

@@ -0,0 +1,78 @@
+// SPDX-License-Identifier: MIT
+// Copyright contributors to the openassistant project
+
+import {
+  createBaseConfig,
+  buildFormat,
+  createWatchMode,
+} from '../../../esbuild.config.mjs';
+import tailwindPlugin from 'esbuild-plugin-tailwindcss';
+
+const isStart = process.argv.includes('--start');
+const isWatch = process.argv.includes('--watch');
+
+const baseConfig = createBaseConfig({
+  entryPoints: ['src/index.ts'],
+  external: [
+    'react',
+    'react-dom',
+    'reactflow',
+    'clsx',
+    'tailwindcss',
+    'zod',
+    'zod-to-json-schema',
+    '@openassistant/utils',
+    '@openassistant/duckdb',
+    '@openassistant/geoda',
+    '@openassistant/h3',
+    '@openassistant/map',
+    '@openassistant/osm',
+    '@openassistant/places',
+    '@openassistant/plots',
+  ],
+  loader: {
+    '.js': 'jsx',
+    '.ts': 'tsx',
+    '.css': 'css',
+    '.svg': 'file',
+    '.png': 'file',
+  },
+  jsx: 'automatic',
+  plugins: [
+    tailwindPlugin({
+      config: './tailwind.config.js',
+    }),
+  ],
+  define: {
+    'process.env.NODE_ENV': isStart ? '"development"' : '"production"',
+  },
+  mainFields: ['module', 'main'],
+  resolveExtensions: ['.js', '.jsx', '.ts', '.tsx'],
+  nodePaths: ['node_modules'],
+});
+
+if (isWatch) {
+  const esmConfig = {
+    ...baseConfig,
+    format: 'esm',
+    outfile: 'dist/index.esm.js',
+  };
+  const cjsConfig = {
+    ...baseConfig,
+    format: 'cjs',
+    outfile: 'dist/index.cjs.js',
+    platform: 'node',
+    target: ['es2017'],
+  };
+
+  await createWatchMode(esmConfig);
+  await createWatchMode(cjsConfig);
+} else {
+  Promise.all([
+    buildFormat(baseConfig, 'esm', 'dist/index.esm.js'),
+    buildFormat(baseConfig, 'cjs', 'dist/index.cjs.js'),
+  ]).catch((error) => {
+    console.error(error);
+    process.exit(1);
+  });
+}

packages/components/agent-builder/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@openassistant/agent-builder",
+  "version": "1.0.0-alpha.0",
+  "author": "Xun Li<lixun910@gmail.com>",
+  "description": "Visual agent workflow builder for OpenAssistant tools",
+  "main": "./dist/index.cjs.js",
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.esm.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./dist/index.css": "./dist/index.esm.css",
+    "./dist/index.cjs.js": "./dist/index.cjs.js",
+    "./dist/index.esm.js": "./dist/index.esm.js"
+  },
+  "scripts": {
+    "build": "node ../../../node_modules/typescript/bin/tsc -p tsconfig.json && node esbuild.config.mjs",
+    "watch": "node esbuild.config.mjs --watch",
+    "prepublishOnly": "yarn build",
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx"
+  },
+  "keywords": [
+    "agent",
+    "workflow",
+    "react-flow",
+    "openassistant"
+  ],
+  "license": "MIT",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "package.json"
+  ],
+  "dependencies": {
+    "@openassistant/duckdb": "workspace:*",
+    "@openassistant/geoda": "workspace:*",
+    "@openassistant/h3": "workspace:*",
+    "@openassistant/map": "workspace:*",
+    "@openassistant/osm": "workspace:*",
+    "@openassistant/places": "workspace:*",
+    "@openassistant/plots": "workspace:*",
+    "@openassistant/utils": "workspace:*",
+    "clsx": "^2.1.1",
+    "reactflow": "^11.10.4",
+    "tailwindcss": "^3.4.17",
+    "zod": "^3.25.0",
+    "zod-to-json-schema": "^3.24.1"
+  },
+  "peerDependencies": {
+    "react": ">=18.2",
+    "react-dom": ">=18.2"
+  },
+  "devDependencies": {
+    "esbuild-plugin-tailwindcss": "^1.2.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "232930873ca397af1dbaa234a00c5d27dba29a26"
+}