Build a Custom Code node

The Custom Code node lets you author your own flowGen node in TSX. You declare its input/output sockets, an optional run() transform executed when you press Run, and an optional live View rendered in the card — all edited in a Monaco modal with the same scoped AI chat as interactive elements.

Where: flowGen → left rail → Add → Website → “Custom Code” — Add a Custom Code node (Code2 icon), then open “Edit Code”

Key ideas

• Declare sockets: Export const sockets = { inputs, outputs } where each socket is { id, label, type }. type is one of the same handle types as groups (text/image/video/audio/voice/layer/compose/mask/design_system/css/pdf/html/3d_model/hdri/bundle/default). Click “Sync sockets from code” to pull the manifest into the node.
• run(inputs, ctx): An optional async run(inputs, ctx) transform. inputs is keyed by socket id from upstream connections; return an object keyed by output socket id. ctx gives you { nodeId, orgId, projectId, uploadAsset } — call uploadAsset(fileOrBlob) to store a result and get a URL.
• Live View: An optional default-export View({ inputs, outputs, setOutput }) React component rendered inside the node card for a live preview or an interactive control.
• Scoped AI chat: The editor modal has a “Chat” panel (the same InteractiveChatPanel used for interactive elements) scoped to this node’s TSX — ask it to add a socket or write the run() logic and it edits the code for you.
• Custom Code card: CustomCodeNode uses the generic shared-card path. Author executable TSX/custom code with explicit typed input and output sockets.
• Properties sidebar: Card and dedicated sockets inspector
• Opened surfaces: CustomCodeEditorModal; typed sockets editor; result preview

Steps

1. Add → Website → “Custom Code”.
2. Click “Edit Code” to open the Monaco modal.
3. Edit export const sockets to declare your inputs/outputs, then click “Sync sockets from code”.
4. Write an async run(inputs, ctx) that returns your outputs (optionally a default-export View).
5. Or open the “Chat” panel and describe what the node should do — the AI writes the TSX.
6. Close the modal and press ▶ Run; results are versioned and propagate to downstream nodes.

Custom Code controls and presets

• Add path: Flowgen → Add → Utils → Custom Code.
• Card: CustomCodeNode.
• Properties: Card and dedicated sockets inspector.
• Controls: Code; model/thinking; run; socket add/remove/reorder/type.
• Opened surfaces: CustomCodeEditorModal; typed sockets editor; result preview.

FAQ

How do I change a socket’s name or type?

Edit the socket in the node’s properties sidebar (add/rename/retype/reorder), or edit export const sockets in the code and click “Sync sockets from code”.

Can it save a generated file?

Yes — call ctx.uploadAsset(fileOrBlob) inside run() to persist it and get back a URL you can return as an output.

Related guides

• Flowgen canvas: cards, node graph, typed inputs, and running a workflow
• Typed group sockets