Unleash Your Creative Dragon 🐉

Dragon Drop is a human-centered AI Tool for Computer Supported Brainstorming proposed and implemented by Arvind Srinivasan, funny space drawf and George Tee.

TLDR: We implemented an alternative AI-boosted brainstorming tool that (philosophically) aims to be better than any other similar alternatives. Try playing with our fancy demo by clicking the link below.

Dragon Drop

We made an alternative AI-boosted brainstorming tool by better incorporating Gestalt and HCAI Principles. Check out our fancy demo here: DragonDrop

Since you are still with us, you are probably more interested in finding a reason why you should try DragonDrop, or even why we have to develop it. Well it’s a bit of a story, let’s start by reviewing brainstorming a bit.

We all know that brainstorming is the go-to method for kicking off any project. People get together, toss out a bunch of wild ideas, and hope a few stick. But here’s the problem: coming up with a ton of ideas is exhausting, and organizing them into something useful is even more challenging. Could advanced AIs like ChatGPT solve this? They’ve been used for everything from booking hotels to skimming documents quickly, so surely they can help with brainstorming too. A quick search will show you plenty of AI tools designed for this purpose. Most of these tools are pretty straightforward: type in a keyword, hit a button, and voilà, an endless stream of ideas pops up. Need more detail to justify your ideas? Have a chat with the friendly AI, surely you will get inspired, just like you would with a random person. But are these tools the ultimate solution to AI-boosted brainstorming? Not quite.

Simple ideas can be problematic, and many academics have pointed out the risks. Let’s break it down. These tools generate ideas based on a keyword, but you can’t filter which ideas to keep or discard, leading to a cluttered mind map. Researchers like Garibay et al. and Amershi et al. emphasize the importance of agency, the ability to control and master these tools, which is missing here. Additionally, these ideas don’t indicate whether they’re from a human or AI, leading to the loss of another concern, stressed by Hoque et al., that is provenance, the differentiation between AI-generated content and human creativity. Even chatting with the AI can be tricky. There is a high probability that chatting with the AI will lead you to consider it as a human, a phenomenon known as anthropomorphism, as pointed out by Schneiderman. Mistaking the AI for a human can mislead users into believing that the AI has human-like performance and capabilities. In fact, however, AI may not even understand what you are talking about, as we discussed in George Tee’s previous post.

After all these occult theories, these pitfalls about agency, provenance, anthropomorphism and more, how could we make an AI-tool differently? Here’s one attempt, DragonDrop.

Our tool: Dragon Drop

This image shows a demonstration of how our prototype works. In this context, looks like even the AI knew that its not all about features but all about how they enhance a user’s experience! 😂

The AI will try to learn from placements of your sticky notes to give better fitting placements and move theirs if asked. You can tell the system to unlearn certain sticky notes and revert them from a user made note to an AI generated one. To track who’s doing what, accountability or provenance as speaking in HCAI, this system marks both your input and AI results verified and confirmed by you as green stickies while AI filled stuff will be kept in orange. Transparency wise, a session history on each change of sticky notes is saved to a side-bar for you to better understand the whole process and hopefully, as a future feature, to rewind the interactions. For extra explainability, there will be AI-provided reasonings for each sticky note change made hidden in a secondary button on each note for anyone curious enough to check.

At last, let’s end with a funny long word for this section, anti-anthropomorphism. Anthropomorphism is where people treat non-human objects as human, namely getting mad at a chatbot because it can’t do human things. We certainly don’t want people to have false expectations about our system for the good of both sides. So here you won’t see any remarkable chatbot elements alike. The only few chatbox elements work as input only and the actual chat done with GPT API is processed in the background with our preset, carefully engineered prompts combined with your input. In this way, we hope to create an AI-boosted system without needing you actively engaging with a chatbot.

Implementation

Well, how do we bring this amazing concept into reality then? Let’s break down the nuts and bolts of this AI-boosted brainstorming tool.

Front-End Development

We kicked things off with React.js to build our front-end. Its component-based architecture made creating a responsive and interactive user interface straightforward. For the design, we used the @shadcn/ui Component Library, along with @radix-ui/themes and tailwindcss. This combo gave us a functional, visually appealing, and customizable interface.

AI Integration

The magic happens with the AI, powered by openai’s JavaScript Bindings. We created a custom internal hook called useGPT, which takes in a systemMessage string and a promptGenerator function. These inputs allow the hook to retrieve responses as valid, parsable objects automatically. If something goes wrong, it throws errors for us to handle.

From this foundation, we built specialized hooks:

• useAddNote: Adds new sticky notes to your brainstorming map.
• useFitNote: Adjusts notes to fit perfectly into your coordinate system.
• useGenerateNote: Generates new sticky notes based on context and AI suggestions.
• useSessionTitler: Manages session titles.
• useAxisLabels: Helps label your axes to keep things organized.

All these hooks returned coordinates for fitting a sticky note, positioning it relative to the dimensions of the container that acts as the canvas. We designed the returned cartesian coordinates to be bounded within a 10 x 10 grid.

Session Storage

We opted for Client Side Session Storage instead of a full-fledged backend. This keeps things simple and efficient, storing your sticky notes and brainstorming sessions directly in your browser. It’s an effective way to keep your data handy without needing heavy server infrastructure.

Future Work

Certainly this will need a thorough evaluation, and it’s yet to be done. If this project is going any further and with an evaluation of the current work done, we can move on implementing features and ideas yet to be done due to many constraints, mainly time. A missing feature for the history tab is to rewind the canvas to a certain point of history interaction instead of just showing what happened. Based on current implementation, the number of dimensions is not much of a restriction. We may explore the effectiveness of providing simpler 1-dimensional templates or the feasibility of multi-dimensional ones for users. Or we can experiment with different layouts or systems based on the same design philosophy we used in this one.

We designed DragonDrop to be a tool, not a human-like entity. You won’t be chatting with a bot. Instead, our over-engineered prompts, combined with your input, work silently in the background, explaining the reasoning for its choices when needed. This ensures you get the best suggestions without any misleading interactions.

Please note that, while our demo will only be supported for a limited period of time due to the cost of using OpenAI, If you would like to delve deeper into our implementation to host your own locally, feel free to check out our GitHub Repository. It’s full of details, code snippets, and insights into how we brought DragonDrop to life.

GitHub - isarvindone/dragon-drop: A Human Centered AI Tool for Brainstorming using Gestalt…

References

• Amershi, S., Weld, D., Vorvoreanu, M., Fourney, A., Nushi, B., Collisson, P., … & Horvitz, E. (2019, May). Guidelines for human-AI interaction. In Proceedings of the 2019 chi conference on human factors in computing systems(pp. 1–13).
• Tan, C. (2023, June 8). On AI Anthropomorphism. Human-Centered AI. https://medium.com/human-centered-ai/on-ai-anthropomorphism-abff4cecc5ae
• Ozmen Garibay, O., Winslow, B., Andolina, S., Antona, M., Bodenschatz, A., Coursaris, C., … & Xu, W. (2023). Six human-centered artificial intelligence grand challenges. International Journal of Human–Computer Interaction, 39(3), 391–437.