Originally forked from an Anthropic cookbook project out of curiosity, Moth was built by reimagining everything from the ground up, only retaining the rounded sidebars, and learning UI/UX in the process. I designed it as a single-page application, eliminating page load times, and creating a seamless, modern experience.

The design prioritises clarity and minimalism, with a heavy focus on intuitive, user-friendly interactions. Every element was crafted to feel natural, beautiful, and efficient, allowing users to focus on their workflow without distraction.

The conversation sidebar was designed to simplify how users organise and navigate their communication history. I implemented a file tree-style sidebar to provide a clear, hierarchical structure, inspired by the need for efficiency and organization in complex workflows. By also adding simple micro-interactions like opening and closing folders, I was able to elevate the user experience to something truly enjoyable to use.

This approach ensures users can quickly locate and organise conversations while maintaining context across multiple threads.

The index system lives in the right sidebar as a dynamic component that allows users to manage, fork, publish, and build knowledge bases in one cohesive interface. Designed for seamless workflows, it provides smooth animations minimal mouse movement to ensure a smooth user experience.

This feature makes managing knowledge bases intuitive and efficient, keeping everything accessible without cluttering the main chat interface.

As part of the dynamic right sidebar, the text editor in Moth is a fusion of Notion's intuitive UX and Claude's artifact system. Built with the Tiptap library, it allows users to create markdown-style components via the slash command menu, and toolbar, making writing structured content fast and seamless.

It also functions as an artifact panel for the AI agent, enabling users to create, edit, and upload documents directly to indexes, employing the help of AI. With features like pasting markdown, exporting, alignment, highlighting, and headings, the editor is designed for maximum efficiency and usability.

The command palette offers a keyboard-first approach to navigating the application with speed and precision. Inspired by the growing popularity of command palletes in many websites, it allows users to perform complex actions through simple commands.

Additional features, like instant math functions inspired by Raycast, make it more than just another command pallete. Its an extensible quick interface for all future app functionality.