create-node.prompt.md

mode	ask
description	Create a new React Flow node component with proper typing, styling, and store integration

Create New Node Type

Create a new node type for the CoreAI DIY canvas following established patterns.

Variables

• NODE_TYPE: The node type identifier (e.g., my-node)
• NODE_NAME: The display name (e.g., MyNode)
• NODE_DESCRIPTION: Brief description of the node's purpose
• NODE_PROPERTIES: Key properties the node needs

Steps

1. Define Types

Add to src/frontend/src/types/index.ts:

export interface ${NODE_NAME}Data extends Record<string, unknown> {
  title: string;
  // Add ${NODE_PROPERTIES}
}

export type ${NODE_NAME} = Node<${NODE_NAME}Data, '${NODE_TYPE}'>;

Update the AppNode union to include ${NODE_NAME}.

2. Create Component

Create src/frontend/src/components/nodes/${NODE_NAME}.tsx:

import { memo, useCallback } from 'react';
import { NodeProps, Node, Handle, Position, NodeResizer } from '@xyflow/react';
import { ${NODE_NAME}Data } from '@/types';
import { useAppStore } from '@/store';

type ${NODE_NAME}Props = NodeProps<Node<${NODE_NAME}Data>>;

export const ${NODE_NAME} = memo(function ${NODE_NAME}({
  id,
  data,
  selected,
}: ${NODE_NAME}Props) {
  const updateNode = useAppStore((state) => state.updateNode);
  const canvasMode = useAppStore((state) => state.canvasMode);
  
  return (
    <>
      {canvasMode === 'editing' && (
        <NodeResizer minWidth={200} minHeight={150} isVisible={selected} />
      )}
      <div className="bg-[var(--frontier-surface)] border-2 border-[var(--frontier-border)] rounded-xl p-4">
        <Handle type="target" position={Position.Top} />
        <h3 className="text-[var(--frontier-text)] font-medium">{data.title}</h3>
        {/* Add node content */}
        <Handle type="source" position={Position.Bottom} />
      </div>
    </>
  );
});

3. Export from Barrel

Add to src/frontend/src/components/nodes/index.ts:

export { ${NODE_NAME} } from './${NODE_NAME}';

4. Add Default Data

In src/frontend/src/store/app-store.ts, add to getDefaultNodeData:

case '${NODE_TYPE}':
  return { title: 'New ${NODE_NAME}', ...data } as NodeDataMap[T];

5. Register Node Type

In canvas page, add to nodeTypes:

const nodeTypes: NodeTypes = {
  // ...existing types
  '${NODE_TYPE}': ${NODE_NAME},
};

6. Add to Menus

Add entry to AddBlockMenu, ConnectMenu, and NodeContextMenu.

Checklist

• Type definition in types/index.ts
• Component in components/nodes/
• Barrel export
• Default data in store
• Registered in nodeTypes
• Added to menus
• Keyboard shortcut (optional)
• Tests added