inkeep · sarah-inkeep · Jan 17, 2026 · Jan 17, 2026 · Jan 17, 2026 · Jan 17, 2026
diff --git a/.changeset/dry-sites-ring.md b/.changeset/dry-sites-ring.md
@@ -0,0 +1,5 @@
+---
+"@inkeep/agents-manage-ui": patch
+---
+
+Add templates for json fields
diff --git a/agents-manage-ui/src/components/agent/playground/custom-headers-dialog.tsx b/agents-manage-ui/src/components/agent/playground/custom-headers-dialog.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
-import { JsonEditor } from '@/components/editors/json-editor';
+import { StandaloneJsonEditor } from '@/components/editors/standalone-json-editor';
 import { FormFieldWrapper } from '@/components/form/form-field-wrapper';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -100,11 +100,16 @@ function CustomHeadersDialog({ customHeaders, setCustomHeaders }: CustomHeadersD
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
             <FormFieldWrapper control={form.control} name="headers" label="Custom headers">
               {(field) => (
-                <JsonEditor
+                <StandaloneJsonEditor
                   value={field.value}
                   onChange={field.onChange}
-                  placeholder="Enter headers..."
+                  placeholder={`{
+  "tz": "US/Pacific"
+}`}
                   {...field}
+                  customTemplate={`{
+  "tz": "US/Pacific"
+}`}
                 />
               )}
             </FormFieldWrapper>

diff --git a/agents-manage-ui/src/components/agent/sidepane/metadata/context-config.tsx b/agents-manage-ui/src/components/agent/sidepane/metadata/context-config.tsx
@@ -1,5 +1,7 @@
-import { ExpandableJsonEditor } from '@/components/editors/expandable-json-editor';
+import { StandaloneJsonEditor } from '@/components/editors/standalone-json-editor';
+import { contextVariablesTemplate, headersSchemaTemplate } from '@/lib/templates';
 import type { AgentMetadata, ContextConfig } from '../../configuration/agent-types';
+import { FieldLabel } from '../form-components/label';
 import { SectionHeader } from '../section';
 
 export function ContextConfigForm({
@@ -26,20 +28,26 @@ export function ContextConfigForm({
         description="Configure dynamic context for this agent."
       />
       <div className="flex flex-col space-y-8">
-        <ExpandableJsonEditor
-          name="contextVariables"
-          label="Context variables (JSON)"
-          value={contextVariables}
-          onChange={(value) => updateContextConfig('contextVariables', value)}
-          placeholder="{}"
-        />
-        <ExpandableJsonEditor
-          name="headersSchema"
-          label="Headers schema (JSON)"
-          value={headersSchema}
-          onChange={(value) => updateContextConfig('headersSchema', value)}
-          placeholder="{}"
-        />
+        <div className="space-y-2">
+          <FieldLabel id="contextVariables" label="Context variables (JSON)" />
+          <StandaloneJsonEditor
+            name="contextVariables"
+            value={contextVariables}
+            onChange={(value) => updateContextConfig('contextVariables', value)}
+            placeholder="{}"
+            customTemplate={contextVariablesTemplate}
+          />
+        </div>
+        <div className="space-y-2">
+          <FieldLabel id="headersSchema" label="Headers schema (JSON)" />
+          <StandaloneJsonEditor
+            name="headersSchema"
+            value={headersSchema}
+            onChange={(value) => updateContextConfig('headersSchema', value)}
+            placeholder="{}"
+            customTemplate={headersSchemaTemplate}
+          />
+        </div>
       </div>
     </div>
   );

diff --git a/agents-manage-ui/src/components/agent/sidepane/metadata/metadata-editor.tsx b/agents-manage-ui/src/components/agent/sidepane/metadata/metadata-editor.tsx
@@ -3,7 +3,7 @@
 import { Info } from 'lucide-react';
 import { useParams } from 'next/navigation';
 import { useCallback } from 'react';
-import { ExpandableJsonEditor } from '@/components/editors/expandable-json-editor';
+import { StandaloneJsonEditor } from '@/components/editors/standalone-json-editor';
 import { ModelInheritanceInfo } from '@/components/projects/form/model-inheritance-info';
 import { ModelConfiguration } from '@/components/shared/model-configuration';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -23,9 +23,15 @@ import { useRuntimeConfig } from '@/contexts/runtime-config-context';
 import { agentStore, useAgentActions, useAgentStore } from '@/features/agent/state/use-agent-store';
 import { useAutoPrefillIdZustand } from '@/hooks/use-auto-prefill-id-zustand';
 import { useProjectData } from '@/hooks/use-project-data';
+import {
+  statusUpdatesComponentsTemplate,
+  structuredOutputModelProviderOptionsTemplate,
+  summarizerModelProviderOptionsTemplate,
+} from '@/lib/templates';
 import { ExpandablePromptEditor } from '../../../editors/expandable-prompt-editor';
 import { CollapsibleSettings } from '../collapsible-settings';
 import { InputField } from '../form-components/input';
+import { FieldLabel } from '../form-components/label';
 import { TextareaField } from '../form-components/text-area';
 import { ModelSelector } from '../nodes/model-selector';
 import { SectionHeader } from '../section';
@@ -275,25 +281,28 @@ function MetadataEditor() {
           </div>
           {/* Structured Output Model Provider Options */}
           {models?.structuredOutput?.model && (
-            <ExpandableJsonEditor
-              name="structured-provider-options"
-              label="Structured output model provider options"
-              onChange={(value) => {
-                const currentModels = getCurrentModels();
-                updateMetadata('models', {
-                  ...(currentModels || {}),
-                  structuredOutput: {
-                    model: currentModels?.structuredOutput?.model || '',
-                    providerOptions: value,
-                  },
-                });
-              }}
-              value={models.structuredOutput.providerOptions || ''}
-              placeholder={`{
-  "temperature": 0.1,
-  "maxOutputTokens": 1024
-}`}
-            />
+            <div className="space-y-2">
+              <FieldLabel
+                id="structured-provider-options"
+                label="Structured output model provider options"
+              />
+              <StandaloneJsonEditor
+                name="structured-provider-options"
+                onChange={(value) => {
+                  const currentModels = getCurrentModels();
+                  updateMetadata('models', {
+                    ...(currentModels || {}),
+                    structuredOutput: {
+                      model: currentModels?.structuredOutput?.model || '',
+                      providerOptions: value,
+                    },
+                  });
+                }}
+                value={models.structuredOutput.providerOptions || ''}
+                placeholder={structuredOutputModelProviderOptionsTemplate}
+                customTemplate={structuredOutputModelProviderOptionsTemplate}
+              />
+            </div>
           )}
           <div className="relative space-y-2">
             <ModelSelector
@@ -336,25 +345,28 @@ function MetadataEditor() {
           </div>
           {/* Summarizer Model Provider Options */}
           {models?.summarizer?.model && (
-            <ExpandableJsonEditor
-              name="summarizer-provider-options"
-              label="Summarizer model provider options"
-              onChange={(value) => {
-                const currentModels = getCurrentModels();
-                updateMetadata('models', {
-                  ...(currentModels || {}),
-                  summarizer: {
-                    model: currentModels?.summarizer?.model || '',
-                    providerOptions: value,
-                  },
-                });
-              }}
-              value={models.summarizer.providerOptions || ''}
-              placeholder={`{
-  "temperature": 0.3,
-  "maxOutputTokens": 1024
-}`}
-            />
+            <div className="space-y-2">
+              <FieldLabel
+                id="summarizer-provider-options"
+                label="Summarizer model provider options"
+              />
+              <StandaloneJsonEditor
+                name="summarizer-provider-options"
+                onChange={(value) => {
+                  const currentModels = getCurrentModels();
+                  updateMetadata('models', {
+                    ...(currentModels || {}),
+                    summarizer: {
+                      model: currentModels?.summarizer?.model || '',
+                      providerOptions: value,
+                    },
+                  });
+                }}
+                value={models.summarizer.providerOptions || ''}
+                placeholder={summarizerModelProviderOptionsTemplate}
+                customTemplate={summarizerModelProviderOptionsTemplate}
+              />
+            </div>
           )}
         </CollapsibleSettings>
       </div>
@@ -557,46 +569,23 @@ function MetadataEditor() {
               </div>
 
               <div className="space-y-2">
-                <ExpandableJsonEditor
+                <FieldLabel id="status-components" label="Status components configuration" />
+                <StandaloneJsonEditor
                   name="status-components"
-                  label="Status components configuration"
                   onChange={(value) => {
                     updateMetadata('statusUpdates', {
                       ...(statusUpdates || {}),
                       statusComponents: value,
                     });
                   }}
                   value={statusUpdates?.statusComponents || ''}
-                  placeholder={`[
-  {
-    "id": "tool_call_summary",
-    "name": "Tool Call",
-    "description": "A summary of a single tool call and why it was relevant to the current task. Be specific about what was found or accomplished.",
-    "schema": {
-      "type": "object",
-      "properties": {
-        "tool_name": {
-          "type": "string",
-          "description": "The name of the tool that was called"
-        },
-        "summary": {
-          "type": "string",
-          "description": "Brief summary of what was accomplished. Keep it to 3-5 words."
-        },
-        "status": {
-          "type": "string",
-          "enum": ["success", "error", "in_progress"],
-          "description": "Status of the tool call"
-        }
-      },
-      "required": ["tool_name", "summary"]
-    }
-  }
-]`}
+                  placeholder={statusUpdatesComponentsTemplate}
+                  customTemplate={statusUpdatesComponentsTemplate}
+                  className="bg-background"
                 />
                 <p className="text-xs text-muted-foreground">
-                  Define structured components for status updates. Each component has an id, name,
-                  description, and JSON schema.
+                  Define structured components for status updates. Each component has a type
+                  (required), description, and detailsSchema.
                 </p>
               </div>
             </CollapsibleSettings>

diff --git a/agents-manage-ui/src/components/agent/sidepane/nodes/external-agent-node-editor.tsx b/agents-manage-ui/src/components/agent/sidepane/nodes/external-agent-node-editor.tsx
@@ -2,7 +2,7 @@ import { type Node, useReactFlow } from '@xyflow/react';
 import { Trash2 } from 'lucide-react';
 import { useParams } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
-import { ExpandableJsonEditor } from '@/components/editors/expandable-json-editor';
+import { StandaloneJsonEditor } from '@/components/editors/standalone-json-editor';
 import { Button } from '@/components/ui/button';
 import { ExternalLink } from '@/components/ui/external-link';
 import { Separator } from '@/components/ui/separator';
@@ -11,10 +11,12 @@ import type { ErrorHelpers } from '@/hooks/use-agent-errors';
 import { useAutoPrefillIdZustand } from '@/hooks/use-auto-prefill-id-zustand';
 import { useNodeEditor } from '@/hooks/use-node-editor';
 import type { Credential } from '@/lib/api/credentials';
+import { externalAgentHeadersTemplate } from '@/lib/templates';
 import type { SubAgentExternalAgentConfigLookup } from '@/lib/types/agent-full';
 import { getCurrentHeadersForExternalAgentNode } from '@/lib/utils/external-agent-utils';
 import type { ExternalAgentNodeData } from '../../configuration/node-types';
 import { InputField } from '../form-components/input';
+import { FieldLabel } from '../form-components/label';
 import { TextareaField } from '../form-components/text-area';
 
 interface ExternalAgentNodeEditorProps {
@@ -159,13 +161,16 @@ export function ExternalAgentNodeEditor({
         tooltip="This URL is used to discover the agent's capabilities and communicate with it using the A2A protocol. For locally hosted agent defined with the agent-framework this would be: http://localhost:3002/tenants/:tenantId/projects/:projectId/agents/:agentId"
         disabled
       />
-      <ExpandableJsonEditor
-        name="headers"
-        label="Headers"
-        value={headersInputValue}
-        onChange={handleHeadersChange}
-        placeholder="{}"
-      />
+      <div className="space-y-2">
+        <FieldLabel id="headers" label="Headers" />
+        <StandaloneJsonEditor
+          name="headers"
+          value={headersInputValue}
+          onChange={handleHeadersChange}
+          placeholder="{}"
+          customTemplate={externalAgentHeadersTemplate}
+        />
+      </div>
       <ExternalLink
         href={`/${tenantId}/projects/${projectId}/external-agents/${selectedNode.data.id}/edit`}
       >

diff --git a/agents-manage-ui/src/components/agent/sidepane/nodes/function-tool-node-editor.tsx b/agents-manage-ui/src/components/agent/sidepane/nodes/function-tool-node-editor.tsx
@@ -186,6 +186,10 @@ export function FunctionToolNodeEditor({ selectedNode }: FunctionToolNodeEditorP
         <StandaloneJsonEditor
           value={dependencies}
           onChange={handleDependenciesChange}
+          customTemplate={`{
+  "axios": "^1.6.0",
+  "lodash": "^4.17.21"
+}`}
           placeholder={`{
   "axios": "^1.6.0",
   "lodash": "^4.17.21"

diff --git a/agents-manage-ui/src/components/agent/sidepane/nodes/mcp-node-editor.tsx b/agents-manage-ui/src/components/agent/sidepane/nodes/mcp-node-editor.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
 import { getActiveTools } from '@/app/utils/active-tools';
-import { ExpandableJsonEditor } from '@/components/editors/expandable-json-editor';
+import { StandaloneJsonEditor } from '@/components/editors/standalone-json-editor';
 import { MCPToolImage } from '@/components/mcp-servers/mcp-tool-image';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Badge } from '@/components/ui/badge';
@@ -17,13 +17,15 @@ import { Separator } from '@/components/ui/separator';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useAgentActions, useAgentStore } from '@/features/agent/state/use-agent-store';
 import { useNodeEditor } from '@/hooks/use-node-editor';
+import { headersTemplate } from '@/lib/templates/headers-templates';
 import type { AgentToolConfigLookup } from '@/lib/types/agent-full';
 import {
   getCurrentHeadersForNode,
   getCurrentSelectedToolsForNode,
   getCurrentToolPoliciesForNode,
 } from '@/lib/utils/orphaned-tools-detector';
 import type { MCPNodeData } from '../../configuration/node-types';
+import { FieldLabel } from '../form-components/label';
 
 interface MCPServerNodeEditorProps {
   selectedNode: Node<MCPNodeData>;
@@ -426,12 +428,13 @@ export function MCPServerNodeEditor({
       </div>
 
       <div className="space-y-2">
-        <ExpandableJsonEditor
+        <FieldLabel id="headers" label="Headers" />
+        <StandaloneJsonEditor
           name="headers"
-          label="Headers (JSON)"
           value={headersInputValue}
           onChange={handleHeadersChange}
-          placeholder='{"X-Your-Header": "your-value", "Content-Type": "application/json"}'
+          placeholder={headersTemplate}
+          customTemplate={headersTemplate}
         />
       </div>
 

diff --git a/agents-manage-ui/src/components/agent/sidepane/nodes/model-section.tsx b/agents-manage-ui/src/components/agent/sidepane/nodes/model-section.tsx
@@ -5,6 +5,10 @@ import {
   getModelInheritanceStatus,
   InheritanceIndicator,
 } from '@/components/ui/inheritance-indicator';
+import {
+  azureModelSummarizerProviderOptionsTemplate,
+  summarizerModelProviderOptionsTemplate,
+} from '@/lib/templates';
 import { createProviderOptionsHandler } from '@/lib/utils';
 import { CollapsibleSettings } from '../collapsible-settings';
 import { SectionHeader } from '../section';
@@ -130,16 +134,9 @@ export function ModelSection({
           editorNamePrefix="summarizer"
           getJsonPlaceholder={(model) => {
             if (model?.startsWith('azure/')) {
-              return `{
-  "resourceName": "your-azure-resource",
-  "temperature": 0.3,
-  "maxOutputTokens": 1024
-}`;
+              return azureModelSummarizerProviderOptionsTemplate;
             }
-            return `{
-  "temperature": 0.3,
-  "maxOutputTokens": 1024
-}`;
+            return summarizerModelProviderOptionsTemplate;
           }}
         />
       </CollapsibleSettings>