Allow adding input fields for tools

Author: ajhai

llmstack/client/src/components/apps/AppInputSchemaEditor.jsx

@@ -129,9 +129,9 @@ export default function AppInputSchemaEditor({
   return (
     <Container>
       <Typography mb={3} style={{ margin: 10 }}>
-        Define the input fields you want this app to accept. These will be
-        rendered as a form for users to fill out. If using the app via the API,
-        the input fields will form the JSON schema for the input data.
+        {props?.message
+          ? props.message
+          : "Define the input fields you want this app to accept. These will be rendered as a form for users to fill out. If using the app via the API, the input fields will form the JSON schema for the input data."}
       </Typography>
       <Table
         sx={{

llmstack/client/src/components/apps/ProcessorEditor.jsx

@@ -8,7 +8,7 @@ import {
   Typography,
 } from "@mui/material";
 import validator from "@rjsf/validator-ajv8";
-import { lazy, useEffect, useState } from "react";
+import { lazy, useEffect, useRef, useState } from "react";
 import { useRecoilValue } from "recoil";
 import { useValidationErrorsForAppComponents } from "../../data/appValidation";
 import { appsState } from "../../data/atoms";
@@ -18,6 +18,7 @@ const ThemedJsonForm = lazy(() => import("../ThemedJsonForm"));
 const AppSelector = lazy(() => import("./AppSelector"));
 const AppStepCard = lazy(() => import("./AppStepCard"));
 const TextFieldWithVars = lazy(() => import("./TextFieldWithVars"));
+const AppInputSchemaEditor = lazy(() => import("./AppInputSchemaEditor"));
 
 function PromptlyAppStepCard({
   appId,
@@ -195,6 +196,7 @@ export function ProcessorEditor({
   const processor = processors[index];
   const apiBackend = processor?.api_backend;
   const [errors, setErrors] = useState([]);
+  const inputFields = useRef(processor?.input_fields || []);
 
   useEffect(() => {
     let newErrors = [];
@@ -309,6 +311,33 @@ export function ProcessorEditor({
       }
     >
       <CardContent style={{ maxHeight: 400, overflow: "auto" }}>
+        {isTool && (
+          <Accordion defaultExpanded={inputFields.length > 0}>
+            <AccordionSummary
+              expandIcon={<ExpandMoreIcon />}
+              aria-controls="input-fields-content"
+              id="input-fields-header"
+              style={{ backgroundColor: "#dce8fb" }}
+              className="app-editor-section-header"
+            >
+              Input Fields
+            </AccordionSummary>
+            <AccordionDetails>
+              <AppInputSchemaEditor
+                fields={inputFields.current}
+                setFields={(fields) => {
+                  inputFields.current = fields;
+                  processors[index].input_fields = fields;
+                  setProcessors([...processors]);
+                }}
+                setErrors={setErrors}
+                message={
+                  "Define the input fields you want to expose to the model. You must use these fields as input to the processor with template variables."
+                }
+              />
+            </AccordionDetails>
+          </Accordion>
+        )}
         <Accordion defaultExpanded={true}>
           <AccordionSummary
             expandIcon={<ExpandMoreIcon />}
@@ -388,8 +417,8 @@ export function ProcessorEditor({
           <Accordion defaultExpanded={true}>
             <AccordionSummary
               expandIcon={<ExpandMoreIcon />}
-              aria-controls="config-content"
-              id="config-header"
+              aria-controls="output-template-content"
+              id="output-template-header"
               style={{ backgroundColor: "#dce8fb" }}
               className="app-editor-section-header"
             >

llmstack/client/src/pages/AppConsole.jsx

@@ -20,7 +20,7 @@ import {
   Tooltip,
 } from "@mui/material";
 import { enqueueSnackbar } from "notistack";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 import { ReactComponent as CodeIcon } from "../assets/images/icons/code.svg";
@@ -348,6 +348,7 @@ export default function AppConsolePage(props) {
             processor.api_backend?.slug || processor.processor_slug,
           config: processor.config,
           input: processor.input,
+          input_fields: processor.input_fields || [],
           output_template: processor.output_template || {},
         })),
       };
@@ -371,6 +372,18 @@ export default function AppConsolePage(props) {
     });
   };
 
+  const setProcessorsCallback = useCallback(
+    (newProcessors) => {
+      setApp((app) => ({
+        ...app,
+        processors: newProcessors,
+        data: { ...app.data, processors: newProcessors },
+      }));
+      setProcessors(newProcessors);
+    },
+    [setApp, setProcessors],
+  );
+
   return isLoading ? (
     <CircularProgress />
   ) : (
@@ -663,14 +676,7 @@ export default function AppConsolePage(props) {
             {selectedMenuItem === "editor" && (
               <AppEditor
                 processors={processors}
-                setProcessors={(newProcessors) => {
-                  setApp((app) => ({
-                    ...app,
-                    processors: newProcessors,
-                    data: { ...app.data, processors: newProcessors },
-                  }));
-                  setProcessors(newProcessors);
-                }}
+                setProcessors={setProcessorsCallback}
                 appConfig={{
                   layout:
                     app?.data?.type_slug === "web"

llmstack/processors/providers/api_processor_interface.py

@@ -16,6 +16,7 @@
 )
 from llmstack.common.blocks.base.schema import BaseSchema as _Schema
 from llmstack.common.utils.liquid import render_template
+from llmstack.common.utils.utils import get_tool_json_schema_from_input_fields
 from llmstack.play.actor import Actor, BookKeepingData
 from llmstack.play.actors.agent import ToolInvokeInput
 from llmstack.play.utils import extract_jinja2_variables
@@ -239,6 +240,9 @@ def get_output_ui_schema(cls) -> dict:
 
     @classmethod
     def get_tool_input_schema(cls, processor_data) -> dict:
+        if processor_data and "input_fields" in processor_data:
+            return get_tool_json_schema_from_input_fields(name="", input_fields=processor_data["input_fields"])
+
         return json.loads(cls.get_input_schema())
 
     @classmethod
@@ -392,19 +396,20 @@ def tool_invoke_input(self, tool_args: dict) -> ToolInvokeInput:
         )
 
     def invoke(self, message: ToolInvokeInput) -> Any:
+        self._base_input = self._input
         try:
             self._input = (
                 hydrate_input(
                     self._input,
-                    message.input,
+                    {**message.input, **message.tool_args},
                 )
                 if message
                 else self._input
             )
             self._config = (
                 hydrate_input(
                     self._config,
-                    message.input,
+                    {**message.input, **message.tool_args},
                 )
                 if self._config
                 else self._config
@@ -446,6 +451,8 @@ def invoke(self, message: ToolInvokeInput) -> Any:
 
         self._output_stream.bookkeep(bookkeeping_data)
 
+        self._input = self._base_input
+
     def input_stream(self, message: Any) -> Any:
         # We do not support input stream for this processor
         pass