DEV Community

leopaul29
leopaul29

Posted on

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

#devchallenge #ai #authentication #auth0

🎌 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
Login Screen
Simple authentication flow powered by Auth0

AI Agent in Action

AI Response
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! 🎌
Enter fullscreen mode Exit fullscreen mode

How It Works

  1. User logs in via Auth0 (fake log for instance)
  2. Enters any city (e.g., Tokyo, Paris, Kyoto)
  3. AI Agent reasons: "I need weather data first"
  4. Calls get_weather tool → Fetches real-time data
  5. Analyzes conditions → Suggests Japanese clothing
  6. 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('=')
Enter fullscreen mode Exit fullscreen mode

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']
    }
Enter fullscreen mode Exit fullscreen mode

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...
Enter fullscreen mode Exit fullscreen mode

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..."""
Enter fullscreen mode Exit fullscreen mode

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?

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

Integrating Auth0?

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

Using Streamlit?

  1. Session state is tricky with redirects - plan accordingly
  2. Deploy early and often to catch cloud-specific issues
  3. 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!

Top comments (0)