@mastra/playground-ui 19.0.1-alpha.1 → 19.0.1-alpha.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @mastra/playground-ui
 
+## 19.0.1-alpha.2
+
+### Patch Changes
+
+- dependencies updates: ([#14584](https://github.com/mastra-ai/mastra/pull/14584))
+  - Updated dependency [`@assistant-ui/react@^0.12.19` ↗︎](https://www.npmjs.com/package/@assistant-ui/react/v/0.12.19) (from `^0.12.17`, in `dependencies`)
+  - Updated dependency [`@assistant-ui/react-markdown@^0.12.6` ↗︎](https://www.npmjs.com/package/@assistant-ui/react-markdown/v/0.12.6) (from `^0.12.5`, in `dependencies`)
+  - Updated dependency [`@assistant-ui/react-syntax-highlighter@^0.12.7` ↗︎](https://www.npmjs.com/package/@assistant-ui/react-syntax-highlighter/v/0.12.7) (from `^0.12.6`, in `dependencies`)
+
+- Added 'Create Agent' and 'Edit Agent' buttons to the playground, gated behind the MASTRA_EXPERIMENTAL_UI environment variable. When enabled, a 'Create Agent' button appears on the agents list page and an 'Edit' button appears on the agent detail header for stored agents. ([#14694](https://github.com/mastra-ai/mastra/pull/14694))
+
+- Updated dependencies [[`404fea1`](https://github.com/mastra-ai/mastra/commit/404fea13042181f0b0c73a101392ac87c79ceae2), [`ebf5047`](https://github.com/mastra-ai/mastra/commit/ebf5047e825c38a1a356f10b214c1d4260dfcd8d), [`675f15b`](https://github.com/mastra-ai/mastra/commit/675f15b7eaeea649158d228ea635be40480c584d), [`b174c63`](https://github.com/mastra-ai/mastra/commit/b174c63a093108d4e53b9bc89a078d9f66202b3f), [`eef7cb2`](https://github.com/mastra-ai/mastra/commit/eef7cb2abe7ef15951e2fdf792a5095c6c643333), [`197daf0`](https://github.com/mastra-ai/mastra/commit/197daf03a33e4650bd90391eef0ec7d0392a6c9c), [`86e3263`](https://github.com/mastra-ai/mastra/commit/86e326363edd12be5a5b25ccce4a39f66f7c9f50), [`e8a5b0b`](https://github.com/mastra-ai/mastra/commit/e8a5b0b9bc94d12dee4150095512ca27a288d778)]:
+  - @mastra/core@1.17.0-alpha.2
+  - @mastra/client-js@1.10.1-alpha.2
+  - @mastra/react@0.2.18-alpha.2
+
 ## 19.0.1-alpha.1
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -18079,6 +18079,11 @@ const AgentSettings = ({ agentId }) => {
   ] });
 };
 
+const useCanCreateAgent = () => {
+  const canCreateAgent = typeof window !== "undefined" && window.MASTRA_EXPERIMENTAL_UI === "true";
+  return { canCreateAgent };
+};
+
 const resolveInstructionPart = (part) => {
   if (typeof part === "string") {
     return part.trim();
@@ -18264,29 +18269,41 @@ const AgentsTableSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs(Table, { child
     /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) })
   ] }, index)) })
 ] });
-const EmptyAgentsTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-  EmptyState$1,
-  {
-    iconSlot: /* @__PURE__ */ jsxRuntime.jsx(AgentCoinIcon, {}),
-    titleSlot: "No Agents Yet",
-    descriptionSlot: "Configure agents in code to get started.",
-    actionSlot: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col sm:flex-row gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
-      {
-        size: "lg",
-        variant: "outline",
-        as: "a",
-        href: "https://mastra.ai/docs/agents/overview",
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BookOpen, {}) }),
-          "Documentation"
-        ]
-      }
-    ) })
-  }
-) });
+const EmptyAgentsTable = () => {
+  const { canCreateAgent } = useCanCreateAgent();
+  const { Link: FrameworkLink, paths } = useLinkComponent();
+  const createAgentPath = paths.cmsAgentCreateLink();
+  const showCreateCta = canCreateAgent && Boolean(createAgentPath);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+    EmptyState$1,
+    {
+      iconSlot: /* @__PURE__ */ jsxRuntime.jsx(AgentCoinIcon, {}),
+      titleSlot: "No Agents Yet",
+      descriptionSlot: showCreateCta ? "Create your first agent or configure agents in code." : "Configure agents in code to get started.",
+      actionSlot: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row gap-2", children: [
+        showCreateCta && /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "lg", variant: "primary", as: FrameworkLink, to: createAgentPath, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}) }),
+          "Create an agent"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            size: "lg",
+            variant: "outline",
+            as: "a",
+            href: "https://mastra.ai/docs/agents/overview",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BookOpen, {}) }),
+              "Documentation"
+            ]
+          }
+        )
+      ] })
+    }
+  ) });
+};
 
 const RequestContext = () => {
   const { requestContext, setRequestContext } = usePlaygroundStore();
@@ -22079,13 +22096,22 @@ const AgentMetadataCombinedProcessorList = ({
 const AgentEntityHeader = ({ agentId }) => {
   const { data: agent, isLoading } = useAgent(agentId);
   const { handleCopy } = useCopyToClipboard$1({ text: agentId });
+  const { canCreateAgent } = useCanCreateAgent();
+  const { Link: FrameworkLink, paths } = useLinkComponent();
   const sessionUrl = `${window.location.origin}/agents/${agentId}/session`;
   const { handleCopy: handleShareLink, isCopied: isShareCopied } = useCopyToClipboard$1({
     text: sessionUrl,
     copyMessage: "Session URL copied to clipboard!"
   });
   const agentName = agent?.name || "";
+  const isStoredAgent = agent?.source === "stored";
+  const editPath = paths.cmsAgentEditLink(agentId);
+  const showEditButton = canCreateAgent && isStoredAgent && Boolean(editPath);
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(EntityHeader, { icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}), title: agentName, isLoading, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-3", children: [
+    showEditButton && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", as: FrameworkLink, to: editPath, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, {}) }),
+      "Edit"
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleCopy, className: "h-badge-default shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}), variant: "default", children: agentId }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Copy Agent ID for use in code" })
@@ -52977,6 +53003,7 @@ exports.useAllModels = useAllModels;
 exports.useAuthCapabilities = useAuthCapabilities;
 exports.useAvgScoreKpiMetrics = useAvgScoreKpiMetrics;
 exports.useCSVParser = useCSVParser;
+exports.useCanCreateAgent = useCanCreateAgent;
 exports.useCloneThread = useCloneThread;
 exports.useCodemirrorTheme = useCodemirrorTheme$1;
 exports.useCompareAgentVersions = useCompareAgentVersions;