🤖 Event Q&A AI Template

Reusable AI Assistant Template with Community-Driven FAQ

A highly configurable template for creating AI-powered Q&A assistants for any event.
Built with Next.js 16, featuring a full-screen chat interface with Google Gemini and community-driven FAQ voting system.
Customize in minutes - just edit config files. One-click FREE deployment on Vercel.

Current Example: AI Hackathon Festival 2025 (New Zealand)

Share Event Q&A AI Template

^{🌟 Create your own event AI assistant in minutes. Fully configurable template for any event.}

📸 Project Screenshots

Tip

Experience the full-screen AI chat interface and community-driven FAQ system in action.

Main Interface - AI Chat (70%) + FAQ Sidebar (30%)

Mobile Views - Responsive Tabbed Interface

Tech Stack Badges:

Important

This is a reusable template - not just a single-purpose application. Clone it, edit a few config files, and deploy your own event Q&A AI in minutes. No code changes required for basic customization.

🚀 Ready to create your own Event Q&A AI?

👉 Read the Quick Start Guide 👈

5 minutes from clone to deployment

📑 Table of Contents

TOC

• 🤖 Event Q&A AI Template
  • 📸 Project Screenshots
  • ✨ Key Features
  • 🔧 Template Configuration
  • 🛠️ Tech Stack
  • 🏗️ Architecture
  • 🚀 Getting Started
  • 🛳 Deployment
  • 📖 Usage Guide
  • 🔌 Customization
  • 🤝 Contributing
  • 📄 License
  • 👥 Team

✨ Key Features

1 Full-Screen AI Chat Experience

Transform your hackathon experience with our revolutionary AI assistant powered by Google Gemini 2.5 Flash. Unlike traditional popup chatbots, our full-screen interface puts AI conversation at the center of your experience.

Key capabilities include:

• 🚀 Real-time Streaming: Character-by-character live responses
• 🎯 Smart Suggestions: Pre-populated question cards for quick start
• 💬 Multi-line Input: Auto-resizing textarea with Shift+Enter support
• 🔄 Persistent History: 50 messages saved locally across sessions
• ⚡ Instant Integration: FAQ questions flow seamlessly into chat

Tip

Try asking: "How do I form a team for the hackathon?" or click any FAQ card to see the instant integration in action.

2 Community-Driven FAQ System

Revolutionary FAQ management that evolves with your community. Users vote on helpful questions, automatically surfacing the most valuable content to the top.

Community Voting in Action - Questions ranked by helpfulness

Available Features:

• Voting System: 👍 Helpful / 👎 Not helpful with real-time sorting
• Smart Search: Find questions by keywords in title or content
• Category Filter: Browse by Event Info, Teams, Technical, etc.
• View Tracking: Popular questions rise to the top naturally
• One-Click Chat: Send any FAQ directly to AI for follow-up

* Additional Features

Beyond the core functionality, this project includes:

• 💨 Instant Setup: Deploy in under 1 minute with one-click Vercel deployment
• 🌐 Responsive Design: Perfect experience on desktop (70/30 split) and mobile (tabs)
• 🔒 Privacy First: Chat data stored locally, votes synced to Notion
• 💎 Modern Animations: Framer Motion powered micro-interactions
• 🎨 Beautiful UI: shadcn/ui components with Tailwind CSS
• 📊 Notion Backend: Real-time vote counts persisted to Notion database
• 🔌 Extensible: Update FAQ through Notion UI without code changes
• ⚡ Performance Optimized: 5-min caching, optimistic updates, lazy loading
• 🛡️ Graceful Fallback: Works without Notion (static questions)

✨ Built as a reusable template - currently showcasing AI Hackathon Festival 2025 as an example configuration.

🛠️ Tech Stack

Next.js 16

React 18

TypeScript 5

Tailwind CSS

Gemini 2.5

Notion API

Frontend Stack:

• Framework: Next.js 16.1.1 with App Router
• Language: TypeScript for type safety
• Styling: Tailwind CSS v3 + Framer Motion v12
• UI Components: shadcn/ui + Radix UI primitives
• State Management: React hooks + Local Storage

AI Integration:

• AI SDK: Vercel AI SDK v4.3 for streaming
• AI Provider: Google Gemini 2.5 Flash via @ai-sdk/google
• Features: Real-time streaming, context awareness
• Performance: Optimized for low-latency responses

Backend Integration:

• Database: Notion API (@notionhq/client v2.3)
• FAQ System: Community-driven voting with real-time stats
• Caching: 5-minute client-side cache with optimistic updates
• Fallback: Static questions when Notion unavailable

DevOps & Performance:

• Deployment: Vercel with automatic CI/CD
• Performance: Lazy loading, efficient bundling
• Monitoring: Built-in error boundaries
• SEO: Next.js App Router with metadata

Tip

Each technology was carefully selected for developer experience, performance, and production readiness.

🔧 Template Configuration

Note

Zero Code Changes Required - Customize everything through configuration files in the config/ directory.

This template uses a centralized configuration system. All event-specific content is separated from code:

Configuration Files

File	Purpose	What to Configure
config/site.config.ts	Event information	Name, dates, venue, organizers, links
config/ai.config.ts	AI assistant	System prompt, model settings, knowledge base
config/content.config.ts	Static content	FAQ questions, testimonials, chat suggestions
config/branding.config.ts	Visual assets	Logos, developer credits, project links

Quick Configuration Example

1. Event Information (config/site.config.ts):

export const siteConfig: SiteConfig = {
  name: 'Your Event Name 2025',
  shortName: 'Event 2025',
  tagline: 'Interactive Assistant',
  dates: {
    start: '2025-08-15',
    end: '2025-08-16',
    displayFormat: 'Aug 15-16, 2025',
  },
  venue: {
    name: 'Convention Center',
    address: '123 Main Street',
    city: 'Your City',
  },
  organizers: [
    { name: 'Your Organization', logo: '/images/organizers/org.svg' },
  ],
};

2. AI Knowledge (config/ai.config.ts):

// Add event-specific knowledge for the AI
const additionalContext = `
## Event Rules
- Teams: 2-5 members
- Duration: 24 hours

## Prize Categories
- Grand Prize: $5,000
- Best Innovation: $2,000
`;

3. Branding (config/branding.config.ts):

export const brandingConfig: BrandingConfig = {
  logos: {
    main: '/images/event/logo.svg',
    full: '/images/event/logo-full.svg',
  },
  showDeveloper: false,  // Hide developer credits if desired
};

Image Directory Structure

public/images/
├── event/              # Your event logos
│   ├── logo.svg        # Header/icon logo
│   └── logo-full.svg   # Landing page logo
├── organizers/         # Organizer/sponsor logos
│   ├── org1.svg
│   └── org2.svg
└── developer/          # Optional developer branding
    └── logo.svg

Tip

For detailed configuration instructions, see docs/TEMPLATE-SETUP.md

🏗️ Architecture

graph TB
    subgraph "Configuration Layer"
        CFG[config/]
        CFG --> CFG1[site.config.ts]
        CFG --> CFG2[ai.config.ts]
        CFG --> CFG3[content.config.ts]
        CFG --> CFG4[branding.config.ts]
    end

    subgraph "Frontend Layer"
        A[Next.js App Router] --> B[React Components]
        B --> C[Tailwind Styling]
        C --> D[Framer Animations]
    end

    subgraph "AI Integration"
        E[Vercel AI SDK] --> F[Google Gemini 2.5 Flash]
        F --> G[Streaming Responses]
    end

    subgraph "Notion Backend"
        N1[Notion API Client]
        N2[(FAQ Database)]
        N3[Vote & View Tracking]
        N1 --> N2
        N1 --> N3
    end

    subgraph "API Routes"
        R1[/api/chat]
        R2[/api/faq/questions]
        R3[/api/faq/vote]
        R4[/api/faq/view]
    end

    subgraph "Data Layer"
        H[Local Storage] --> I[Chat History]
        H --> J[User Votes Cache]
        H --> K[FAQ Cache 5min]
    end

    subgraph "Deployment"
        L[Vercel Platform]
        M[Edge Functions]
    end

    CFG1 --> A
    CFG2 --> R1
    CFG3 --> B
    CFG4 --> B
    A --> E
    B --> H
    B --> R1
    B --> R2
    B --> R3
    B --> R4
    R1 --> F
    R2 --> N1
    R3 --> N1
    R4 --> N1
    L --> A
    L --> M

Loading

Component Architecture

config/                        # 🔧 CONFIGURATION (edit these!)
├── index.ts                  # Unified exports
├── types.ts                  # TypeScript interfaces
├── site.config.ts            # Event name, dates, venue
├── ai.config.ts              # AI system prompt & settings
├── content.config.ts         # FAQ, testimonials, suggestions
└── branding.config.ts        # Logos, developer credits
app/                           # Next.js App Router
├── api/
│   ├── chat/                 # AI streaming endpoint (Gemini)
│   └── faq/                  # FAQ endpoints
│       ├── questions/        # GET - Fetch FAQ with stats
│       ├── vote/             # POST - Record votes
│       └── view/             # POST - Track views
├── chat/                     # Chat page (70/30 layout)
├── testimonials/             # Testimonials page
├── globals.css               # Global styles + color theme
├── layout.tsx                # Root layout (reads config)
└── page.tsx                  # Home/landing page (reads config)
components/                   # React components
├── chat/                    # EmbeddedChat, ChatSuggestions
├── faq/                     # FAQList, FAQCard (voting UI)
├── chatbot/                 # Chatbot, ChatMessage, types
└── ui/                      # shadcn/ui base components
hooks/                       # Custom React hooks
├── use-faq-voting.ts       # FAQ voting with Notion sync
└── use-scroll-direction.ts # Header visibility
lib/                         # Utilities
├── notion-faq.ts           # Notion client & operations
├── testimonials-data.ts    # Wrapper → contentConfig
└── utils.ts                # Helper functions (cn)
docs/                        # Documentation
├── TEMPLATE-SETUP.md       # Quick start guide
├── UI-DESIGN-SYSTEM.md     # Visual design guide
└── NOTION-INTEGRATION.md   # Notion backend docs
public/images/               # Static assets
├── event/                  # Event logos
├── organizers/             # Organizer logos
└── developer/              # Developer branding (optional)

🚀 Getting Started

Prerequisites

Important

Ensure you have the following installed:

• Node.js 18.17+ (Download)
• npm/yarn/pnpm package manager
• Google Gemini API key (Get one here)

Quick Installation

1. Clone Repository

git clone https://github.com/ChanMeng666/event-qa-ai-template.git
cd event-qa-ai-template

2. Install Dependencies

# Using npm
npm install

# Using yarn
yarn install

# Using pnpm (recommended)
pnpm install

3. Environment Setup

# Copy environment template
cp .env.example .env.local

# Edit environment variables
nano .env.local

Environment Setup

Create .env.local file with the following variables:

# Required: Google Gemini API Key
GOOGLE_GENERATIVE_AI_API_KEY=your_google_gemini_api_key_here

# Required for FAQ Backend: Notion Integration
NOTION_TOKEN=your_notion_integration_token
NOTION_FAQ_DATABASE_ID=your_notion_database_id

# Optional: Application settings
NODE_ENV=development
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_secret_key_here

Tip

• Get your Google Gemini API key from Google AI Studio
• Get Notion token from Notion Integrations
• See docs/NOTION-INTEGRATION.md for database setup
• The app works without Notion (falls back to static questions)

4. Start Development

npm run dev

🎉 Success! Open http://localhost:3000 to view the application.

🛳 Deployment

Important

Choose the deployment strategy that best fits your needs. Vercel is recommended for seamless Next.js deployment.

A One-Click Deployment

Deploy to Vercel (Recommended)

B Manual Deployment

Vercel CLI:

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel --prod

Other Platforms:

Deploy with Netlify	Deploy with Railway

C Environment Variables

Warning

Never commit sensitive environment variables to version control. Use secure secret management in production.

Variable	Description	Required	Example
GOOGLE_GENERATIVE_AI_API_KEY	Google Gemini API key	✅	AIza...
NOTION_TOKEN	Notion Integration token	✅ FAQ	secret_xxx...
NOTION_FAQ_DATABASE_ID	Notion FAQ database ID	✅ FAQ	abc123-...
NEXTAUTH_SECRET	Session encryption secret	🔶	generated-secret-key
NEXTAUTH_URL	Application URL	🔶	https://your-domain.vercel.app
NODE_ENV	Environment mode	🔶	production

Note

✅ Required, ✅ FAQ = Required for FAQ voting feature, 🔶 Optional

Without Notion variables, the app uses static FAQ questions (no voting persistence).

📖 Usage Guide

Main Interface

Desktop Experience:

• AI Chat (70%): Full-screen conversational interface
• FAQ Sidebar (30%): Community-driven question voting
• Seamless Integration: Click FAQ → flows into chat instantly

Mobile Experience:

• Tab Navigation: Swipe between Chat and FAQ views
• Optimized Layout: Full-screen on smaller devices
• Gesture Support: Native mobile interactions

Desktop: AI Chat dominates with FAQ sidebar for quick access

AI Chat Features

Getting Started:

1. Choose Your Path:

   • Click suggestion cards for instant common questions
   • Type custom questions in natural language
   • Send FAQ questions for detailed follow-up

2. Advanced Features:

   • Multi-line Input: Use Shift+Enter for line breaks
   • Context Awareness: AI remembers conversation history
   • Instant Responses: Real-time streaming from Google Gemini 2.5 Flash

Example Interactions:

User: "How do I form a team?"
AI: [Streams detailed team formation guidance]

User: "What if I don't have technical skills?"
AI: [Provides specific advice for non-technical participants]

FAQ Voting System

Community-Driven Ranking (Powered by Notion):

Feature	Description	Benefit
👍 Upvote	Mark questions as helpful	Valuable content rises to top
👎 Downvote	Flag less useful content	Improves overall quality
📊 Real-time Stats	Vote counts synced to Notion	Persistent across sessions
🔍 Search	Find by keywords	Quick access to specific topics
🏷️ Filter	Browse by category	Organized content discovery
💬 Send to Chat	One-click integration	Seamless AI follow-up

Tip

Votes are stored locally for privacy and synced to Notion for persistence. The system uses optimistic updates for instant feedback.

Available Categories:

• 📅 Event Information: Dates, schedule, logistics
• 👥 Team Formation: Finding teammates, roles, composition
• ⚙️ Technical Details: AI requirements, datasets, tools
• 🏆 Awards & Judging: Criteria, prizes, evaluation process
• 🎯 Mentorship: Getting help, Discord, support channels

For Students and Mentors

Students can get help with:

• 🎯 Getting Started: First-time hackathon guidance
• 👥 Team Building: Finding the right teammates
• 💡 Idea Development: Brainstorming and validation
• ⚙️ Technical Setup: Tools, APIs, development environment

Mentors can assist with:

• 📚 Resource Sharing: Point to useful FAQ answers
• 🎓 Teaching Moments: Use chat for detailed explanations
• 🔍 Quick References: Browse FAQ for common student questions
• 💬 Office Hours: Efficient Q&A through familiar interface

Interaction Flow

flowchart TD
    A[Open Website] --> B{Choose Starting Point}
    B -->|Quick Help| C[Click FAQ Card]
    B -->|Custom Question| D[Type in Chat]
    B -->|Browse Topics| E[Explore FAQ Categories]

    C --> F[Read FAQ Answer]
    F --> G[Send to Chat for More]
    F --> V[Vote Helpful/Not]

    D --> H[AI Streaming Response]
    H --> I[Ask Follow-up Questions]

    E --> J[Search & Filter]
    J --> K[Discover Questions]

    G --> H
    I --> L[Continue Conversation]
    K --> C
    L --> M[Auto-saved to localStorage]
    V --> N[Synced to Notion DB]

Loading

Tip

Pro Tip: Start with FAQ browsing to discover common topics, then use chat for personalized follow-up questions. Your votes help improve the experience for everyone!

🔌 Customization

Note

All customization is done through configuration files - no need to modify component code!

Event Information

Edit config/site.config.ts to set your event's basic information:

export const siteConfig: SiteConfig = {
  name: 'Your Event Name',
  shortName: 'Event',
  tagline: 'Your Tagline',
  description: 'Event description for SEO',
  dates: { start: '2025-08-15', end: '2025-08-16', displayFormat: 'Aug 15-16, 2025' },
  venue: { name: 'Venue Name', address: '123 Main St', city: 'City' },
  organizers: [{ name: 'Organization', shortName: 'Org', logo: '/images/organizers/org.svg' }],
};

FAQ Questions & Testimonials

Edit config/content.config.ts to add or modify content:

const presetQuestions: PresetQuestion[] = [
  {
    id: 'unique-id',
    category: 'event-info',
    question: 'When is the event?',
    answer: 'The event takes place on...',
  },
];

const testimonials: Testimonial[] = [
  {
    id: '1',
    quote: 'Amazing experience!',
    author: 'John Doe',
    role: 'participant',
    organization: 'Company X',
  },
];

AI Assistant Behavior

Edit config/ai.config.ts to customize the AI's knowledge and personality:

// Add event-specific knowledge
const additionalContext = `
## Event Rules
- Team size: 2-5 members
- Duration: 24 hours

## Prizes
- Grand Prize: $5,000
- Best Innovation: $2,000
`;

// Or override the entire system prompt
export const aiConfig: AIConfig = {
  // ...
  customSystemPrompt: 'Your completely custom system prompt here...',
};

Color Theme

Edit app/globals.css to change the color scheme:

:root {
  --primary: 221.2 83.2% 53.3%;       /* Main brand color */
  --primary-foreground: 210 40% 98%; /* Text on primary */
  /* Modify other colors as needed */
}

Branding & Logos

Edit config/branding.config.ts to set your visual identity:

export const brandingConfig: BrandingConfig = {
  logos: {
    main: '/images/event/logo.svg',      // Header icon
    full: '/images/event/logo-full.svg', // Landing page
    favicon: '/images/event/logo.svg',
  },
  showDeveloper: false,  // Hide developer credits
};

Adding New Categories

Edit config/content.config.ts:

const categories: Record<string, string> = {
  'event-info': 'Event Info',
  'teams': 'Teams',
  'your-new-category': 'Your Category Name',  // Add new category
};

Tip

For complete configuration reference, see docs/TEMPLATE-SETUP.md

🤝 Contributing

We welcome contributions! Here's how you can help improve this project:

Development Process

1. Fork & Setup:

# Fork the repository on GitHub
git clone https://github.com/YOUR_USERNAME/event-qa-ai-template.git
cd event-qa-ai-template

# Install dependencies
pnpm install

# Create environment file
cp .env.example .env.local
# Add your API keys

2. Create Feature Branch:

git checkout -b feature/amazing-new-feature

3. Development Guidelines:

• ✅ Follow TypeScript best practices
• ✅ Add comprehensive tests for new features
• ✅ Use consistent code formatting (Prettier + ESLint)
• ✅ Include JSDoc comments for public APIs
• ✅ Follow accessibility guidelines (WCAG 2.1)

4. Submit Pull Request:

• Provide clear description of changes
• Include screenshots for UI changes
• Reference related issues
• Ensure all checks pass

Contribution Areas

Type	Description	Examples
🐛 Bug Fixes	Fix existing issues	API errors, UI glitches, performance
✨ New Features	Add functionality	New categories, UI improvements
📚 Documentation	Improve guides	README updates, code comments
🎨 Design	Visual improvements	Better animations, color schemes
⚡ Performance	Optimize speed	Bundle size, loading times

Code of Conduct

• Be respectful and inclusive
• Provide constructive feedback
• Help newcomers learn and contribute
• Focus on the project's goals

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Open Source Benefits:

• ✅ Commercial use allowed
• ✅ Modification allowed
• ✅ Distribution allowed
• ✅ Private use allowed

👥 Team

Chan Meng Creator & Lead Developer

Author Contact:

• 🌐 Website: chanmeng.live
• 💼 LinkedIn: chanmeng666
• 📧 Email: chanmeng.dev@gmail.com
• 🔗 GitHub: ChanMeng666

---

🚀 Create Your Own Event Q&A AI in Minutes 🌟
A reusable template for AI-powered event assistance

⭐ Star us on GitHub • 📖 Read the Setup Guide • 🐛 Report Issues • 💡 Request Features • 🤝 Contribute

Made with ❤️ by Chan Meng

---