langchain-ai · Palashio · Sep 9, 2025 · Sep 9, 2025 · Sep 9, 2025 · Sep 9, 2025
diff --git a/apps/web-v2/public/icons/intro-arrow.svg b/apps/web-v2/public/icons/intro-arrow.svg
diff --git a/apps/web-v2/src/app/(app)/layout.tsx b/apps/web-v2/src/app/(app)/layout.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { AuthProvider } from "@/providers/Auth";
 import { AuthenticatedApp } from "@/components/AuthenticatedApp";
+import Script from "next/script";
 
 export const metadata: Metadata = {
   title: "Open Agent Platform",
@@ -17,22 +18,19 @@ export default function RootLayout({
 }>) {
   const isDebugMode = process.env.NEXT_PUBLIC_DEBUG_MODE === "true";
   return (
-    <html lang="en">
-      <head>
-        {process.env.NODE_ENV !== "production" && isDebugMode && (
-          <script
-            crossOrigin="anonymous"
-            src="//unpkg.com/react-scan/dist/auto.global.js"
-          />
-        )}
-      </head>
-      <body>
-        <NuqsAdapter>
-          <AuthProvider>
-            <AuthenticatedApp>{children}</AuthenticatedApp>
-          </AuthProvider>
-        </NuqsAdapter>
-      </body>
-    </html>
+    <>
+      {process.env.NODE_ENV !== "production" && isDebugMode && (
+        <Script
+          src="//unpkg.com/react-scan/dist/auto.global.js"
+          crossOrigin="anonymous"
+          strategy="afterInteractive"
+        />
+      )}
+      <NuqsAdapter>
+        <AuthProvider>
+          <AuthenticatedApp>{children}</AuthenticatedApp>
+        </AuthProvider>
+      </NuqsAdapter>
+    </>
   );
 }
diff --git a/apps/web-v2/src/app/onboarding/page.tsx b/apps/web-v2/src/app/onboarding/page.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import React from "react";
+import OnboardingDialog from "@/features/onboarding/OnboardingDialog";
+import { MCPProvider } from "@/providers/MCP";
+import { AuthProvider } from "@/providers/Auth";
+
+export default function OnboardingPage() {
+  return (
+    <AuthProvider>
+      <MCPProvider>
+        <OnboardingDialog initialOpen={true} />
+      </MCPProvider>
+    </AuthProvider>
+  );
+}
diff --git a/apps/web-v2/src/features/agents/components/create-edit-agent-dialogs/create-agent-dialog.tsx b/apps/web-v2/src/features/agents/components/create-edit-agent-dialogs/create-agent-dialog.tsx
@@ -9,7 +9,7 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { useAgents } from "@/hooks/use-agents";
-import { Bot, LoaderCircle, X } from "lucide-react";
+import { Bot, X } from "lucide-react";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { useAgentsContext } from "@/providers/Agents";
@@ -28,6 +28,7 @@ import { ToolAuthRequiredAlert } from "./tool-auth-required-alert";
 import { AgentFormValues } from "./types";
 import { DeepAgentConfiguration } from "@/types/deep-agent";
 import { DEFAULT_FORM_CONFIG, prepareConfigForSaving } from "./utils";
+import Loading from "@/components/ui/loading";
 
 interface CreateAgentDialogProps {
   agentId?: string;
@@ -86,52 +87,62 @@ function CreateAgentFormContent(props: {
     }
 
     setSubmitting(true);
-    const newAgent = await createAgent(
-      props.selectedDeployment.id,
-      props.selectedGraph.graph_id,
-      {
-        name,
-        description,
-        config: prepareConfigForSaving(config),
-      },
-    );
-
-    if (!newAgent) {
-      toast.error("Failed to create agent", {
-        description: "Please try again",
-        richColors: true,
-      });
-      return;
-    }
-
-    if (config.triggers?.length) {
-      const success = await setupAgentTrigger(auth.session.accessToken, {
-        selectedTriggerIds: config.triggers,
-        agentId: newAgent.assistant_id,
-      });
+    try {
+      const newAgent = await createAgent(
+        props.selectedDeployment.id,
+        props.selectedGraph.graph_id,
+        {
+          name,
+          description,
+          config: prepareConfigForSaving(config),
+        },
+      );
 
-      if (!success) {
-        toast.error("Failed to set up triggers", {
+      if (!newAgent) {
+        toast.error("Failed to create agent", {
+          description: "Please try again",
           richColors: true,
         });
         return;
       }
-    }
 
-    setSubmitting(false);
+      if (config.triggers?.length) {
+        const success = await setupAgentTrigger(auth.session.accessToken, {
+          selectedTriggerIds: config.triggers,
+          agentId: newAgent.assistant_id,
+        });
 
-    toast.success(
-      `Agent${config?.triggers?.length ? " with triggers" : ""} created successfully!`,
-      {
-        richColors: true,
-      },
-    );
+        if (!success) {
+          toast.error("Failed to set up triggers", {
+            richColors: true,
+          });
+          return;
+        }
+      }
+
+      toast.success(
+        `Agent${config?.triggers?.length ? " with triggers" : ""} created successfully!`,
+        {
+          richColors: true,
+        },
+      );
 
-    props.onClose();
-    // Do not await so that the refresh is non-blocking
-    refreshAgents();
+      props.onClose();
+      // Do not await so that the refresh is non-blocking
+      refreshAgents();
+    } finally {
+      setSubmitting(false);
+    }
   };
 
+  if (submitting) {
+    return (
+      <div className="py-6">
+        <Loading label="Creating your workspace" />
+      </div>
+    );
+  }
+
   return (
     <form onSubmit={form.handleSubmit(handleSubmit)}>
       <FormProvider {...form}>
@@ -147,17 +158,15 @@ function CreateAgentFormContent(props: {
             props.onClose();
           }}
           variant="outline"
-          disabled={submitting}
         >
           Cancel
         </Button>
         <Button
           type="submit"
           className="flex w-full items-center justify-center gap-1"
-          disabled={submitting}
         >
-          {submitting ? <LoaderCircle className="animate-spin" /> : <Bot />}
-          <span>{submitting ? "Creating..." : "Create Agent"}</span>
+          <Bot />
+          <span>Create Agent</span>
         </Button>
       </AlertDialogFooter>
     </form>

diff --git a/apps/web-v2/src/features/onboarding/AudienceStep.tsx b/apps/web-v2/src/features/onboarding/AudienceStep.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { ArrowLeft } from "lucide-react";
+import { Audience, audienceToText } from "./constants";
+import { OAPLogoBlue } from "@/components/icons/oap-logo-blue";
+
+type AudienceStepProps = {
+  onBack: () => void;
+  onSelect: (audience: Audience) => void;
+};
+
+export function AudienceStep({ onBack, onSelect }: AudienceStepProps) {
+  return (
+    <div className={cn("grid h-screen grid-cols-2 overflow-y-hidden")}>
+      <div
+        className={cn(
+          "z-10",
+          "flex h-full w-[50%] min-w-[776px] flex-col items-start justify-start rounded-r-[83px] bg-white p-[72px] text-black",
+          "shadow-[0_675px_189px_0_rgba(138,118,158,0.00),0_432px_173px_0_rgba(138,118,158,0.01),0_243px_146px_0_rgba(138,118,158,0.05),0_108px_108px_0_rgba(138,118,158,0.09),0_27px_59px_0_rgba(138,118,158,0.10)]",
+        )}
+      >
+        <div className={cn("shrink-0")}>
+          <OAPLogoBlue
+            width={146}
+            height={38}
+          />
+        </div>
+
+        <button
+          type="button"
+          className="mt-10 mb-6 -ml-2 flex items-center gap-2 text-lg text-[#0A5982]"
+          onClick={onBack}
+        >
+          <ArrowLeft className="size-5" /> Back
+        </button>
+
+        <h1 className="text-start text-5xl leading-[120%] font-normal tracking-[-3.36px] text-[var(--colors-text-text-primary-900,#101828)]">
+          Who is this agent for?
+        </h1>
+
+        <div className="mt-12 flex flex-col items-start justify-start gap-6 overflow-y-auto bg-transparent">
+          {Object.values(Audience).map((a) => (
+            <button
+              key={a}
+              type="button"
+              className={cn(
+                "h-[84px] rounded-full border-2 px-[28px] py-[18px] font-normal",
+                "border-[#0A5982] hover:bg-[#F4F3FF]",
+              )}
+              onClick={() => onSelect(a)}
+            >
+              <div className="text-[20px] leading-[120%] font-normal tracking-[-0.8px] text-[var(--colors-text-text-primary-900,#101828)]">
+                {audienceToText[a]}
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AudienceStep;