Docs
Prompt Crafter Node

Prompt Crafter Node

A React Flow node component for building dynamic prompts by combining multiple inputs using a template-based approach

React Flow

Overview

The Prompt Crafter Node is a React Flow component that allows you to build dynamic prompts by combining multiple inputs using a template-based approach. It provides:

  • A template editor where you can write your prompt with placeholders
  • Dynamic input handles that can receive text from other nodes
  • Template syntax highlighting that validates input references
  • A single output that combines all inputs according to your template

Components Used

This node is built using several React Flow Components:

Installation

pnpm dlx shadcn@latest add https://simple-ai.dev/r/prompt-crafter-node.json

Usage

The Prompt Crafter Node requires a controller component to manage its state and handle input-related operations. Here's how to implement it in your React Flow application:

// Controller component to manage the Prompt Crafter Node
const PromptCrafterNodeController = ({
  id,
  data,
  ...props
}: NodeProps<Node>) => {
  const [template, setTemplate] = useState("Hello {{name}}");
  const [dynamicHandles, setDynamicHandles] = useState({
    "template-tags": [{ id: "name", name: "name" }],
  });
 
  // Handle input creation
  const handleCreateInput = useCallback((name: string) => {
    setDynamicHandles({
      ...dynamicHandles,
      "template-tags": [
        ...dynamicHandles["template-tags"],
        { id: nanoid(), name },
      ],
    });
    return true;
  }, [dynamicHandles]);
 
  // Handle input removal
  const handleRemoveInput = useCallback((handleId: string) => {
    setDynamicHandles({
      ...dynamicHandles,
      "template-tags": dynamicHandles["template-tags"].filter(
        (input) => input.id !== handleId
      ),
    });
  }, [dynamicHandles]);
 
  return (
    <PromptCrafterNode
      id={id}
      data={{
        status: "idle",
        config: { template },
        dynamicHandles,
      }}
      {...props}
      onPromptTextChange={setTemplate}
      onCreateInput={handleCreateInput}
      onRemoveInput={handleRemoveInput}
      onUpdateInputName={handleUpdateInputName}
    />
  );
};
 
// Register the node type
const nodeTypes = {
  "prompt-crafter": PromptCrafterNodeController,
};

The node provides the following connection points:

  • Inputs:
    • Dynamic inputs that can be added/removed as needed
    • Each input can be referenced in the template using {{input-name}}
  • Output:
    • result: The final prompt with all inputs combined according to the template

The node's features include:

  • Template editor with syntax highlighting
  • Dynamic input management (add, remove, rename)
  • Input validation in the template
  • Visual feedback for valid/invalid input references
  • Quick input insertion through a command palette
Generate Text NodeResizable Node