A non-linear, node-based LLM chat application where you can create, organize, and connect multiple chat nodes on an infinite canvas. Each node can represent a separate chat session or specialized context, and they can be linked to form a network of ideas or collaborative discussions.
Note: This repository is open-source under the MIT License. We encourage you to explore, fork, and contribute!
platonismo.com provides a non-linear LLM chat experience on an infinite canvas. Rather than a single chat thread, you can create multiple chat nodes, each with its own context and conversation. You can then connect these nodes with edges, enabling structured brainstorming, reference linking, or multi-step workflows across different chat sessions.
For example, one node might focus on summarizing a text, another on brainstorming code ideas, and a third on generating design suggestions. By linking them, you create a web of knowledge where each node can inform or reference others.
- Multiple Chat Nodes: Create separate LLM chat instances, each with its own context or prompt.
- Non-Linear Chat Flow: Connect related nodes to share context, gather references, and build complex conversation graphs.
- Infinite Canvas: Pan, zoom, and arrange nodes freely without space constraints.
- Drag-and-Drop: Move nodes, connect them, and embed external media like YouTube videos or notes.
- Lightweight and Minimal UI: A clean interface that emphasizes your content, with a dark background for visual contrast.
- Next.js 14 – React-based framework for routing, server-side rendering, and more.
- TypeScript – Type-safe JavaScript.
- React Flow – Node/edge-based canvas library for flow diagrams.
- OpenAI API – GPT-3.5/4 integration for chat-based nodes.
- Tailwind CSS – Utility-first CSS framework for rapid UI development.
.
├─ app/
│ ├─ layout.tsx # Defines the root layout
│ ├─ page.tsx # Main page with React Flow
│ ├─ api/
│ │ ├─ chat/route.ts # Streams GPT responses
│ │ └─ chat-function/route.ts # Demonstration of function calling
├─ components/
│ ├─ ChatNode.tsx # Node for a single LLM chat
│ ├─ NoteNode.tsx # Simple text note node
│ ├─ ...
│ └─ providers/ClientProviders.tsx # Theme, ReactFlow, etc.
├─ public/
│ └─ favicon.ico
├─ README.md
├─ package.json
├─ tsconfig.json
React Flow powers the canvas, letting you drag, drop, and connect node elements. Each node can represent a chat, note, video embed, or other content block.
Edges: Connect from one node’s handle to another, passing context or referencing content. Model Node (optional): Can pass a specific GPT model to connected Chat Nodes.
- Streaming GPT Responses: The chat node uses a streaming endpoint to output tokens in real time.
- Function Calling: The chat-function route demonstrates how GPT can decide to call a function (e.g., to fetch weather data), then incorporate the results back into the conversation.
Right-Click on Canvas: Opens a context menu to create a Chat Node or a Note Node. Paste YouTube Links: Automatically embeds a YouTube node.
Drag from one node’s handle to another to create a link. Model Node → Chat Node: Inherits model selection from the Model Node.
Pan: Drag the canvas background. Zoom: Scroll or pinch. You can also use toolbar buttons or keyboard shortcuts (Ctrl +, Ctrl -). Home Button: Resets the viewport to center.
- Fork the project & create a new branch.
- Commit your changes with clear messages.
- Open a Pull Request.
- We welcome ideas, bug fixes, and new node types!
Licensed under the MIT License. Feel free to use and adapt this project for your own non-linear LLM chat or infinite canvas applications. Let us know if you build something cool with it!