Rethinking an interface for brainstorming with AI
In my process sometimes I use AI to help me exploring and expanding my ideas. I start with some rough thoughts that I have, and then trying to test my assumptions, add what's missing and remove what's not needed. But i often felt like a chat interface is not really made for that.
The problem with chat
There are some pretty major problems that are bothering me:
- You cannot revert to a point in the conversation without losing all the context that came after. So if there's something in your history you don't like, you're stuck with it.
- You cannot branch out, explore another idea, and bring something back to the main thread. Won't it be cool if you could?
- Conversations get messy fast, and there's no way to clean them up. Keeping all of it in your head takes a lot of attention.
- You cannot generate a couple of different answers for the question and then decide what to remove and what to keep.
- Popular interfaces like Claude or ChatGPT are kinda slow. And you know, why use someone else's Swiss Army knife that can't even cut right, when for a bit of time and tokens i can forge my own sword, tailored to my specific needs (sword was a bit too loud but you got what I mean)
Ideas don't work like that
So when i thought about all of this, I started to feel that the chat interface is just too linear compared to the way that people (me) think about ideas.
In chat, you only have the message that you received, the response that you wrote, and a long ass history of those things. You cannot really manipulate anything except writing a new message to get a new response. Your entire context always stays there, in the chat history.
Ideas are not like that, they're more like many scattered pieces that are connected to each other and form something together. I guess that's what's called rhizomatic.
That's where the infinite canvas came from. With each unit of conversation as a node, you can manipulate each of them separately. This means you can visually build your context, update it, and see it entirely at the same time – say it's not cool.
Meet henro.space
So I'm happy to introduce henro.space. Here you start, there is just one input. Nothing else. That's your first node/message. In my example i will use it to write down some ideas for the exact same thing that henro is. Very meta, i know.
As you can see, there are no node types, toolbars, or anything like what you can see in your regular node interface. My goal was to make the interface as unobtrusive as possible. And i still feel like there is a lot of stuff that can be done to achieve that.
I honestly would want to encourage people to just try it out and figure out stuff themselves, but for those who don't want to, i have a help menu in the bottom left that explains navigation principles.
Node Connections
Next, double-click an empty canvas to create a new node. Write everything you want there.
Double-click a node + drag creates a connection. You can drag it to the canvas to create a new node already with a connection, or drag it onto another node to connect those. It's very intuitive once you try it.
LLM response
Here is where LLM comes in. Just double-click any node, and you will get an input where you can write your prompt, write something and hit enter (you can leave it as default or empty as well).
Here you go. Your answer is there – pink nodes. 3 different answers at the same time, huh – you can set up as many as you want.
Now imagine this. You got all of those answers, and now you can keep the conversation going from any place you want. Want to get an idea on how this "Export canvas snapshots as shareable images or structured JSON files" could be implemented or why it's useful, just double-click on it and ask.
Under the hood, the LLM has all the context of the connected nodes. It's simple as that. So now you can start exploring a different perspective on the same canvas. Or manage your context however you want.
At the end there is a compose button that summarises your entire board. I'm not going to show it, feel free to find out yourself.
Try it out
Its now live at henro.space or you can get the source code on github to run it locally.
Try it out and let me know what you think. I'm always open to feedback, and would love to hear from your perspective.
Side notes
Before starting, I decided to do some research around spatial interfaces to decide on how mine would feel. But it didn't last for too long. I quickly noticed a couple of common patterns with those canvases. They are too complex. And they are trying to be a one-stop solution for many problems. That's not what I'm after. I want a fast, intuitive tool that feels like it was exactly made for the purpose, that is not in the way of your thinking.
So i decided to just start prototyping it without any context and let myself come up with the best solution for this problem on my own. And because of that i think i came up with some good ideas.
Some decisions and thoughts
- Nodes cannot overlap, they push each other away, so you can't lose anything
- There is a default max height for a node, to not clutter the space, but you can expand it if needed
- Connections are straight lines, because it feels like the most information dense solution
- I don't have a right-click menu or anything like this, because i wanted this software to feel "professional" and fast, and this requires some level of abstraction
- There are still some unsolved challenges that i have, for example, how to make the amount-of-new-branches selector more flexible? So you can set it up quickly on a prompt basis.
- I love all the node interactions that i made there, double-click to generate, double-click and drag to connect or create new, Everything feels extremely smooth and i'm very happy about outcome
Closing note
I have thought a lot about ideas, and how they function. That's quite an interesting topic for me that i would like to explore more in the future.
If you want to talk more about this project or something else, feel free to contact me at contact@vladsavruk.com and I'm open to product design work btw :)