Wickey&Joey - Generative UI Global Hackathon: Agentic Interfaces
AI Tinkerers - Hong Kong
Hackathon Showcase

Wickey&Joey

2 members Watch Demo

đź’ˇ Inspiration
In today’s hyper-competitive academic and professional landscape, university students face unprecedented levels of stress—juggling job interviews, graduate school applications, and intense exam seasons. When burnout hits late at night, writing in a traditional diary feels like a chore, and interacting with standard AI chatbots feels incredibly cold and mechanical. We realized that users don’t just need a text generator; they need an empathetic sanctuary. We built Aura Journal to bridge the gap between ancient Eastern wisdom and cutting-edge frontend technology, creating a deeply personalized, dynamically rendered resting place for the mind.

🎯 What It Does
Aura Journal is a Web-based application that fuses the traditional Eastern metaphysics of “Bazi” (Four Pillars of Destiny) with next-generation Generative UI capabilities. Embracing the “Kill the Dashboard” paradigm, it completely eliminates static interfaces and generic chatboxes. Instead, the AI agent dynamically orchestrates and renders interactive UI components on the fly, tailoring the entire visual and emotional experience to the user’s unique astrological profile and real-time state.

✨ Core Features
Destiny Onboarding (Personalized Energy Cards): We’ve replaced the tedious registration form. By simply inputting birth details and location, our AI instantly calculates the user’s core traits and natively renders stunning, exclusive “Five Elements” (Wood, Fire, Earth, Metal, Water) visual cards. This establishes the aesthetic and emotional baseline for the entire user journey.

Aura Whispers (Contextual Venting Space): A safe haven for users to let out their frustrations. Synthesizing the user’s local time with their astrological chart, the application generates tailor-made, comforting guidance. Crucially, this response isn’t just text—it is rendered as interactive healing cards directly within the UI. All emotional states are securely logged, allowing users to trace their mindfulness journey over time.

Daily Resonance (Dynamic Self-Reflection): We eliminated static journal templates. Powered by daily astrological alignments, the reflection page utilizes graceful fade-in animations to present three highly customized questions (e.g., “What invisible force pushed you forward today?” or “What brought you a sense of security?”). AI meets astrology to make every self-dialogue deeply impactful.

⚙️ How We Built It
Aura Journal represents a shift from “text-in, text-out” to “UI as a generated output.”

Frontend & Animation: Built with React and styled using Tailwind CSS, incorporating smooth transitions to enhance the “metaphysical” aesthetic.

Generative UI Engine: Powered by CopilotKit. We heavily utilized useCopilotAction to allow the underlying LLM to directly command the frontend, seamlessly rendering custom React components (like the Element Cards and Reflection Modules) based on real-time agent reasoning.

Architecture: Explored the MCP Apps (Model Context Protocol) architecture to manage complex context windows and system-level prompt orchestration efficiently.

🚀 What’s Next
We plan to expand Aura Journal by integrating deeper astrological datasets and adding multi-modal inputs, allowing users to vent through voice notes while the UI dynamically shifts colors and shapes to match their vocal tone and energy levels.

CopilotKit Cursor

Github!

Summarizing URL...