Frontend on steroids with OpenAI

Click here to try it out

I have a UI for visually building up trees, in my application, it’s possible add, remove and edit nodes.
A node simply consists of a title, description, and children.
When connected to OpenAI through a prompt, the UI is given endless capabilities because it operates directly on the data that builds up the tree. Features that haven’t been implemented in my UI: Like moving nodes. Or removing/editing certain nodes based on specific criteria. It can become a little bit slow as the tree grows, but the results are extremely accurate given my intentions and that the model had no additional training. It gets my intentions >90% of the time.
I’ll include a series of screenshots that shows the instructions provided, if interested I can create a video :slight_smile:


If you pay attention it added 6 more professions(?) and not 5 as instructed.




And here it added 4 more nodes to healthcare and not 5 as instructed.




5 Likes

This is fascinating. Is there somewhere I can go and play with this?

1 Like

Sure, I can deploy it later today for you to experiment with :slight_smile:

1 Like

I have deployed it for you to try out, I’ve had lots of fun with it! :slight_smile:
Keep in mind that it’s just a POC and might have some bugs. There are some features that might not make sense in the context of tree node management but I was too lazy to delete them :slight_smile:

The prerequisites to test the application:

  • Signing in via Google OAuth
  • Providing an OpenAI API key - (I suggest that you create a temporary API key which you delete after you’re done playing around!)

There are five actions that can be done to a node from the UI:

  • Add child node
  • Remove node
  • Edit node
  • Mark as done (only possible on leaf nodes)
  • Toggle collapse node (by double-clicking on the node)

I recommend adding some initial child nodes before sending instructions to OpenAI. Please note that the processing time gets slower as the tree grows, but the results also become more accurate. I haven’t really tried optimizing it yet but I’m sure it’s possible.

Sometimes the ai operation returns invalid JSON, usually resending the command fixes it.

Some commands you try:

  • Collapse all nodes that has a title that starts with the letter “L”
  • Delete the X node
  • Move **X**node to be a descendant of Y
  • Add descriptions to all nodes
  • Mark all nodes that are related to X as done
  • Add 5 more nodes with relevant titles under X
  • etc.

Enjoy, and let me know about any interesting findings you do! It really opens up so many possibilities not only with tree structures but with data lists if done properly!

Sure, will try tomorrow for sure and let you know.

1 Like

It’s really interesting. It took me multiple tries before it stopped giving 401 errors, but once I got it going, it was intriguing. I got some nice results.

It is quite slow, though. I realize that this is just a POC, but the waiting gets quite long at times!