feat: support variations on any tool type (#577)

Introduces support for "varying" any tool type. Concretely, customTool
names will now be editable (previously they could not be changed once
created)

Author: chase-crumbaugh

.changeset/friendly-shirts-poke.md

@@ -0,0 +1,7 @@
+---
+"@gram/dashboard": patch
+"@gram/client": patch
+"@gram/server": patch
+---
+
+Support variations on any tool type. Allows the names of Custom Tools to now be edited along with all fields of Functions.

.speakeasy/out.openapi.yaml

@@ -10530,6 +10530,9 @@ components:
           enum:
             - prompt
             - higher_order_tool
+        name:
+          type: string
+          description: The name of the prompt template. Will be updated via variation
         prompt:
           type: string
           description: The template content

client/dashboard/src/pages/playground/ChatWindow.tsx

@@ -30,13 +30,13 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { v7 as uuidv7 } from "uuid";
 import { z } from "zod";
 import { onboardingStepStorageKeys } from "../home/Home";
+import { ChatComposerWrapper } from "./ChatComposerWrapper";
 import { useChatContext } from "./ChatContext";
 import { useChatHistory } from "./ChatHistory";
 import { MessageHistoryIndicator } from "./MessageHistoryIndicator";
 import { useMiniModel, useModel } from "./Openrouter";
+import { Tool as MentionTool, parseMentionedTools } from "./ToolMentions";
 import { useMessageHistoryNavigation } from "./useMessageHistoryNavigation";
-import { parseMentionedTools, Tool as MentionTool } from "./ToolMentions";
-import { ChatComposerWrapper } from "./ChatComposerWrapper";
 
 const defaultModel = {
   label: "Claude 4.5 Sonnet",
@@ -72,12 +72,14 @@ export function ChatWindow({
   additionalActions,
   initialMessages,
   initialPrompt,
+  hideTemperatureSlider = false,
 }: {
   configRef: ChatConfig;
   dynamicToolset?: boolean;
   additionalActions?: React.ReactNode;
   initialMessages?: Message[];
   initialPrompt?: string | null;
+  hideTemperatureSlider?: boolean;
 }) {
   const [model, setModel] = useState(defaultModel.value);
   const [temperature, setTemperature] = useState(0.5);
@@ -89,13 +91,12 @@ export function ChatWindow({
       key={chatKey}
       model={model}
       setModel={setModel}
-      temperature={temperature}
-      setTemperature={setTemperature}
       configRef={configRef}
       dynamicToolset={dynamicToolset}
       initialMessages={initialMessages}
       additionalActions={additionalActions}
       initialPrompt={initialPrompt}
+      {...(!hideTemperatureSlider && { temperature, setTemperature })}
     />
   );
 }
@@ -118,8 +119,8 @@ function ChatInner({
 }: {
   model: string;
   setModel: (model: string) => void;
-  temperature: number;
-  setTemperature: (temperature: number) => void;
+  temperature?: number;
+  setTemperature?: (temperature: number) => void;
   configRef: ChatConfig;
   dynamicToolset: boolean;
   initialMessages?: Message[];
@@ -577,7 +578,7 @@ function ChatInner({
   /* eslint-disable  @typescript-eslint/no-explicit-any */
   const m = messagesToDisplay as any;
 
-  const temperatureSlider = (
+  const temperatureSlider = temperature && setTemperature && (
     <div className="flex items-center gap-3 px-2">
       <SimpleTooltip tooltip="Controls randomness in responses. Lower values (0.0-0.3) make outputs more focused and deterministic. Higher values (0.7-1.0) increase creativity and variety. Default: 0.5">
         <span className="text-xs text-muted-foreground whitespace-nowrap cursor-help">

client/dashboard/src/pages/toolBuilder/CustomTools.tsx

@@ -99,7 +99,7 @@ export function CustomToolCard({ template }: { template: PromptTemplate }) {
 
   return (
     <routes.customTools.toolBuilder.Link
-      params={[template.name]}
+      params={[template.canonicalName]}
       className="hover:no-underline"
     >
       <Card>

client/dashboard/src/pages/toolBuilder/ToolBuilder.tsx

@@ -22,6 +22,7 @@ import { SimpleTooltip } from "@/components/ui/tooltip";
 import { Type } from "@/components/ui/type";
 import { useSdkClient } from "@/contexts/Sdk";
 import { useTelemetry } from "@/contexts/Telemetry";
+import { useToolset } from "@/hooks/toolTypes";
 import { useApiError } from "@/hooks/useApiError";
 import { MUSTACHE_VAR_REGEX, slugify, TOOL_NAME_REGEX } from "@/lib/constants";
 import { Tool, useGroupedTools } from "@/lib/toolTypes";
@@ -33,7 +34,8 @@ import {
 } from "@gram/client/models/components";
 import {
   invalidateAllListToolsets,
-  invalidateTemplate,
+  invalidateAllTemplate,
+  invalidateAllTemplates,
   useListToolsetsSuspense,
   useTemplateSuspense,
   useUpdateTemplateMutation,
@@ -49,7 +51,6 @@ import { ChatProvider, useChatContext } from "../playground/ChatContext";
 import { ChatConfig, ChatWindow } from "../playground/ChatWindow";
 import { ToolsetDropdown } from "../toolsets/ToolsetDropown";
 import { useToolifyContext } from "./Toolify";
-import { useToolset } from "@/hooks/toolTypes";
 
 type Input = {
   name: string;
@@ -334,6 +335,7 @@ function ToolBuilder({ initial }: { initial: ToolBuilderState }) {
   };
 
   const anyChanges =
+    name !== initial.name ||
     description !== initial.description ||
     purpose !== initial.purpose ||
     inputs.length !== initial.inputs.length ||
@@ -367,7 +369,8 @@ function ToolBuilder({ initial }: { initial: ToolBuilderState }) {
 
   const { mutate: updatePrompt } = useUpdateTemplateMutation({
     onSettled: () => {
-      invalidateTemplate(queryClient, [{ name }]);
+      invalidateAllTemplate(queryClient);
+      invalidateAllTemplates(queryClient);
     },
     onError: (error) => {
       handleApiError(error, "Failed to update tool");
@@ -407,6 +410,7 @@ function ToolBuilder({ initial }: { initial: ToolBuilderState }) {
               request: {
                 updatePromptTemplateForm: {
                   id: initial.id,
+                  name,
                   description,
                   prompt: higherOrderToolToJSON(higherOrderTool),
                   arguments: JSON.stringify(argsJsonSchema),
@@ -463,22 +467,13 @@ function ToolBuilder({ initial }: { initial: ToolBuilderState }) {
     </Button>
   );
 
-  const toolName = initial.id ? (
-    <Heading
-      variant="h3"
-      className={cn("normal-case w-fit", initial.id && "text-muted-foreground")}
-      tooltip="Can't change name after tool is created"
-    >
-      {name}
-    </Heading>
-  ) : (
+  const toolName = (
     <EditableText
       label="Tool Name"
       description="Give your tool a name. This influences tool selection."
       value={name}
       onSubmit={setName}
       validate={validateName}
-      disabled={!!initial.id}
     >
       <Heading variant="h3" className="normal-case">
         {name}
@@ -1098,6 +1093,7 @@ function ChatPanel(props: {
       configRef={chatConfigRef}
       additionalActions={additionalActions}
       initialMessages={customToolSystemPrompt}
+      hideTemperatureSlider
     />
   );
 }

client/dashboard/src/pages/toolsets/Toolset.tsx

@@ -1,17 +1,25 @@
+import { InputDialog } from "@/components/input-dialog";
 import { Page } from "@/components/page-layout";
+import { ToolList } from "@/components/tool-list";
+import { Dialog } from "@/components/ui/dialog";
 import { Heading } from "@/components/ui/heading";
 import { MoreActions } from "@/components/ui/more-actions";
 import { MultiSelect } from "@/components/ui/multi-select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useCommandPalette } from "@/contexts/CommandPalette";
+import { useSdkClient } from "@/contexts/Sdk";
 import {
   useRegisterEnvironmentTelemetry,
   useRegisterToolsetTelemetry,
   useTelemetry,
 } from "@/contexts/Telemetry";
+import { useToolset } from "@/hooks/toolTypes";
 import { useApiError } from "@/hooks/useApiError";
-import { useGroupedTools } from "@/lib/toolTypes";
+import { Tool, useGroupedTools } from "@/lib/toolTypes";
 import { cn } from "@/lib/utils";
 import { useRoutes } from "@/routes";
+import { Confirm } from "@gram/client/models/components";
+import { invalidateTemplate } from "@gram/client/react-query";
 import {
   queryKeyInstance,
   useCloneToolsetMutation,
@@ -21,26 +29,17 @@ import {
 } from "@gram/client/react-query/index.js";
 import { Button, Icon, Stack } from "@speakeasy-api/moonshine";
 import { useQueryClient } from "@tanstack/react-query";
-import { useState, useEffect, useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Outlet, useParams } from "react-router";
 import { toast } from "sonner";
 import { MCPDetails, MCPEnableButton } from "../mcp/MCPDetails";
+import { AddToolsDialog } from "./AddToolsDialog";
 import { PromptsTabContent } from "./PromptsTab";
 import { ToolsetAuth } from "./ToolsetAuth";
 import { ToolsetAuthAlert } from "./ToolsetAuthAlert";
 import { ToolsetEmptyState } from "./ToolsetEmptyState";
 import { ToolsetHeader } from "./ToolsetHeader";
 import { useToolsets } from "./Toolsets";
-import { useToolset } from "@/hooks/toolTypes";
-import { Tool } from "@/lib/toolTypes";
-import { ToolList } from "@/components/tool-list";
-import { useSdkClient } from "@/contexts/Sdk";
-import { Confirm } from "@gram/client/models/components";
-import { invalidateTemplate } from "@gram/client/react-query";
-import { InputDialog } from "@/components/input-dialog";
-import { Dialog } from "@/components/ui/dialog";
-import { AddToolsDialog } from "./AddToolsDialog";
-import { useCommandPalette } from "@/contexts/CommandPalette";
 
 export function useDeleteToolset({
   onSuccess,
@@ -356,7 +355,16 @@ export function ToolsetView({
     tool: Tool,
     updates: { name?: string; description?: string },
   ) => {
-    if (tool.type === "http") {
+    if (tool.type === "prompt") {
+      // Prompt templates are only sometimes updated via variation under the hood. We use this endpoint instead to ensure it mirrors editing from the ToolBuilder page itself.
+      await client.templates.update({
+        updatePromptTemplateForm: {
+          ...tool,
+          ...updates,
+        },
+      });
+      invalidateTemplate(queryClient, [{ name: tool.name }]);
+    } else {
       await client.variations.upsertGlobal({
         upsertGlobalToolVariationForm: {
           ...tool.variation,
@@ -366,14 +374,6 @@ export function ToolsetView({
           srcToolUrn: tool.toolUrn,
         },
       });
-    } else {
-      await client.templates.update({
-        updatePromptTemplateForm: {
-          ...tool,
-          ...updates,
-        },
-      });
-      invalidateTemplate(queryClient, [{ name: tool.name }]);
     }
 
     telemetry.capture("toolset_event", {

client/sdk/.speakeasy/gen.lock

@@ -1,12 +1,12 @@
 lockVersion: 2.0.0
 id: 0e7a6274-2092-40cd-9586-9415c6655c64
 management:
-  docChecksum: a3a1926b815df1d99ef053f0a00c1b5f
+  docChecksum: 13e7bf4996e35ee26f79c969348fc37c
   docVersion: 0.0.1
   speakeasyVersion: 1.613.0
   generationVersion: 2.696.0
-  releaseVersion: 0.14.9
-  configChecksum: 7cc0154927ec14183e72e088b3df6547
+  releaseVersion: 0.14.10
+  configChecksum: a4aacac5181191246bed8d5b4b80cfc1
 features:
   typescript:
     additionalDependencies: 0.1.0

client/sdk/.speakeasy/gen.yaml

@@ -25,7 +25,7 @@ generation:
     generateNewTests: false
     skipResponseBodyAssertions: false
 typescript:
-  version: 0.14.9
+  version: 0.14.10
   acceptHeaderEnum: true
   additionalDependencies:
     dependencies: {}

client/sdk/docs/models/components/updateprompttemplateform.md

@@ -19,5 +19,6 @@ let value: UpdatePromptTemplateForm = {
 | `engine`                                                                                               | [components.UpdatePromptTemplateFormEngine](../../models/components/updateprompttemplateformengine.md) | :heavy_minus_sign:                                                                                     | The template engine                                                                                    |
 | `id`                                                                                                   | *string*                                                                                               | :heavy_check_mark:                                                                                     | The ID of the prompt template to update                                                                |
 | `kind`                                                                                                 | [components.UpdatePromptTemplateFormKind](../../models/components/updateprompttemplateformkind.md)     | :heavy_minus_sign:                                                                                     | The kind of prompt the template is used for                                                            |
+| `name`                                                                                                 | *string*                                                                                               | :heavy_minus_sign:                                                                                     | The name of the prompt template. Will be updated via variation                                         |
 | `prompt`                                                                                               | *string*                                                                                               | :heavy_minus_sign:                                                                                     | The template content                                                                                   |
 | `toolsHint`                                                                                            | *string*[]                                                                                             | :heavy_minus_sign:                                                                                     | The suggested tool names associated with the prompt template                                           |

client/sdk/jsr.json

@@ -2,7 +2,7 @@
 
 {
   "name": "@gram/client",
-  "version": "0.14.9",
+  "version": "0.14.10",
   "exports": {
     ".": "./src/index.ts",    
     "./models/errors": "./src/models/errors/index.ts",