From a88b6352252c90e3f57e53f8ad109abadb7f6570 Mon Sep 17 00:00:00 2001
From: Shreya Shankar <ss.shankar505@gmail.com>
Date: Wed, 30 Oct 2024 23:53:46 -0700
Subject: [PATCH] feat: add assistants

---
 website/package-lock.json                     | 619 +++++++++++++++++-
 website/package.json                          |   3 +
 website/src/app/api/chat/route.ts             |  17 +
 website/src/app/api/edit/route.ts             |  20 +
 website/src/app/playground/page.tsx           |  13 +-
 website/src/components/AIChatPanel.tsx        | 161 +++++
 website/src/components/AIEditPopover.tsx      |  57 ++
 .../src/components/InlineEditingButton.tsx    |  77 +++
 website/src/components/OperationCard.tsx      |  76 ++-
 website/src/components/PipelineGui.tsx        | 562 ++++++++--------
 website/src/components/ui/button.tsx          |   6 +-
 11 files changed, 1310 insertions(+), 301 deletions(-)
 create mode 100644 website/src/app/api/chat/route.ts
 create mode 100644 website/src/app/api/edit/route.ts
 create mode 100644 website/src/components/AIChatPanel.tsx
 create mode 100644 website/src/components/AIEditPopover.tsx
 create mode 100644 website/src/components/InlineEditingButton.tsx

diff --git a/website/package-lock.json b/website/package-lock.json
index 352b481c..adc8e15c 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@agbishop/react-ansi-18": "^4.0.6",
+        "@ai-sdk/openai": "^0.0.70",
         "@hookform/resolvers": "^3.9.0",
         "@next/third-parties": "^14.2.11",
         "@radix-ui/react-accordion": "^1.2.0",
@@ -32,6 +33,8 @@
         "@tanstack/react-query": "^5.59.15",
         "@tanstack/react-table": "^8.20.5",
         "@tanstack/react-virtual": "^3.10.8",
+        "@types/react-resizable": "^3.0.8",
+        "ai": "^3.4.29",
         "anser": "^2.3.0",
         "ansi-to-html": "^0.7.2",
         "axios": "^1.7.7",
@@ -99,6 +102,172 @@
         "react-dom": "^18.0.0"
       }
     },
+    "node_modules/@ai-sdk/openai": {
+      "version": "0.0.70",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/openai/-/openai-0.0.70.tgz",
+      "integrity": "sha512-RYLfiIG093bq6a3BJe2uUTL51zjxnDQLo4qHlNk3PLKSOxbb9Ap/vmhCLnPKo+flqFhqiD6YE9wuNZv++reHaA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "0.0.26",
+        "@ai-sdk/provider-utils": "1.0.22"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.0.0"
+      }
+    },
+    "node_modules/@ai-sdk/provider": {
+      "version": "0.0.26",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-0.0.26.tgz",
+      "integrity": "sha512-dQkfBDs2lTYpKM8389oopPdQgIU007GQyCbuPPrV+K6MtSII3HBfE0stUIMXUb44L+LK1t6GXPP7wjSzjO6uKg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "json-schema": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@ai-sdk/provider-utils": {
+      "version": "1.0.22",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-1.0.22.tgz",
+      "integrity": "sha512-YHK2rpj++wnLVc9vPGzGFP3Pjeld2MwhKinetA0zKXOoHAT/Jit5O8kZsxcSlJPu9wvcGT1UGZEjZrtO7PfFOQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "0.0.26",
+        "eventsource-parser": "^1.1.2",
+        "nanoid": "^3.3.7",
+        "secure-json-parse": "^2.7.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@ai-sdk/react": {
+      "version": "0.0.68",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/react/-/react-0.0.68.tgz",
+      "integrity": "sha512-dD7cm2UsPWkuWg+qKRXjF+sNLVcUzWUnV25FxvEliJP7I2ajOpq8c+/xyGlm+YodyvAB0fX+oSODOeIWi7lCKg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider-utils": "1.0.22",
+        "@ai-sdk/ui-utils": "0.0.49",
+        "swr": "^2.2.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "zod": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@ai-sdk/solid": {
+      "version": "0.0.53",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/solid/-/solid-0.0.53.tgz",
+      "integrity": "sha512-0yXkwTE75QKdmz40CBtAFy3sQdUnn/TNMTkTE2xfqC9YN7Ixql472TtC+3h6s4dPjRJm5bNnGJAWHwjT2PBmTw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider-utils": "1.0.22",
+        "@ai-sdk/ui-utils": "0.0.49"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.7.7"
+      },
+      "peerDependenciesMeta": {
+        "solid-js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@ai-sdk/svelte": {
+      "version": "0.0.56",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/svelte/-/svelte-0.0.56.tgz",
+      "integrity": "sha512-EmBHGxVkmC6Ugc2O3tH6+F0udYKUhdlqokKAdO3zZihpNCj4qC5msyzqbhRqX0415tD1eJib5SX2Sva47CHmLA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider-utils": "1.0.22",
+        "@ai-sdk/ui-utils": "0.0.49",
+        "sswr": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "svelte": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@ai-sdk/ui-utils": {
+      "version": "0.0.49",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/ui-utils/-/ui-utils-0.0.49.tgz",
+      "integrity": "sha512-urg0KYrfJmfEBSva9d132YRxAVmdU12ISGVlOV7yJkL86NPaU15qcRRWpOJqmMl4SJYkyZGyL1Rw9/GtLVurKw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "0.0.26",
+        "@ai-sdk/provider-utils": "1.0.22",
+        "json-schema": "^0.4.0",
+        "secure-json-parse": "^2.7.0",
+        "zod-to-json-schema": "^3.23.3"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@ai-sdk/vue": {
+      "version": "0.0.58",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/vue/-/vue-0.0.58.tgz",
+      "integrity": "sha512-8cuIekJV+jYz68Z+EDp8Df1WNiBEO1NOUGNCy+5gqIi+j382YjuhZfzC78zbzg0PndfF5JzcXhWPqmcc0loUQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider-utils": "1.0.22",
+        "@ai-sdk/ui-utils": "0.0.49",
+        "swrv": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.4"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -1597,6 +1766,15 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@opentelemetry/api": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
+      "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -3400,6 +3578,12 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/diff-match-patch": {
+      "version": "1.0.36",
+      "resolved": "https://registry.npmjs.org/@types/diff-match-patch/-/diff-match-patch-1.0.36.tgz",
+      "integrity": "sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -3560,6 +3744,15 @@
         "redux": "^4.0.0"
       }
     },
+    "node_modules/@types/react-resizable": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/react-resizable/-/react-resizable-3.0.8.tgz",
+      "integrity": "sha512-Pcvt2eGA7KNXldt1hkhVhAgZ8hK41m0mp89mFgQi7LAAEZiaLgm4fHJ5zbJZ/4m2LVaAyYrrRRv1LHDcrGQanA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.11",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
@@ -3811,6 +4004,128 @@
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
     },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.12.tgz",
+      "integrity": "sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.12",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz",
+      "integrity": "sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-core": "3.5.12",
+        "@vue/shared": "3.5.12"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.12.tgz",
+      "integrity": "sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.12",
+        "@vue/compiler-dom": "3.5.12",
+        "@vue/compiler-ssr": "3.5.12",
+        "@vue/shared": "3.5.12",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.47",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.12.tgz",
+      "integrity": "sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.12",
+        "@vue/shared": "3.5.12"
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.12.tgz",
+      "integrity": "sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/shared": "3.5.12"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.12.tgz",
+      "integrity": "sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/reactivity": "3.5.12",
+        "@vue/shared": "3.5.12"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.12.tgz",
+      "integrity": "sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/reactivity": "3.5.12",
+        "@vue/runtime-core": "3.5.12",
+        "@vue/shared": "3.5.12",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.12.tgz",
+      "integrity": "sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.12",
+        "@vue/shared": "3.5.12"
+      },
+      "peerDependencies": {
+        "vue": "3.5.12"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.12.tgz",
+      "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
@@ -3998,6 +4313,64 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/acorn-typescript": {
+      "version": "1.4.13",
+      "resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz",
+      "integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==",
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "acorn": ">=8.9.0"
+      }
+    },
+    "node_modules/ai": {
+      "version": "3.4.29",
+      "resolved": "https://registry.npmjs.org/ai/-/ai-3.4.29.tgz",
+      "integrity": "sha512-kkQEbskeYb8uCuVDSDlqHo5kDeD9So/v3/9VHtCXwhU63BGcp0oSJdtRQRXsREK4cBGzieTvEKwhsM2j3vQYwA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "0.0.26",
+        "@ai-sdk/provider-utils": "1.0.22",
+        "@ai-sdk/react": "0.0.68",
+        "@ai-sdk/solid": "0.0.53",
+        "@ai-sdk/svelte": "0.0.56",
+        "@ai-sdk/ui-utils": "0.0.49",
+        "@ai-sdk/vue": "0.0.58",
+        "@opentelemetry/api": "1.9.0",
+        "eventsource-parser": "1.1.2",
+        "json-schema": "^0.4.0",
+        "jsondiffpatch": "0.6.0",
+        "secure-json-parse": "^2.7.0",
+        "zod-to-json-schema": "^3.23.3"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "openai": "^4.42.0",
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "sswr": "^2.1.0",
+        "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0",
+        "zod": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "openai": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "sswr": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        },
+        "zod": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -4318,7 +4691,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
       "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -5441,6 +5813,12 @@
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
+    "node_modules/diff-match-patch": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
+      "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -6141,6 +6519,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/esm-env": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.1.4.tgz",
+      "integrity": "sha512-oO82nKPHKkzIj/hbtuDYy/JHqBHFlMIW36SDiPCVsj87ntDLcWN+sJ1erdVryd4NxODacFTsdrIE3b7IamqbOg==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/espree": {
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
@@ -6182,6 +6567,17 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/esrap": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.2.tgz",
+      "integrity": "sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@types/estree": "^1.0.1"
+      }
+    },
     "node_modules/esrecurse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
@@ -6210,6 +6606,13 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -6228,6 +6631,15 @@
         "node": ">=0.8.x"
       }
     },
+    "node_modules/eventsource-parser": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-1.1.2.tgz",
+      "integrity": "sha512-v0eOBUbiaFojBu2s2NPBfYUoRR9GjcDNvCXVaqEf5vVfpIAh9f8RCo4vXTP8c63QRKCFwoLpMpTdPwwhEKVgzA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -7293,6 +7705,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-reference": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
+      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -7648,6 +8070,12 @@
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "license": "(AFL-2.1 OR BSD-3-Clause)"
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -7696,6 +8124,35 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/jsondiffpatch": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/jsondiffpatch/-/jsondiffpatch-0.6.0.tgz",
+      "integrity": "sha512-3QItJOXp2AP1uv7waBkao5nCvhEv+QmJAd38Ybq7wNI74Q+BBmnLn4EDKz6yI9xGAIQoUF87qHt+kc1IVxB4zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/diff-match-patch": "^1.0.36",
+        "chalk": "^5.3.0",
+        "diff-match-patch": "^1.0.5"
+      },
+      "bin": {
+        "jsondiffpatch": "bin/jsondiffpatch.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/jsondiffpatch/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -7781,6 +8238,13 @@
         "node": ">=6.11.5"
       }
     },
+    "node_modules/locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -7845,6 +8309,16 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.12",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
+      "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
     "node_modules/makeerror": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@@ -8976,9 +9450,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.45",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
-      "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
+      "version": "8.4.47",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -8993,10 +9467,11 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.1",
-        "source-map-js": "^1.2.0"
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -9445,6 +9920,7 @@
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.5.tgz",
       "integrity": "sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==",
+      "license": "MIT",
       "dependencies": {
         "prop-types": "15.x",
         "react-draggable": "^4.0.3"
@@ -9815,6 +10291,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/secure-json-parse": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/secure-json-parse/-/secure-json-parse-2.7.0.tgz",
+      "integrity": "sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
@@ -9964,6 +10446,18 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
     },
+    "node_modules/sswr": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/sswr/-/sswr-2.1.0.tgz",
+      "integrity": "sha512-Cqc355SYlTAaUt8iDPaC/4DPPXK925PePLMxyBKuWd5kKc5mwsG3nT9+Mq2tyguL5s7b4Jg+IRMpTRsNTAfpSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "swrev": "^4.0.0"
+      },
+      "peerDependencies": {
+        "svelte": "^4.0.0 || ^5.0.0-next.0"
+      }
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
@@ -10297,6 +10791,69 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svelte": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.1.6.tgz",
+      "integrity": "sha512-bYS/DpkqXk0j5UZgiNXrEjZYPRZ4Ncd87w4KUSbcZGyojA0+i/Ls9OGUjETHmdLe8RcQ0G8SX/T0PypPpAA/ew==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@types/estree": "^1.0.5",
+        "acorn": "^8.12.1",
+        "acorn-typescript": "^1.4.13",
+        "aria-query": "^5.3.1",
+        "axobject-query": "^4.1.0",
+        "esm-env": "^1.0.0",
+        "esrap": "^1.2.2",
+        "is-reference": "^3.0.2",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.11",
+        "zimmerframe": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/svelte/node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/swr": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.5.tgz",
+      "integrity": "sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "^0.0.1",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/swrev": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/swrev/-/swrev-4.0.0.tgz",
+      "integrity": "sha512-LqVcOHSB4cPGgitD1riJ1Hh4vdmITOp+BkmfmXRh4hSF/t7EnS4iD+SOTmq7w5pPm/SiPeto4ADbKS6dHUDWFA==",
+      "license": "MIT"
+    },
+    "node_modules/swrv": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/swrv/-/swrv-1.0.4.tgz",
+      "integrity": "sha512-zjEkcP8Ywmj+xOJW3lIT65ciY/4AL4e/Or7Gj0MzU3zBJNMdJiT8geVZhINavnlHRMMCcJLHhraLTAiDOTmQ9g==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "vue": ">=3.2.26 < 4"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz",
@@ -10686,7 +11243,7 @@
       "version": "5.6.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
       "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -11122,6 +11679,15 @@
         }
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -11153,6 +11719,28 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/vue": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.12.tgz",
+      "integrity": "sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.12",
+        "@vue/compiler-sfc": "3.5.12",
+        "@vue/runtime-dom": "3.5.12",
+        "@vue/server-renderer": "3.5.12",
+        "@vue/shared": "3.5.12"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/walker": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
@@ -11491,14 +12079,31 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zimmerframe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
+      "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/zod": {
       "version": "3.23.8",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
       "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
     },
+    "node_modules/zod-to-json-schema": {
+      "version": "3.23.5",
+      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.23.5.tgz",
+      "integrity": "sha512-5wlSS0bXfF/BrL4jPAbz9da5hDlDptdEppYfe+x4eIJ7jioqKG9uUxOwPzqof09u/XeVdrgFu29lZi+8XNDJtA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "zod": "^3.23.3"
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/website/package.json b/website/package.json
index 3b3e3bba..c7128be6 100644
--- a/website/package.json
+++ b/website/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@agbishop/react-ansi-18": "^4.0.6",
+    "@ai-sdk/openai": "^0.0.70",
     "@hookform/resolvers": "^3.9.0",
     "@next/third-parties": "^14.2.11",
     "@radix-ui/react-accordion": "^1.2.0",
@@ -33,6 +34,8 @@
     "@tanstack/react-query": "^5.59.15",
     "@tanstack/react-table": "^8.20.5",
     "@tanstack/react-virtual": "^3.10.8",
+    "@types/react-resizable": "^3.0.8",
+    "ai": "^3.4.29",
     "anser": "^2.3.0",
     "ansi-to-html": "^0.7.2",
     "axios": "^1.7.7",
diff --git a/website/src/app/api/chat/route.ts b/website/src/app/api/chat/route.ts
new file mode 100644
index 00000000..028d9c08
--- /dev/null
+++ b/website/src/app/api/chat/route.ts
@@ -0,0 +1,17 @@
+import { openai } from "@ai-sdk/openai";
+import { streamText } from "ai";
+
+// Allow streaming responses up to 60 seconds
+export const maxDuration = 60;
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const result = await streamText({
+    model: openai("gpt-4o-mini"),
+    system: "You are a helpful assistant.",
+    messages,
+  });
+
+  return result.toDataStreamResponse();
+}
diff --git a/website/src/app/api/edit/route.ts b/website/src/app/api/edit/route.ts
new file mode 100644
index 00000000..097da2f2
--- /dev/null
+++ b/website/src/app/api/edit/route.ts
@@ -0,0 +1,20 @@
+import { NextResponse } from "next/server";
+import { Operation } from "@/app/types";
+
+export async function POST(request: Request) {
+  try {
+    const { operation, instruction } = await request.json();
+
+    // TODO: Implement your LLM API call here to modify the operation based on the instruction
+    // This is just a placeholder that returns the original operation
+    const updatedOperation: Operation = operation;
+
+    return NextResponse.json(updatedOperation);
+  } catch (error) {
+    console.error("Error in edit API:", error);
+    return NextResponse.json(
+      { error: "Failed to process edit request" },
+      { status: 500 }
+    );
+  }
+}
diff --git a/website/src/app/playground/page.tsx b/website/src/app/playground/page.tsx
index 883ce99c..168dc687 100644
--- a/website/src/app/playground/page.tsx
+++ b/website/src/app/playground/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import dynamic from "next/dynamic";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { Scroll, Info, Save } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
@@ -84,6 +84,7 @@ import {
 } from "@/utils/fileOperations";
 import * as localStorageKeys from "@/app/localStorageKeys";
 import { toast } from "@/hooks/use-toast";
+import AIChatPanel from "@/components/AIChatPanel";
 
 const LeftPanelIcon: React.FC<{ isActive: boolean }> = ({ isActive }) => (
   <svg
@@ -221,6 +222,7 @@ const CodeEditorPipelineApp: React.FC = () => {
   const [showFileExplorer, setShowFileExplorer] = useState(true);
   const [showOutput, setShowOutput] = useState(true);
   const [showDatasetView, setShowDatasetView] = useState(false);
+  const [showChat, setShowChat] = useState(false);
 
   const {
     operations,
@@ -355,11 +357,11 @@ const CodeEditorPipelineApp: React.FC = () => {
                 </MenubarContent>
               </MenubarMenu>
               <MenubarMenu>
-                <MenubarTrigger className="opacity-50 cursor-not-allowed">
-                  Assistant (Not Yet Available)
-                </MenubarTrigger>
+                <MenubarTrigger>Assistant</MenubarTrigger>
                 <MenubarContent>
-                  <MenubarItem disabled>Open Assistant</MenubarItem>
+                  <MenubarItem onSelect={() => setShowChat(!showChat)}>
+                    Toggle Chat
+                  </MenubarItem>
                 </MenubarContent>
               </MenubarMenu>
             </Menubar>
@@ -490,6 +492,7 @@ const CodeEditorPipelineApp: React.FC = () => {
             </TooltipProvider>
           </div>
         </div>
+        {showChat && <AIChatPanel onClose={() => setShowChat(false)} />}
         {/* Main content */}
         <ResizablePanelGroup direction="horizontal" className="flex-grow">
           {/* File Explorer and Bookmarks */}
diff --git a/website/src/components/AIChatPanel.tsx b/website/src/components/AIChatPanel.tsx
new file mode 100644
index 00000000..c3a72844
--- /dev/null
+++ b/website/src/components/AIChatPanel.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import React, { useRef, useState, useEffect } from "react";
+import { ResizableBox } from "react-resizable";
+import { X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useChat } from "ai/react";
+import { cn } from "@/lib/utils";
+import { Loader2, Scroll } from "lucide-react";
+import "react-resizable/css/styles.css";
+
+interface AIChatPanelProps {
+  onClose: () => void;
+}
+
+interface Message {
+  role: "assistant" | "user";
+  content: string;
+}
+
+const AIChatPanel: React.FC<AIChatPanelProps> = ({ onClose }) => {
+  const [position, setPosition] = useState({
+    x: window.innerWidth - 400,
+    y: 80,
+  });
+  const isDragging = useRef(false);
+  const dragOffset = useRef({ x: 0, y: 0 });
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+  const { messages, input, handleInputChange, handleSubmit, isLoading } =
+    useChat({
+      keepLastMessageOnError: true,
+    });
+
+  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    if ((e.target as HTMLElement).classList.contains("drag-handle")) {
+      isDragging.current = true;
+      dragOffset.current = {
+        x: e.clientX - position.x,
+        y: e.clientY - position.y,
+      };
+    }
+  };
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (isDragging.current) {
+      setPosition({
+        x: Math.max(
+          0,
+          Math.min(window.innerWidth - 400, e.clientX - dragOffset.current.x)
+        ),
+        y: Math.max(
+          0,
+          Math.min(window.innerHeight - 600, e.clientY - dragOffset.current.y)
+        ),
+      });
+    }
+  };
+
+  const handleMouseUp = () => {
+    isDragging.current = false;
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (scrollAreaRef.current) {
+      scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: position.y,
+        left: position.x,
+        zIndex: 9999,
+      }}
+    >
+      <ResizableBox
+        width={400}
+        height={500}
+        minConstraints={[300, 400]}
+        maxConstraints={[800, 800]}
+        resizeHandles={["sw", "se"]}
+        className="bg-white rounded-lg shadow-lg border overflow-hidden"
+      >
+        <div
+          className="h-6 bg-gray-100 drag-handle flex justify-between items-center px-2 cursor-move"
+          onMouseDown={handleMouseDown}
+        >
+          <span className="text-sm text-primary font-medium">
+            <Scroll size={14} />
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-5 w-5 p-0"
+            onClick={onClose}
+          >
+            <X size={14} />
+          </Button>
+        </div>
+        <div className="flex flex-col h-[calc(100%-24px)]">
+          <ScrollArea ref={scrollAreaRef} className="flex-1 p-4">
+            {messages.map((message, index) => (
+              <div
+                key={index}
+                className={cn(
+                  "mb-2 flex",
+                  message.role === "assistant" ? "justify-start" : "justify-end"
+                )}
+              >
+                <div
+                  className={cn(
+                    "rounded-lg px-3 py-2 max-w-[80%]",
+                    message.role === "assistant"
+                      ? "bg-gray-100 text-gray-900"
+                      : "bg-primary text-white"
+                  )}
+                >
+                  {message.content}
+                </div>
+              </div>
+            ))}
+            {isLoading && (
+              <div className="flex justify-center">
+                <Loader2 className="h-4 w-4 animate-spin" />
+              </div>
+            )}
+          </ScrollArea>
+          <form
+            onSubmit={handleSubmit}
+            className="border-t p-4 flex gap-2 items-center"
+          >
+            <Input
+              value={input}
+              onChange={handleInputChange}
+              placeholder="Ask a question..."
+              className="flex-1"
+            />
+            <Button type="submit" size="sm" disabled={isLoading}>
+              Send
+            </Button>
+          </form>
+        </div>
+      </ResizableBox>
+    </div>
+  );
+};
+
+export default AIChatPanel;
diff --git a/website/src/components/AIEditPopover.tsx b/website/src/components/AIEditPopover.tsx
new file mode 100644
index 00000000..adc052f0
--- /dev/null
+++ b/website/src/components/AIEditPopover.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { PopoverContent } from "@/components/ui/popover";
+
+interface AIEditPopoverProps {
+  onSubmit: (instruction: string) => void;
+}
+
+export const AIEditPopover: React.FC<AIEditPopoverProps> = React.memo(
+  ({ onSubmit }) => {
+    const [instruction, setInstruction] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+      e.preventDefault();
+      if (!instruction.trim()) return;
+
+      setIsLoading(true);
+      try {
+        await onSubmit(instruction);
+        setInstruction("");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    return (
+      <PopoverContent>
+        <form onSubmit={handleSubmit}>
+          <div className="grid gap-2">
+            <p className="text-sm text-muted-foreground">
+              Describe how you want to modify this operation.
+            </p>
+            <div className="grid gap-2">
+              <Textarea
+                placeholder="e.g. Make the prompt more concise"
+                value={instruction}
+                onChange={(e) => setInstruction(e.target.value)}
+                disabled={isLoading}
+              />
+              <Button type="submit" disabled={!instruction.trim() || isLoading}>
+                {isLoading ? (
+                  <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-white"></div>
+                ) : (
+                  "Apply"
+                )}
+              </Button>
+            </div>
+          </div>
+        </form>
+      </PopoverContent>
+    );
+  }
+);
+
+AIEditPopover.displayName = "AIEditPopover";
diff --git a/website/src/components/InlineEditingButton.tsx b/website/src/components/InlineEditingButton.tsx
new file mode 100644
index 00000000..d0fe5704
--- /dev/null
+++ b/website/src/components/InlineEditingButton.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import React from "react";
+import { Wand2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Textarea } from "@/components/ui/textarea";
+
+interface InlineEditingButtonProps {
+  selectedText: string;
+  onSubmit: (instruction: string) => void;
+}
+
+const InlineEditingButton: React.FC<InlineEditingButtonProps> = ({
+  selectedText,
+  onSubmit,
+}) => {
+  const [instruction, setInstruction] = React.useState("");
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const handleSubmit = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (instruction.trim()) {
+      onSubmit(instruction);
+      setInstruction("");
+      setIsOpen(false);
+    }
+  };
+
+  const handleButtonClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsOpen(true);
+  };
+
+  return (
+    <Popover modal={true} open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild onClick={handleButtonClick}>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6 absolute bg-background shadow-sm border"
+        >
+          <Wand2 className="h-4 w-4" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80" sideOffset={5}>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            handleSubmit(e as any);
+          }}
+        >
+          <div className="space-y-4">
+            <div className="text-sm text-muted-foreground">
+              Selected text: {selectedText}
+            </div>
+            <Textarea
+              placeholder="Enter your instruction for editing..."
+              value={instruction}
+              onChange={(e) => setInstruction(e.target.value)}
+            />
+            <Button type="submit" className="w-full">
+              Submit
+            </Button>
+          </div>
+        </form>
+      </PopoverContent>
+    </Popover>
+  );
+};
+export default InlineEditingButton;
diff --git a/website/src/components/OperationCard.tsx b/website/src/components/OperationCard.tsx
index 95e834af..3ad0eef7 100644
--- a/website/src/components/OperationCard.tsx
+++ b/website/src/components/OperationCard.tsx
@@ -29,6 +29,7 @@ import {
   Zap,
   Settings,
   ListCollapse,
+  Wand2,
 } from "lucide-react";
 import { Operation, SchemaItem } from "@/app/types";
 import { usePipelineContext } from "@/contexts/PipelineContext";
@@ -39,6 +40,12 @@ import { Guardrails } from "./operations/args";
 import createOperationComponent from "./operations/components";
 import { useWebSocket } from "@/contexts/WebSocketContext";
 import { Badge } from "./ui/badge";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { AIEditPopover } from "@/components/AIEditPopover";
 
 // Separate components
 const OperationHeader: React.FC<{
@@ -53,6 +60,7 @@ const OperationHeader: React.FC<{
   onToggleSettings: () => void;
   onShowOutput: () => void;
   onOptimize: () => void;
+  onAIEdit: (instruction: string) => void;
 }> = React.memo(
   ({
     name,
@@ -66,6 +74,7 @@ const OperationHeader: React.FC<{
     onToggleSettings,
     onShowOutput,
     onOptimize,
+    onAIEdit,
   }) => {
     const [isEditing, setIsEditing] = useState(false);
     const [editedName, setEditedName] = useState(name);
@@ -120,10 +129,27 @@ const OperationHeader: React.FC<{
               </TooltipContent>
             </Tooltip>
           </TooltipProvider>
-
-          {/* <Button variant="ghost" size="sm" className="p-0.25 h-6 w-6" onClick={onRunOperation}>
-          <Play size={14} className="text-green-500" />
-        </Button> */}
+          <Popover>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="p-0.25 h-6 w-6"
+                    >
+                      <Wand2 size={14} className="text-purple-500" />
+                    </Button>
+                  </PopoverTrigger>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Assisted edit</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+            <AIEditPopover onSubmit={onAIEdit} />
+          </Popover>
         </div>
 
         {/* Centered title */}
@@ -647,6 +673,45 @@ export const OperationCard: React.FC<{ index: number }> = ({ index }) => {
     toast,
   ]);
 
+  const handleAIEdit = useCallback(
+    async (instruction: string) => {
+      if (!operation) return;
+
+      try {
+        const response = await fetch("/api/edit", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            operation,
+            instruction,
+          }),
+        });
+
+        if (!response.ok) {
+          throw new Error("Failed to apply AI edit");
+        }
+
+        const updatedOperation = await response.json();
+        handleOperationUpdate(updatedOperation);
+
+        toast({
+          title: "Success",
+          description: "Operation updated successfully",
+        });
+      } catch (error) {
+        console.error("Error applying AI edit:", error);
+        toast({
+          title: "Error",
+          description: "Failed to apply AI edit",
+          variant: "destructive",
+        });
+      }
+    },
+    [operation, handleOperationUpdate, toast]
+  );
+
   if (!operation) {
     return <SkeletonCard />;
   }
@@ -702,6 +767,7 @@ export const OperationCard: React.FC<{ index: number }> = ({ index }) => {
                 onToggleSettings={() => dispatch({ type: "TOGGLE_SETTINGS" })}
                 onShowOutput={onShowOutput}
                 onOptimize={onOptimize}
+                onAIEdit={handleAIEdit}
               />
               <CardContent className="py-2 px-3">
                 {createOperationComponent(
@@ -757,5 +823,3 @@ const SkeletonCard: React.FC = () => (
     </Card>
   </div>
 );
-
-export default OperationCard;
diff --git a/website/src/components/PipelineGui.tsx b/website/src/components/PipelineGui.tsx
index e85f68cf..3609208b 100644
--- a/website/src/components/PipelineGui.tsx
+++ b/website/src/components/PipelineGui.tsx
@@ -473,294 +473,296 @@ const PipelineGUI: React.FC = () => {
   };
 
   return (
-    <div className="h-full overflow-auto">
-      <div className="sticky top-0 z-10 p-2 bg-white">
-        <div className="flex justify-between items-center">
-          <div className="flex items-center space-x-2">
-            <h2 className="text-sm font-bold uppercase">
-              {pipelineName.toUpperCase()}
-            </h2>
-            {sampleSize && (
-              <TooltipProvider delayDuration={0}>
-                <Tooltip>
-                  <TooltipTrigger>
-                    <div className="flex items-center">
-                      <PieChart size={16} className="text-primary mr-2" />
-                      <span className="text-xs text-primary">
-                        {sampleSize} samples
-                      </span>
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent className="max-w-[200px]">
-                    <p>
-                      Pipeline will run on a sample of {sampleSize} random
-                      documents.
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            )}
-            <div className="flex p-0 space-x-0">
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => fileInputRef.current?.click()}
-                    >
-                      <FileUp size={16} />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>Initialize from config file</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-              <Input
-                type="file"
-                ref={fileInputRef}
-                onChange={handleFileUpload}
-                accept=".yaml,.yml"
-                className="hidden"
-              />
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      onClick={() => handleExport()}
-                    >
-                      <Download size={16} />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>Download pipeline config file</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-
-              <Button
-                size="icon"
-                variant="ghost"
-                onClick={() => setIsSettingsOpen(true)}
-              >
-                <Settings size={16} />
-              </Button>
+    <div className="relative">
+      <div className="h-full overflow-auto">
+        <div className="sticky top-0 z-10 p-2 bg-white">
+          <div className="flex justify-between items-center">
+            <div className="flex items-center space-x-2">
+              <h2 className="text-sm font-bold uppercase">
+                {pipelineName.toUpperCase()}
+              </h2>
+              {sampleSize && (
+                <TooltipProvider delayDuration={0}>
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <div className="flex items-center">
+                        <PieChart size={16} className="text-primary mr-2" />
+                        <span className="text-xs text-primary">
+                          {sampleSize} samples
+                        </span>
+                      </div>
+                    </TooltipTrigger>
+                    <TooltipContent className="max-w-[200px]">
+                      <p>
+                        Pipeline will run on a sample of {sampleSize} random
+                        documents.
+                      </p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
+              <div className="flex p-0 space-x-0">
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => fileInputRef.current?.click()}
+                      >
+                        <FileUp size={16} />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Initialize from config file</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+                <Input
+                  type="file"
+                  ref={fileInputRef}
+                  onChange={handleFileUpload}
+                  accept=".yaml,.yml"
+                  className="hidden"
+                />
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        onClick={() => handleExport()}
+                      >
+                        <Download size={16} />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Download pipeline config file</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  onClick={() => setIsSettingsOpen(true)}
+                >
+                  <Settings size={16} />
+                </Button>
+              </div>
+            </div>
+            <div className="flex space-x-2">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button size="sm" className="rounded-sm">
+                    <Plus size={16} className="mr-2" /> Add Operation{" "}
+                    <ChevronDown size={16} className="ml-2" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  <DropdownMenuLabel>LLM Operations</DropdownMenuLabel>
+                  <DropdownMenuItem
+                    onClick={() =>
+                      handleAddOperation("LLM", "map", "Untitled Map")
+                    }
+                  >
+                    Map
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() =>
+                      handleAddOperation("LLM", "reduce", "Untitled Reduce")
+                    }
+                  >
+                    Reduce
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() =>
+                      handleAddOperation("LLM", "resolve", "Untitled Resolve")
+                    }
+                  >
+                    Resolve
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() =>
+                      handleAddOperation("LLM", "filter", "Untitled Filter")
+                    }
+                  >
+                    Filter
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() =>
+                      handleAddOperation(
+                        "LLM",
+                        "parallel_map",
+                        "Untitled Parallel Map"
+                      )
+                    }
+                  >
+                    Parallel Map
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuLabel>Non-LLM Operations</DropdownMenuLabel>
+                  <DropdownMenuItem
+                    onClick={() =>
+                      handleAddOperation("non-LLM", "unnest", "Untitled Unnest")
+                    }
+                  >
+                    Unnest
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() =>
+                      handleAddOperation("non-LLM", "split", "Untitled Split")
+                    }
+                  >
+                    Split
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() =>
+                      handleAddOperation("non-LLM", "gather", "Untitled Gather")
+                    }
+                  >
+                    Gather
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() =>
+                      handleAddOperation("non-LLM", "sample", "Untitled Sample")
+                    }
+                  >
+                    Sample
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <div className="flex space-x-2">
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        size="sm"
+                        className="rounded-sm"
+                        disabled={isLoadingOutputs}
+                        onClick={() => onRunAll(true)}
+                      >
+                        <RefreshCw size={16} className="mr-2" /> Clear and Run
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>The cache will be cleared before running</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        size="sm"
+                        className="rounded-sm"
+                        disabled={isLoadingOutputs}
+                        onClick={() => onRunAll(false)}
+                      >
+                        <Play size={16} className="mr-2" /> Run
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>This will use any cached outputs if applicable</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
             </div>
           </div>
-          <div className="flex space-x-2">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button size="sm" className="rounded-sm">
-                  <Plus size={16} className="mr-2" /> Add Operation{" "}
-                  <ChevronDown size={16} className="ml-2" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuLabel>LLM Operations</DropdownMenuLabel>
-                <DropdownMenuItem
-                  onClick={() =>
-                    handleAddOperation("LLM", "map", "Untitled Map")
-                  }
-                >
-                  Map
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={() =>
-                    handleAddOperation("LLM", "reduce", "Untitled Reduce")
-                  }
-                >
-                  Reduce
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={() =>
-                    handleAddOperation("LLM", "resolve", "Untitled Resolve")
-                  }
-                >
-                  Resolve
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={() =>
-                    handleAddOperation("LLM", "filter", "Untitled Filter")
-                  }
+        </div>
+        <div className="p-2">
+          <DragDropContext onDragEnd={handleDragEnd}>
+            <Droppable droppableId="operations" type="operation">
+              {(provided, snapshot) => (
+                <div
+                  {...provided.droppableProps}
+                  ref={provided.innerRef}
+                  className={`space-y-2 ${
+                    snapshot.isDraggingOver ? "bg-gray-50" : ""
+                  }`}
                 >
-                  Filter
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={() =>
-                    handleAddOperation(
-                      "LLM",
-                      "parallel_map",
-                      "Untitled Parallel Map"
+                  {operations.map((op, index) => (
+                    <OperationCard key={op.id} index={index} />
+                  ))}
+                  {provided.placeholder}
+                </div>
+              )}
+            </Droppable>
+          </DragDropContext>
+        </div>
+        <Dialog open={isSettingsOpen} onOpenChange={setIsSettingsOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Pipeline Settings</DialogTitle>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="name" className="text-right">
+                  Name
+                </Label>
+                <Input
+                  id="name"
+                  value={tempPipelineName}
+                  onChange={(e) => setTempPipelineName(e.target.value)}
+                  className="col-span-3"
+                />
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="sampling" className="text-right">
+                  Sample Size
+                </Label>
+                <Input
+                  id="sampling"
+                  type="number"
+                  value={tempSampleSize}
+                  onChange={(e) => setTempSampleSize(e.target.value)}
+                  placeholder="None"
+                  className="col-span-3"
+                />
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="currentFile" className="text-right">
+                  Dataset JSON
+                </Label>
+                <Select
+                  value={tempCurrentFile?.path || ""}
+                  onValueChange={(value) =>
+                    setTempCurrentFile(
+                      files.find((file) => file.path === value) || null
                     )
                   }
                 >
-                  Parallel Map
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuLabel>Non-LLM Operations</DropdownMenuLabel>
-                <DropdownMenuItem
-                  onClick={() =>
-                    handleAddOperation("non-LLM", "unnest", "Untitled Unnest")
-                  }
-                >
-                  Unnest
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={() =>
-                    handleAddOperation("non-LLM", "split", "Untitled Split")
-                  }
-                >
-                  Split
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={() =>
-                    handleAddOperation("non-LLM", "gather", "Untitled Gather")
-                  }
-                >
-                  Gather
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={() =>
-                    handleAddOperation("non-LLM", "sample", "Untitled Sample")
-                  }
-                >
-                  Sample
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <div className="flex space-x-2">
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      size="sm"
-                      className="rounded-sm"
-                      disabled={isLoadingOutputs}
-                      onClick={() => onRunAll(true)}
-                    >
-                      <RefreshCw size={16} className="mr-2" /> Clear and Run
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>The cache will be cleared before running</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      size="sm"
-                      className="rounded-sm"
-                      disabled={isLoadingOutputs}
-                      onClick={() => onRunAll(false)}
-                    >
-                      <Play size={16} className="mr-2" /> Run
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>This will use any cached outputs if applicable</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="p-2">
-        <DragDropContext onDragEnd={handleDragEnd}>
-          <Droppable droppableId="operations" type="operation">
-            {(provided, snapshot) => (
-              <div
-                {...provided.droppableProps}
-                ref={provided.innerRef}
-                className={`space-y-2 ${
-                  snapshot.isDraggingOver ? "bg-gray-50" : ""
-                }`}
-              >
-                {operations.map((op, index) => (
-                  <OperationCard key={op.id} index={index} />
-                ))}
-                {provided.placeholder}
+                  <SelectTrigger className="col-span-3">
+                    <SelectValue placeholder="Select a file" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {files.map((file) => (
+                      <SelectItem key={file.path} value={file.path}>
+                        {file.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="defaultModel" className="text-right">
+                  Default Model
+                </Label>
+                <Input
+                  id="defaultModel"
+                  value={tempDefaultModel}
+                  onChange={(e) => setTempDefaultModel(e.target.value)}
+                  className="col-span-3"
+                />
               </div>
-            )}
-          </Droppable>
-        </DragDropContext>
-      </div>
-      <Dialog open={isSettingsOpen} onOpenChange={setIsSettingsOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Pipeline Settings</DialogTitle>
-          </DialogHeader>
-          <div className="grid gap-4 py-4">
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="name" className="text-right">
-                Name
-              </Label>
-              <Input
-                id="name"
-                value={tempPipelineName}
-                onChange={(e) => setTempPipelineName(e.target.value)}
-                className="col-span-3"
-              />
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="sampling" className="text-right">
-                Sample Size
-              </Label>
-              <Input
-                id="sampling"
-                type="number"
-                value={tempSampleSize}
-                onChange={(e) => setTempSampleSize(e.target.value)}
-                placeholder="None"
-                className="col-span-3"
-              />
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="currentFile" className="text-right">
-                Dataset JSON
-              </Label>
-              <Select
-                value={tempCurrentFile?.path || ""}
-                onValueChange={(value) =>
-                  setTempCurrentFile(
-                    files.find((file) => file.path === value) || null
-                  )
-                }
-              >
-                <SelectTrigger className="col-span-3">
-                  <SelectValue placeholder="Select a file" />
-                </SelectTrigger>
-                <SelectContent>
-                  {files.map((file) => (
-                    <SelectItem key={file.path} value={file.path}>
-                      {file.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="defaultModel" className="text-right">
-                Default Model
-              </Label>
-              <Input
-                id="defaultModel"
-                value={tempDefaultModel}
-                onChange={(e) => setTempDefaultModel(e.target.value)}
-                className="col-span-3"
-              />
             </div>
-          </div>
-          <DialogFooter>
-            <Button onClick={handleSettingsSave}>Save changes</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+            <DialogFooter>
+              <Button onClick={handleSettingsSave}>Save changes</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
     </div>
   );
 };
diff --git a/website/src/components/ui/button.tsx b/website/src/components/ui/button.tsx
index 225e1138..95438eeb 100644
--- a/website/src/components/ui/button.tsx
+++ b/website/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center rounded-sm text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -31,7 +31,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
+  }
 );
 
 export interface ButtonProps
@@ -50,7 +50,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       />
     );
-  },
+  }
 );
 Button.displayName = "Button";