DEV Community: leopaul29

👘 I Built an AI That Suggests Japanese Outfits Based on Weather (Using Auth0 & GPT-4)

leopaul29 — Sun, 19 Oct 2025 16:15:28 +0000

🎌 Building a Japanese Fashion AI Agent with Auth0, LangChain & Real-Time Weather Data

This is a submission for the Auth0 for AI Agents Challenge

What I Built

Japanese Fashion AI Agent is an intelligent chatbot that combines cultural fashion expertise with real-time weather data to suggest personalized Japanese-inspired outfits for any city in the world.

The Problem It Solves

Ever wondered what to wear in Tokyo's humid summer or Kyoto's snowy winter? Or how to incorporate beautiful Japanese clothing elements like kimono, yukata, or modern streetwear into your wardrobe based on actual weather conditions? This AI agent solves that by:

🌍 Fetching real-time weather for any global city using Open-Meteo API
👘 Suggesting authentic Japanese fashion - from traditional (kimono, yukata, hakama) to modern streetwear
😂 Adding humor and cultural context - making fashion advice entertaining and educational
🔐 Securing user sessions with Auth0 authentication

Key Features

✅ AI Agent with ReAct Pattern - Uses LangChain to autonomously reason, call weather APIs, and generate recommendations

✅ Japanese Fashion Expertise - Trained on traditional and contemporary Japanese clothing

✅ Global Weather Integration - Real-time data for 100,000+ cities worldwide

✅ Auth0 Ready - Built with authentication best practices for production scaling

Demo

🚀 Live Demo: https://japan-outfit-ai.streamlit.app/

📦 GitHub Repository: [https://github.com/leopaul29/japanese-fashion-ai]

Screenshots

Login Screen

Simple authentication flow powered by Auth0

AI Agent in Action

AI agent fetching Tokyo weather and suggesting a yukata outfit

Example Interaction

User: "What should I wear in Tokyo today?"

AI Agent: 
🌤️ Weather in Tokyo, Japan: 22°C, clear sky, 
precipitation: 0mm, wind: 8 km/h

Perfect spring weather for a light indigo yukata 
with a subtle floral pattern! Pair it with geta 
sandals for that authentic click-clack sound effect 
(+10 style points). Since there's a gentle breeze, 
throw on a casual haori jacket - think of it as 
the Japanese cardigan but way cooler. 

You'll look like you just stepped out of a Studio 
Ghibli film! 🎌

How It Works

User logs in via Auth0 (fake log for instance)
Enters any city (e.g., Tokyo, Paris, Kyoto)
AI Agent reasons: "I need weather data first"
Calls get_weather tool → Fetches real-time data
Analyzes conditions → Suggests Japanese clothing
Returns humorous, culturally-informed advice

How I Used Auth0 for AI Agents

Authentication Architecture

I built this project with Auth0 OAuth 2.0 best practices, using the PKCE (Proof Key for Code Exchange) flow for secure authentication:

# Auth0 Configuration
AUTH0_DOMAIN = os.getenv("AUTH0_DOMAIN")
AUTH0_CLIENT_ID = os.getenv("AUTH0_CLIENT_ID")
AUTH0_CLIENT_SECRET = os.getenv("AUTH0_CLIENT_SECRET")

# PKCE Flow Implementation
def generate_code_verifier():
    return base64.urlsafe_b64encode(
        secrets.token_bytes(32)
    ).decode('utf-8').rstrip('=')

def generate_code_challenge(verifier):
    digest = hashlib.sha256(verifier.encode('utf-8')).digest()
    return base64.urlsafe_b64encode(digest).decode('utf-8').rstrip('=')

Why Auth0 for AI Agents?

1. Secure User Identity Management

AI agents need to know WHO is making requests
Auth0 provides verified user profiles (email, name)
Enables personalized recommendations and usage tracking

2. Token Management for API Calls

AI agents often call multiple external APIs (weather, fashion databases, etc.)
Auth0's token system could secure these calls in production
Future enhancement: Use Auth0 tokens to authenticate agent API requests

3. Session State & Security

# Session management after Auth0 login
if user_authenticated:
    st.session_state.authenticated = True
    st.session_state.user_info = {
        "email": user_data['email'],
        "name": user_data['name']
    }

4. Scalability for Production

Current demo uses simplified login for hackathon speed
Full OAuth 2.0 flow implemented and ready to activate
When scaling, Auth0 handles millions of users effortlessly

Lessons Learned and Takeaways

🧠 Key Insights

1. AI Agents Need Structure
Initially, I let GPT generate responses freely, which led to hallucinated weather data! The solution was implementing the ReAct pattern (Reasoning + Acting):

Thought: I need weather data
Action: get_weather("Tokyo")
Observation: Tokyo 22°C, clear
Thought: Now I can suggest outfit
Final Answer: Wear a light yukata...

This forced the agent to always use real tools before answering.

2. Streamlit + Auth0 Session Challenges
Streamlit's session state resets on redirects, which broke the OAuth state parameter validation. I learned to:

Store critical data server-side (or use fixed verifiers for demos)
Implement graceful fallbacks for hackathon timelines
Plan for proper session storage (Redis/database) in production

3. Prompt Engineering is Everything
My first prompt was generic: "Suggest an outfit"

After iteration:

"""You are a hilarious JAPANESE fashion advisor...
MUST use get_weather tool FIRST...
Suggest items like: kimono, yukata, hakama, haori...
Add humor with cultural references..."""

Result: 10x better responses with authentic Japanese fashion terms!

4. API Selection Matters

Initially tried using Auth0 tokens for Open-Meteo (unnecessary!)
Open-Meteo is free and open - no auth needed
Lesson: Understand your APIs before adding complexity

🎓 What I Learned

About AI Agents:

Agents need guardrails (max iterations, required tool usage)
Verbose mode is essential for debugging agent reasoning
Tools should return structured, validated data

💡 Advice for Other Developers

Building AI Agents?

Start with a single tool and make it bulletproof
Use ReAct pattern to prevent hallucinations
Test with edge cases ("test", "123", empty strings)
Keep max_iterations=5 (prevents infinite loops)

Integrating Auth0?

Read the Auth0 Quickstarts - they're excellent
Test OAuth flows locally before deploying
Use environment variables for ALL secrets
Implement demo auth for hackathons, but architect for production

Using Streamlit?

Session state is tricky with redirects - plan accordingly
Deploy early and often to catch cloud-specific issues
Keep it simple - Streamlit shines with straightforward UIs

🚀 What's Next?

If I continue this project:

✅ Activate full Auth0 OAuth 2.0 flow
✅ Add image generation (DALL-E) for outfit visualization
✅ Store user preferences (favorite cities, styles)
✅ Expand to other cultures (Korean hanbok, Indian saree AI agents)
✅ Weather forecasts (3-7 days) for trip planning

Tech Stack

Frontend: Streamlit
AI Agent: LangChain (ReAct pattern)
LLM: OpenAI GPT-4o-mini
Authentication: Auth0 (OAuth 2.0 PKCE)
Weather API: Open-Meteo
Deployment: Streamlit Cloud

Try It Yourself!

🌐 Live App: https://japan-outfit-ai.streamlit.app/

💻 Source Code: [https://github.com/leopaul29/japanese-fashion-ai]

📝 Login: Use any email/password (demo mode)

🎌 Try: Tokyo, Kyoto, Paris, New York, or your city!

Final Thoughts

This hackathon taught me that AI agents are only as good as their tools and constraints. Authentication isn't just about security - it's about creating personalized, trustworthy experiences. Auth0 makes it possible to focus on the AI magic while knowing the authentication layer is production-ready.

Special thanks to Auth0 for hosting this challenge and pushing developers to think about AI security from day one! 🙏

Built with ❤️ and a lot of yukata references 🎌

Have questions about the implementation? Drop a comment below!

Samurai Progress Dashboard: Gamifying Japanese Learning with KendoReact

leopaul29 — Mon, 29 Sep 2025 06:52:38 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

Samurai Progress Dashboard (サムライ進捗) is a gamified progress tracker that combines Japanese language learning with travel goal tracking. Inspired by samurai culture, this app transforms your Anki study sessions and Japan trip planning into an engaging RPG-like experience.

The problem it solves: Learning Japanese and planning Japan trips can feel overwhelming and monotonous. By adding gamification elements (XP, gold, missions, shop items, badges), users stay motivated and track their progress in a fun, visual way.

Key Features:

🎯 Mission System: Track learning goals and travel objectives with deadlines and rewards
🏪 Shop: Purchase virtual items (Ramen Bowl 🍜, Matcha Tea 🍵, Kimono 👘, etc.) using earned gold
📊 Statistics Dashboard: Visualize XP progression with charts and view player stats
🏆 Badge System: Earn achievements as you complete missions
🌐 Bilingual Interface: Full English/Japanese translation toggle (EN/日本語)
🎨 Samurai Theme: Dark red & black aesthetic inspired by Japanese warrior culture

Demo

🔗 Live Demo: https://samurai-progress-dashboard.vercel.app/

📦 GitHub Repository: https://github.com/leopaul29/Samurai-Progress-Dashboard

Screenshots:

Dashboard (ダッシュボード)

Missions Page (任務)

Profile Page

Shop (商店)

KendoReact Components Used

I successfully integrated 10+ KendoReact free components into this project:

Grid (@progress/kendo-react-grid) - Mission list and shop items table with row selection and inline editing
TabStrip (@progress/kendo-react-layout) - Main navigation between Dashboard, Missions, Shop, Statistics, and Profile
Card/CardBody/CardHeader (@progress/kendo-react-layout) - Dashboard info cards and profile sections
Button (@progress/kendo-react-buttons) - Action buttons throughout the app
Chip/ChipList (@progress/kendo-react-buttons) - Badge display system
Switch (@progress/kendo-react-inputs) - Language toggle (EN/JP)
ProgressBar (@progress/kendo-react-progressbars) - XP progression visualization
Notification/NotificationGroup (@progress/kendo-react-notification) - Success messages for purchases and actions
DropDownList (@progress/kendo-react-dropdowns) - Language selector (alternate implementation)
Indicators (@progress/kendo-react-indicators) - Loading states and visual feedback

Additional Libraries:

react-i18next + i18next-browser-languagedetector - Internationalization
@progress/kendo-theme-fluent - Custom samurai-themed styling
recharts - Data visualization for the Statistics page

Data Visualization with Recharts

For the Statistics page, I integrated Recharts to create interactive charts showing progress over time. Using mocked weekly XP data, I implemented:

// Mocked data for XP progression chart
const weeklyXpData = [
  { day: 'Mon', xp: 10 },
  { day: 'Tue', xp: 25 },
  { day: 'Wed', xp: 40 },
  { day: 'Thu', xp: 70 },
  { day: 'Fri', xp: 90 },
  { day: 'Sat', xp: 120 },
  { day: 'Sun', xp: 160 }
];

<LineChart width={600} height={300} data={weeklyXpData}>
  <Line type="monotone" dataKey="xp" stroke="#dc143c" />
  <XAxis dataKey="day" />
  <YAxis />
  <Tooltip />
</LineChart>

Development Journey

Key Learnings:

1. Creative Workarounds for Free Components
The biggest challenge was working within the constraints of free components. I couldn't use custom cell renderers (premium feature) in the Grid, so I got creative:

Mission completion: Used checkbox editor instead of dropdown (todo → ongoing → done)
Shop purchases: Implemented row selection + external buy button instead of inline action buttons
This taught me to think about UX differently and find elegant solutions within limitations

2. First-Time i18next Implementation
Implementing bilingual support was a major learning experience:

Set up language detection based on browser settings
Created translation files for EN/JP
Built a custom language switcher with KendoReact Switch
Learned about translation key organization and fallback handling

3. Custom Theming
Created a complete samurai-inspired dark theme:

Red (#dc143c) and black (#1a1a1a) color palette
Custom CSS overrides for all KendoReact components
Fixed contrast issues for accessibility
Added Japanese aesthetic elements (sharp borders, red accents, gradients)

4. AI-Assisted Rapid Development
Used AI (Claude) to:

Brainstorm Japanese cultural elements and item names
Generate initial page layouts
Troubleshoot KendoReact component issues
Iterate quickly on design concepts
Built MVP in under 48 hours thanks to AI + KendoReact's components

What I'm Most Proud Of:

The bilingual translation system. This was my first time implementing i18next, and it works flawlessly. The app seamlessly switches between English and Japanese, maintaining context and layout. This skill will be invaluable for future projects targeting Japanese users.

Fun Facts:

Historical Easter Egg: The default player name is "織田信長 (Oda Nobunaga)" - one of the three great unifiers of Japan and a legendary daimyo
48-Hour MVP: From idea to working prototype in less than two days
Cultural Research: Recently studied Japanese history, which inspired the samurai theme and mission names
Gamification Philosophy: Combined Anki learning system with RPG mechanics to make language learning addictive

Technical Highlights

State Management

// GameContext provides global state for XP, gold, badges, items
const { level, xp, gold, badges, addXp, addGold, addBadge } = useGame();

Grid Customization

// Missions grid with inline editing
<Grid 
  data={missions}
  editable={{ mode: 'incell' }}
  onItemChange={handleItemChange}
>
  <GridColumn field="status" title="Done" editor="boolean" />
</Grid>

Bilingual Support

const { t, i18n } = useTranslation();
<h1>{t("dashboardtitle")}</h1>
i18n.changeLanguage('jp');

Target Audience

Perfect for:

Japanese language learners using Anki or similar spaced repetition systems
People planning trips to Japan who want to gamify their preparation
Anyone who loves RPG mechanics and Japanese culture
Students looking for motivation to maintain consistent study habits

Future Enhancements

Data persistence with localStorage/backend
More shop items and badge types
Mission templates (JLPT prep, travel checklist)
Social features (leaderboards, friend challenges)
Mobile app version
Integration with actual Anki stats

Conclusion

This project showcases how KendoReact's free components can build a fully-featured, production-ready application with complex interactions, beautiful UI, and bilingual support. The constraints of free components pushed me to think creatively about UX patterns, resulting in a cleaner, more intuitive interface.

Special thanks to the KendoReact team for providing such powerful free components and excellent documentation!

サムライ進捗ダッシュボード：KendoReactで日本語学習をゲーム化

作ったもの

サムライ進捗ダッシュボードは、日本語学習と日本旅行の目標追跡を組み合わせた、ゲーム化された進捗管理アプリです。侍の文化にインスピレーションを受け、Ankiの勉強セッションと日本旅行の計画をRPGのような楽しい体験に変えます。

主な機能：

🎯 ミッションシステム：学習目標と旅行目標を期限と報酬付きで追跡
🏪 ショップ：獲得したゴールドで仮想アイテムを購入
📊 統計ダッシュボード：XPの進捗をチャートで視覚化
🏆 バッジシステム：ミッション完了で実績を獲得
🌐 バイリンガルインターフェース：英語/日本語の完全対応
🎨 サムライテーマ：日本の武士文化に触発された赤と黒のダークテーマ

KendoReactの無料コンポーネントだけで、完全に機能するゲーム化アプリを48時間以内に構築できることを証明しました！

Made with ⚔️ by a Japanese culture enthusiast
KendoReact + React + TypeScript + Vite