Skip to main content
There are two ways to create custom nodes in Runchat that can be reused in any other workflow.

​
Publishing workflows as tools (Server nodes)

To publish a workflow as a reusable node, you first need to decide which input and output parameters you want to make visible on the node. This usually isn’t every parameter in your workflow or the node would become too complex to use. You usually want to publish just a few input parameters and often only a single output. To publish a parameter, click the sun toggle (☀) while hovering the parameter name. After the parameter is published you can update the description for the input parameter. Click the input parameter label on the Node Input Uninstalling to expand it and enter a new description. This is essential if you want to use your tool in the Agent node and recommended if you are using the tool in another workflow: you will forget what your inputs do. Once you’ve published your inputs and outputs and added labels and descriptions, you can add your tool to a library to make it visible in the node menu and re-use it in other workflows.
Published workflows always run securely on the server.

​
Publishing nodes with custom UI (Client nodes)

When you publish workflows as tools you don’t have any control over the input and output UI as these are set by the published parameters. You can also create nodes using arbitrary React code that will allow you to develop any custom user interface you like. This is particularly useful for building UI for interactions that need to take place in the browser rather than running on the server, such as painting masks, compositing images, editing audio and so on.

​
Creating a custom UI node

Create a Code node and open the node settings sidebar. Then enable the Custom UI toggle to show the code editor with example code. You can make any change you like to the body of this React component, using inputs, setNodeOutputs as props.

​
inputs

Inputs is an object matching your input parameters. For instance, if you have inputs to your code node called “images” and “myVariable”, you can access these in your custom component using inputs.images or inputs.myVariable.

​
setNodeOutputs

This is a callback function that is used to update the output parameters. Like inputs, you update this by providing an object with keys and values. For instance, to output a parameter called “result” with value “hello”, you would call setNodeOutputs({"result":"hello"})

​
Limitations

The component runs in an iFrame with no access to the parent DOM. You cannot use import statements and so are stuck with vanilla javascript. You can create multiple child components in the code editor, but must always return exactly one React component. Your component can use vanilla tailwind css, and the base classes from the Runchat editor are injected in so your component can respond to the current theme.

​
Generating UI components

The easiest way to create custom components is to generate them automatically using an LLM. You can specify the LLM you want to use by selecting the model in the Code node settings bar. Anthropic’s models tend to work the best. The generate a component, enter plain english instructions into the code editor and then press Generate. The llm is provided with the following system prompt to help generate components within the constraints of the sandbox. If you want to generate components using another code editor or chatbot (e.g. claude.ai) you can reference the following system prompt - though note that this sytem prompt injects the actual values and node metadata from our component and you will not have access to these if using a third party environment. 
<SANDBOX REQUIREMENTS>
        You are required to implement user pseudocode in javascript to return a UI component in a sandboxed React environment.
        Your code must always return a React functional component that takes exactly {inputs, config, setNodeOutputs} as props.
        You must include the return statement e.g: return function MyComponent({inputs, config, setNodeOutputs}) { return <div>My Component</div> }
        If you need to define reusable child components, define these at the start of the file before returning the main function component.
        Inputs will be an object containing several input parameters with names, types, data structures and example values if present are as follows: ${args}.
      Your code will be executed in an iframe sandbox environment and you cannot use the import or export statements.
      The sandbox environment has access to the React library and tailwindcss. Preface any react methods with React e.g. React.useState
      If you need to use other external libraries, you must include them with <script> tags.
      </SANDBOX REQUIREMENTS>
      <STYLING INSTRUCTIONS>
      The UI component will be rendered within a small parent container and unless directed by the user you should design a responsive UI to suit small screens.
      Use tailwind to style the component. Your component will be provided with the parent theme.
      Use base-100, 200 or 300 for backgrounds and borders (e.g. bg-base-100, border-base-200).
      Use primary and secondary for primary and secondary colors (e.g. bg-primary, bg-secondary) if required.
      Use text-base-content/70 or text-base-content/50 for text. Prefer text-xs and text-sm.
      </STYLING INSTRUCTIONS>
      <USER INSTRUCTIONS>
      The user may have already attempted to create a React component that has generated error or status messages.
      Error messages are: ${existingMetadata?.errorMessage} and status messages are: ${existingMetadata?.statusMessage}.
      The user will provide you with the content of their code editor. This will contain any pseudocode as well as any existing code.
      If the existing code is relevant to the new pseudocode, use it as a starting point and fix any bugs or errors.
      If the code does something else, ignore it and write a new React component.
      </USER INSTRUCTIONS>
⌘I