Arcane Tome Chat: An Early Look at Themed AI Interfaces

Before developing the more feature-rich AGI Chat, one of my early experiments in creating user-friendly AI tools was the Arcane Tome Chat. This web application focused specifically on exploring how visual themes and interface design could shape the experience of interacting with AI language models.

The idea was simple: could changing the look and feel make chatting with an AI feel less like using a tool and more like an immersive experience, such as consulting a magical tome or a high-tech console? Arcane Tome connects to various AI backends (api_providers.js) and manages chat history (IndexedDB via idb library), but its primary contribution was in experimenting with visual customization and UI paradigms.

Key Features of Arcane Tome Chat

Arcane Tome provides a distinct chat experience focused on aesthetics and customization:

• Multiple Visual Themes: Switch between various themes (Fantasy, Cyberpunk, Corpo, Gothic, Cute, Retro, Fitness) via the settings menu. Each theme changes the appearance using different CSS files (chat-*.css).
• Multi-Provider & Model Support: Connect to different AI APIs and select specific models using the API configuration menu. This relies on the external api_providers.js file for definitions.
• Customizable "Spirit Guidance": Set custom system prompts to guide the AI's personality or role. These prompts can be saved and easily switched between using a dropdown menu.
• Avatar Customization & Unique UI: Change the user ('Your Sigil') and AI ('Spirit's Sigil') avatars. Uniquely, the main settings modal is accessed by clicking the **AI (Spirit) avatar**, while the API/provider/chat management menu is accessed by clicking the **User avatar**. This keeps the main interface clean.
• Persistent Chats & Settings: Conversations are saved using IndexedDB, allowing you to load past chats. Settings like selected theme, language, API keys, active keys, and saved prompts are persisted using Local Storage.
• Multi-Language Support: The interface can be switched between English, Portuguese, and Chinese using the language selector in the settings menu.
• Markdown Rendering: AI responses are rendered using the `marked.js` library, supporting common Markdown formatting like lists, bold, italics, and code blocks (with copy buttons).
• Open Source: The entire application, including the HTML structure, CSS themes, and JavaScript logic, is open source under the MIT License.

Early Lessons in UI/UX for AI Interaction

As an early step on the Road to Free Open AGI, Arcane Tome was primarily an exploration of user experience:

• The Power of Immersion: It demonstrated that a themed interface *can* significantly alter the feel of an AI interaction, making it potentially more engaging for specific use cases.
• The Importance of Personalization: Offering theme, avatar, and guidance choices highlighted the user desire for tools that adapt to their preferences.
• UI Paradigm Exploration: The avatar-click menu system, while unconventional, was a useful experiment in simplifying the main view and exploring alternative navigation methods for settings.

While later projects like AGI Chat incorporated more advanced functional features, Arcane Tome served as a valuable learning experience in considering the *human* side of human-AI interaction and the importance of a well-designed interface.

Open Source Foundation

Arcane Tome Chat is fully open source (MIT License). The code, including the theme stylesheets and the JavaScript managing the application, is available on GitHub within the main FreeOpenAGI repository, alongside AGI Chat and other project components.

Feel free to explore the code, try the different themes, and see how this early experiment paved the way for later applications!