MultiFlex

We want to challenge how search and information is traditionally presented in AI systems. That's why we built AI agents that go beyond chat interface — our platform lets AI generate dynamic, visual interfaces tailored to your question.

The vision was to build agents that replace traditional search, with a focus on investigating how agents can dynamically create user-interfaces for different purposes such as presenting information, running simulations, handling user interactions, etc by writing and updating code in real time. Instead of restricting agents to chat interfaces, we let them unleash their creativity and context-awareness. We weren't able to find good enough models at the time (that balances robustness and latency) and ran out of time at the hackathon, but the same vision was later built by the team behind Google Search, in their Gemini 3.0 release video. DeepMind released a research demo on Gemini 2.5 called "just-in-time generative UI" with the exact same vision as well one week after our hackathon.

Warning

This project is no longer maintained! This is a proof-of-concept prototype that may not work in production.

View us on Devpost (NUS Hacks) and our demo video

Key Features:

• Instead of just text, the AI can present answers as cards, tables, galleries, or custom layouts, choosing the best format for each context.
• With advanced multimodal capabilities, RAG, searches, and real-time image generation, the system delivers responses enriched with images, structured data, and interactive elements—making complex topics clearer and learning more engaging.

Architecture

Our full stack multi-agent application leverages cloud technologies for scalability and performance and cutting edge AI models like Gemini and Imagen for advanced language and multimodal capabilities.

Multi-Agent System

Our multi-agent architecture is orchestrated using LangGraph:

Research Agent

• Purpose: Gathers comprehensive information from multiple sources
• Tools: RAG search, web search, image search
• LLM: Gemini 2.0 Flash for research planning and synthesis
• Output: Consolidated knowledge base with documents, search results, and images

UI Designer Agent

• Purpose: Creates interactive UI specifications based on research findings
• Tools: UI image search, Imagen generation for custom visuals
• LLM: Gemini 2.0 Flash (high creativity) for UI design
• Output: Dynamic UI components with embedded content and generated images

LangGraph Orchestrator

• Purpose: Coordinates agent workflow and state management
• Features: Tool condition routing, state persistence, iteration control
• Flow: Research → UI Design → Response Generation

Demo Photos

Technology Stack

Backend

• Framework: FastAPI with Uvicorn
• AI/ML: LangChain, LangGraph, Google Gemini 2.0 Flash
• Vector Database: ChromaDB with Google Embeddings
• Search: DuckDuckGo Search API
• Image Generation: Google Imagen
• Document Processing: Unstructured, PyPDF, python-docx

Frontend

• Framework: Next.js 14 with TypeScript
• Styling: Tailwind CSS
• Components: Custom dynamic UI renderers
• Build: Static export for Firebase Hosting

Infrastructure

• Backend Hosting: Google Cloud Run (serverless)
• Frontend Hosting: Firebase Hosting
• CI/CD: Google Cloud Build
• Storage: Google Cloud Storage (optional)

For Developers

Project Structure

nus-hacks/
├── backend/                     # Python FastAPI backend
│   ├── src/
│   │   ├── main.py             # FastAPI application
│   │   ├── agent.py            # LangGraph multi-agent workflow
│   │   ├── tools.py            # Research and UI generation tools
│   │   ├── rag_manager.py      # ChromaDB RAG implementation
│   │   └── upload.py           # Document upload handling
│   ├── vectorstore_data/       # ChromaDB persistence
│   ├── requirements.txt        # Python dependencies
│   ├── Dockerfile             # Container configuration
│   └── .env.example           # Environment template
│
├── frontend/                   # Next.js TypeScript frontend
│   ├── src/
│   │   ├── app/               # Next.js App Router
│   │   │   ├── page.tsx       # Main chat interface
│   │   │   ├── result/        # Response display page
│   │   │   ├── upload/        # Document upload page
│   │   │   └── manage/        # Document management
│   │   └── components/        # Dynamic UI components
│   │       ├── Card.tsx       # Content cards
│   │       ├── Gallery.tsx    # Image galleries
│   │       ├── Hero.tsx       # Hero sections
│   │       ├── List.tsx       # Interactive lists
│   │       ├── Stats.tsx      # Data displays
│   │       └── Testimonial.tsx # Quote blocks
│   ├── package.json           # Node.js dependencies
│   └── firebase.json          # Firebase configuration
│
├── cloudbuild.yaml            # Google Cloud Build configuration
└── README.md                  # This file

Local Setup

Backend Setup

1. Navigate to backend directory:

   cd backend

2. Create and activate virtual environment:

   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install dependencies:

   pip install -r requirements.txt

4. Configure environment:

   cp .env.example .env

   Edit .env with your credentials:

   GOOGLE_API_KEY=your_google_api_key_here
   CORS_ORIGINS=http://localhost:3000,http://127.0.0.1:3000

5. Run the backend server:

   # From the backend directory
   python -m src.main
   
   # Or using uvicorn directly (recommended)
   uvicorn src.main:app --host 0.0.0.0 --port 8000 --reload

   Backend will be available at http://localhost:8000

Frontend Setup

1. Navigate to frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Configure environment (create .env.local):

   NEXT_PUBLIC_API_URL=http://localhost:8000

4. Run development server:

   npm run dev

   Frontend will be available at http://localhost:3000

API Testing

Test the backend directly:

curl -X POST "http://localhost:8000/api/agent" \
  -H "Content-Type: application/json" \
  -d '{"prompt": "Explain quantum physics", "user_id": "test-user"}'