Code Editor

Runchat uses Prism for code highlighting, and provides a very basic auto-formatter for line indentations with Ctrl+f. You can write regular old Javascript in the black code input field with a couple of caveats:
  • Your code must always return a value.
  • You cannot use any external libraries or modules
  • You cannot make external requests
If you need to make external requests, use the Fetch node instead. If you need to use external libraries, write these as cloud functions using an external service such as Google Cloud Console and call these with the API Node.
Why can’t I do x with the code node?Most Runchats use the code node in some way, often nested several nodes deep for doing various forms of data formatting and manipulation. It is crucial that this code cannot make any changes to your data or pc without your knowledge. By sandboxing all code and preventing access to modules and external requests we can provide a secure environment for running untrusted code without risking breaches.

Inputs and Outputs

The default input to the Code node is called inputData. You can refer to this parameter by name in your code. You can add additional parameters using the Parameter Manager. For instance, to simply pass the input value through to the output, you can run:
return inputData;
The code node will attempt to match the output data type to a suitable component for rendering. This makes the code node useful for controlling how your data is displayed in the Editor and App views. The code node can detect and render:
  • Youtube videos
  • Spotify links
  • 3D Models (.gltf links)
  • Websites (HTML)
  • Markdown
  • JSON Objects

Common Errors

The sandbox environment will always run your code as a function and expect a return value. If your code does not return anything the node will throw an error:
"undefined" is not valid JSON

Generating code in the Code Editor

You can click on “Chat” in the editor toolbar to show the Code Assistant sidebar. The code assistant has access to the following properties of the node to improve the likelihood of writing code that is bug free and useful:
  • The names of all input parameters
  • The first data item for each input parameter (or List of items if the parameter uses List matching)
  • All existing code in the editor
  • Knowledge of constraints e.g. that code is executed in a sandbox and cannot use external libraries
When you send a message to the code assistant, the language model will look for any comments or instructions within the code editor and then attempt to implement these for you with the model selected in the code node settings. Generated code is automatically applied to the code editor.

Selecting a model for Code Generation

The code generation will use the default Runchat model. For more complex code functionality you may want to select a slower reasoning model to improve code quality. You can change the selected model in the code node Settings.

Generating new scripts

If you are starting a new script from scratch, you should first go and add the inputs you think your script will need from the Parameter Manager in the node settings. Then describe what you want your script to do in the prompt input and send a message to the assistant to write your code. Keep your instructions simple, precise and easy to test. For the most part, generating code works best for simple data formatting and filtering tasks.

Improving existing scripts

You can also add to and improve existing code. The code assistant can see your existing code, as well as any errors or warning messages from the last time it was run. To improve your code, Keep requests simple, precise and easy to test.

Parameter Manager

The code node has no input parameters by default. You can manually add input parameters to the code node from the node settings to simplify data matching tasks within your js functions. Developers can specify whether input parameters should be processed item by item or merged into an array by clicking the Each or Merge toggle on the parameter on the node. If you set data to be merged then you can connect multiple inputs to the parameter and then access these through array index notation e.g. inputData[1]. Alternatively, you can add multiple parameters using the parameter manager and access each of these within your js functions by referencing the parameter names.

Adding and removing parameters

You can name and add additional input parameters from the Code Node settings. Click the + icon to add a parameter, and the x icon to remove it. You can specify the name of your parameter as well as the data type that you want to cast any input to. This alleviates the need to perform type checks inside of your js code, as Runchat will handle this for you before the code is run. After you have added at least one new parameter, you can remove the inputData parameter if you wish. It is not possible to remove all input parameters. After adding a parameter it will appear on the left side of the node in alphabetical order.

Accessing parameters

All parameters to the code node are zipped and then passed to your script. You can specify whether individual items or lists should be zipped by toggling these values on the parameters themselves. You can access each parameter value in your script by referring to the parameter name. If your parameter is set to List access, then you can also access items through array indexing.
param_1 (item access): [1,2,3], param_2 (item access): ["some text","some other text"]

return [param_1, param_2]
//Page 1 result [1,"some text"]
//Page 2 result [2, "some other text"]
//Page 3 result [3, "some other text"]

param_1 (list access): [1,2,3], param_2 (item access): ["some text","some other text"]

return [param_1,param_2]
//Page 1 result [[1,2,3],"some text"]
//etc

return param_1[0]
//Page 1 result [1] - returns first item in the param_1 list
//etc

Custom React components

You can use the Code node to create and publish custom nodes written in React. See the guide on custom nodes for more information.