NodePrompt

Spatial Prompt Engineering through Interactive Concept Graphs

NodePrompt decomposes prompts — text, images, or PDFs — into multi-dimensional concept graphs, renders them on a 3D sphere, and lets users spatially reorganize ideas before resynthesizing them into structured prompts for higher-quality AI responses.

"Thinking is non-linear. Language is linear. The sphere bridges that gap."

한국어 README  ·  taewoopark.com — author site

Why NodePrompt?

Traditional prompt engineering is a black box: you type text, get a response, and iterate blindly. NodePrompt makes the structure of your prompt visible and editable.

The core innovation is Human-AI Co-Decomposition: AI proposes a conceptual structure, humans reshape it spatially, then AI resynthesizes — a cyclic collaboration loop grounded in knowledge structure theory.

Theoretical Foundations

NodePrompt's design draws from established research in cognitive science, knowledge representation, and information visualization.

Cognitive Architecture

• Rosch's Basic-Level Categorization (1976) — The extraction system places the densest layer of nodes at depth 2 (basic level), where human cognition operates most efficiently. Superordinate themes sit above; subordinate details below.
• Miller's Law (7 +/- 2) (1956) — Each parent node is limited to ~7 children, respecting working memory capacity. The branching factor is computed as min(7, ceil(N^(1/D))).
• Hayakawa's Abstraction Ladder (1939) — Deeper hierarchy levels descend in abstraction: root themes are the most abstract, leaf nodes are concrete instances.

Knowledge Representation

• Ranganathan's Faceted Classification (1933) — Nodes carry independent facets (cognitive type, epistemological stance, rhetorical role) rather than a single rigid taxonomy. A "mood" node can appear at any depth.
• Novak's Concept Mapping (1972) — Cross-branch edges (not just tree edges) are where genuine insight emerges. The system supports 6 relation types: causal, contrast, amplify, suppress, parallel, dependency.
• TopicGPT Multi-Pass Extraction (2024) — Multi-pass extraction produces more accurate concept graphs than single-pass approaches. NodePrompt uses a 3-phase pipeline: Scaffold, Fill, Validate.

Visualization Theory

• Munzner's H3 Hyperbolic Layout (1997) — Interior mode uses a Poincare ball approximation where central nodes appear larger and peripheral nodes compress, enabling focus+context navigation.
• Lombardi Network Aesthetics — All edges are Bezier curves with alternating sweep directions, following Mark Lombardi's network diagram style: black on white, no colors, no shadows, geometric precision.

Prompt Engineering Research

• Chain-of-Symbol (CoS) Prompting — Structured symbolic representations (node types, weights, relations) improve LLM spatial reasoning when resynthesized into prompts.
• Visual Prompt Engineering — Research shows text excels at describing transformations and goals, while spatial layouts better communicate relationships and relative importance. NodePrompt combines both modalities.

Features

Three Interaction Modes

            [Sphere Mode]
          3D overview on sphere
         /        |         \
     Space    Double-click   Scroll-zoom
        \        |          /
         [Radial Mode]   [Interior Mode]
       2D concentric     Fisheye from
       ring editing      inside sphere

Sphere Mode — Nodes distributed on a sphere surface via Fibonacci lattice. Orbit, zoom, and click to explore the full concept graph at a glance.

Radial Mode — 2D editing workspace. Nodes arranged in concentric rings by hierarchy depth (max 5 rings). Drag to reposition, scroll to adjust weight, shift-click to create edges.

Interior Mode — Immersive fisheye view from inside the sphere. Hyperbolic scaling (Poincare ball model) magnifies nearby nodes while compressing distant ones.

All transitions are smooth GSAP morphs preserving node identity.

Six Transcendental Dimensions

NodePrompt's six node types are Aquinas's six transcendentia from De Veritate q.1 a.1 — the metaphysical modes by which any being (ens) can be considered. Every prompt is read through these six registers, each asking a different question of the same text:

The six are not six kinds of being but six aspects of the same being — "convertibilia cum ente" (convertible with being itself). A single concept can be read through any register; the register chosen is the lens, not the content. Each type is distinguished by a unique pattern texture (Lombardi-style: no colors, pattern-only differentiation), and the Help overlay (? button) contains the full mapping with example questions.

Multimodal Prompting

Attach images and PDFs directly to the prompt — the extraction pipeline reads them alongside the text. Drag-and-drop, click, or paste into the dropzone below the textarea.

Text is optional when an attachment is present — and when text is present, it supplies the angle the attachment should be read from (e.g. "what are the methodological commitments here?" vs. "what would this imply for practice?").

Limits: 5 MB per image (JPEG/PNG/WebP/GIF), 10 MB per PDF. Capability is provider-specific:

Switching the active provider rewires the dropzone to match the new provider's capabilities. Unsupported files are rejected at the UI layer with a specific error message before any network call.

Interactive Graph Editing

• Click a node to focus — connected nodes highlight, others fade with smooth transition
• Click again to unfocus
• Drag nodes in Radial mode to spatially reorganize
• Scroll wheel on a node to adjust its weight (importance)
• Shift+click two nodes to create an edge between them
• Right-click empty space to add a new node (works in both Sphere and Radial modes)
• Right-click a selected node for context menu (type change, delete, edge creation)
• Double-click a node label (in either panel) to rename it inline
• Edit panel (right side) — label editing, description with Auto AI-generate button, weight slider, type selector, delete, edge actions
• Info panel (left side) — label editing, description, connected nodes list, weight bar with click-to-navigate

Hand Gesture Control

NodePrompt supports hands-free interaction via webcam using MediaPipe hand tracking. Toggle the gesture button (bottom-left) to activate.

The system runs at ~15 fps inference with 1-Euro filters for smooth, jitter-free tracking. A ring cursor on the sphere surface provides real-time visual feedback. An optional mini webcam preview can be toggled from the overlay.

Synthesized Prompt Pipeline

  User's prompt
       |
       v
  [3-Phase AI Extraction]
  Scaffold -> Fill -> Validate
       |
       v
  Concept Graph (editable)
  - Hierarchy with depths
  - Weighted nodes (0-1)
  - Typed relationships
       |
       v
  [Prompt Synthesizer]
  Graph -> structured prompt preserving:
    - Node hierarchy & weights
    - Edge relationships
    - Deleted perspectives (noted as excluded)
    - Cross-branch connections
       |
       v
  [AI Response Generation]
  Higher quality, more nuanced output

Getting Started

Prerequisites

• Node.js 18+
• An API key for at least one of the six supported providers:
• Anthropic Claude · OpenAI GPT · Google Gemini
• xAI Grok · DeepSeek · Alibaba Qwen (DashScope)

Installation

git clone https://github.com/TaewoooPark/NODEPROMPT.git
cd NODEPROMPT
npm install
npm run dev

Provider & API Key Setup

NodePrompt speaks to six LLM providers through a unified interface. Pick whichever you have a key for — structured extraction, streaming, and descriptions all work identically across providers.

| Provider | Fast (extraction) | Flagship (generation