StudyAI: AI-Powered Study Tools Generator
Build Skills for the AI-Augmented Future
Why This Matters Now
Gen AI is not just replacing routine tasks—but creating demand for new skills . This project trains you in exactly what the future needs :
- A) AI-Augmented Workflow Design – Go beyond prompting: learn how to structure smart, adaptive systems.
- B) Critical Evaluation of LLM Outputs – Assess accuracy, bias, and cost across AI models.
- C) Rapid Prototyping with Multi-API Systems – Build nimble, user-focused tools using OpenAI, Anthropic, or Cohere.
The Challenge
Build a prototype that converts textbooks/notes into AI-powered study tools (flashcards, quizzes, summaries).
Focus Areas:
Learning over Overengineering – MVPs over polished deployment.
Benchmarking LLMs – Compare APIs across subject types.
User-Centric Design – How would a student actually use this?
Logistics
- Teams: 3–5 members (final teams formed via AIVIA™ Evaluations)
- Timeline: July 7–25 (free mentorship provided in this window)
- Deliverables: A working prototype + 5-minute demo presentation
- Awards: August 4-8
Judging Criteria
Skill Mastery: Demonstrated strength in the 3 core learning goals (A/B/C above)- Practical Utility: Would learners actually want to use this?
- Creativity: Did you explore an angle others overlooked?
Final judging rubric and prize tiers will be shared by May end.
Mockup by Claude—full artifact here. React code available below.
import React, { useState } from 'react';
import { Book, Upload, FileText, Image, RefreshCw, BrainCircuit, FlaskConical, Edit, PlusCircle, CheckSquare, Download, Share2, Zap, BarChart2, PieChart } from 'lucide-react';
const StudyAIMockup = () => {
const [activeTab, setActiveTab] = useState('input');
const [selectedInputType, setSelectedInputType] = useState('text');
const [selectedAI, setSelectedAI] = useState('openai');
const [selectedTool, setSelectedTool] = useState('all');
const [sampleText, setSampleText] = useState('Photosynthesis is the process by which green plants and some other organisms use sunlight to synthesize foods with the help of chlorophyll. Plants capture light energy using chlorophyll in their leaves. The energy is used to convert carbon dioxide and water into glucose. Oxygen is released as a by-product.');
const [isLoading, setIsLoading] = useState(false);
const [showComparison, setShowComparison] = useState(false);
const [showResults, setShowResults] = useState(false);
const handleGenerate = () => {
setIsLoading(true);
// Simulate API call
setTimeout(() => {
setIsLoading(false);
setShowResults(true);
setActiveTab('results');
}, 2000);
};
const handleCompare = () => {
setShowComparison(true);
setActiveTab('compare');
};
return (
<div className="flex flex-col h-screen bg-gray-50">
{/* Header */}
<header className="bg-indigo-600 text-white p-4 shadow-md">
<div className="max-w-7xl mx-auto flex justify-between items-center">
<div className="flex items-center space-x-3">
<BrainCircuit size={32} />
<div>
<h1 className="text-2xl font-bold">StudyAI</h1>
<p className="text-xs opacity-80">Transform static learning into dynamic study tools</p>
</div>
</div>
<div className="flex space-x-4">
<button className="px-3 py-1.5 rounded-md text-sm bg-white text-indigo-600 hover:bg-indigo-50 font-medium">Sign In</button>
<button className="px-3 py-1.5 rounded-md text-sm bg-indigo-800 hover:bg-indigo-700 font-medium">Sign Up</button>
</div>
</div>
</header>
{/* Main Navigation */}
<nav className="bg-white border-b border-gray-200">
<div className="max-w-7xl mx-auto">
<div className="flex justify-between">
<div className="flex">
<button
onClick={() => setActiveTab('input')}
className={`px-4 py-3 text-sm font-medium border-b-2 ${activeTab === 'input' ? 'border-indigo-600 text-indigo-600' : 'border-transparent hover:border-gray-300'}`}
>
Input Material
</button>
<button
onClick={() => setActiveTab('results')}
className={`px-4 py-3 text-sm font-medium border-b-2 ${activeTab === 'results' ? 'border-indigo-600 text-indigo-600' : 'border-transparent hover:border-gray-300'}`}
>
Study Tools
</button>
<button
onClick={() => setActiveTab('compare')}
className={`px-4 py-3 text-sm font-medium border-b-2 ${activeTab === 'compare' ? 'border-indigo-600 text-indigo-600' : 'border-transparent hover:border-gray-300'}`}
>
AI Comparison
</button>
<button
onClick={() => setActiveTab('history')}
className={`px-4 py-3 text-sm font-medium border-b-2 ${activeTab === 'history' ? 'border-indigo-600 text-indigo-600' : 'border-transparent hover:border-gray-300'}`}
>
My Library
</button>
</div>
</div>
</div>
</nav>
{/* Main Content */}
<main className="flex-1 overflow-auto p-4">
<div className="max-w-7xl mx-auto">
{/* Input Tab */}
{activeTab === 'input' && (
<div className="grid grid-cols-12 gap-6">
{/* Left Sidebar */}
<div className="col-span-3 bg-white rounded-lg shadow p-4">
<h2 className="text-lg font-semibold mb-4">Input Options</h2>
<div className="space-y-3 mb-6">
<button
onClick={() => setSelectedInputType('text')}
className={`flex items-center w-full p-2 rounded-md text-left ${selectedInputType === 'text' ? 'bg-indigo-50 text-indigo-600' : 'hover:bg-gray-50'}`}
>
<Edit className="mr-2" size={18} />
<span>Text Input</span>
</button>
<button
onClick={() => setSelectedInputType('document')}
className={`flex items-center w-full p-2 rounded-md text-left ${selectedInputType === 'document' ? 'bg-indigo-50 text-indigo-600' : 'hover:bg-gray-50'}`}
>
<FileText className="mr-2" size={18} />
<span>Document Upload</span>
</button>
<button
onClick={() => setSelectedInputType('image')}
className={`flex items-center w-full p-2 rounded-md text-left ${selectedInputType === 'image' ? 'bg-indigo-50 text-indigo-600' : 'hover:bg-gray-50'}`}
>
<Image className="mr-2" size={18} />
<span>Image Upload</span>
</button>
<button
onClick={() => setSelectedInputType('sample')}
className={`flex items-center w-full p-2 rounded-md text-left ${selectedInputType === 'sample' ? 'bg-indigo-50 text-indigo-600' : 'hover:bg-gray-50'}`}
>
<Book className="mr-2" size={18} />
<span>Sample Materials</span>
</button>
</div>
<h2 className="text-lg font-semibold mb-4">AI Provider</h2>
<div className="space-y-3 mb-6">
<button
onClick={() => setSelectedAI('openai')}
className={`flex items-center w-full p-2 rounded-md text-left ${selectedAI === 'openai' ? 'bg-green-50 text-green-600' : 'hover:bg-gray-50'}`}
>
<div className="w-5 h-5 rounded-full bg-gradient-to-r from-green-400 to-blue-500 mr-2"></div>
<span>OpenAI GPT-4</span>
</button>
<button
onClick={() => setSelectedAI('anthropic')}
className={`flex items-center w-full p-2 rounded-md text-left ${selectedAI === 'anthropic' ? 'bg-purple-50 text-purple-600' : 'hover:bg-gray-50'}`}
>
<div className="w-5 h-5 rounded-full bg-gradient-to-r from-purple-400 to-pink-500 mr-2"></div>
<span>Anthropic Claude</span>
</button>
<button
onClick={() => setSelectedAI('cohere')}
className={`flex items-center w-full p-2 rounded-md text-left ${selectedAI === 'cohere' ? 'bg-blue-50 text-blue-600' : 'hover:bg-gray-50'}`}
>
<div className="w-5 h-5 rounded-full bg-gradient-to-r from-blue-400 to-cyan-500 mr-2"></div>
<span>Cohere Command</span>
</button>
<button
onClick={() => setSelectedAI('all')}
className={`flex items-center w-full p-2 rounded-md text-left ${selectedAI === 'all' ? 'bg-orange-50 text-orange-600' : 'hover:bg-gray-50'}`}
>
<RefreshCw className="mr-2" size={18} />
<span>Compare All</span>
</button>
</div>
<h2 className="text-lg font-semibold mb-4">Study Tools</h2>
<div className="space-y-3">
<button
onClick={() => setSelectedTool('summary')}
className={`flex items-center w-full p-2 rounded-md text-left ${selectedTool === 'summary' ? 'bg-indigo-50 text-indigo-600' : 'hover:bg-gray-50'}`}
>
<FileText className="mr-2" size={18} />
<span>Summary</span>
</button>
<button
onClick={() => setSelectedTool('flashcards')}
className={`flex items-center w-full p-2 rounded-md text-left ${selectedTool === 'flashcards' ? 'bg-indigo-50 text-indigo-600' : 'hover:bg-gray-50'}`}
>
<PlusCircle className="mr-2" size={18} />
<span>Flashcards</span>
</button>
<button
onClick={() => setSelectedTool('quiz')}
className={`flex items-center w-full p-2 rounded-md text-left ${selectedTool === 'quiz' ? 'bg-indigo-50 text-indigo-600' : 'hover:bg-gray-50'}`}
>
<CheckSquare className="mr-2" size={18} />
<span>Quiz</span>
</button>
<button
onClick={() => setSelectedTool('all')}
className={`flex items-center w-full p-2 rounded-md text-left ${selectedTool === 'all' ? 'bg-indigo-50 text-indigo-600' : 'hover:bg-gray-50'}`}
>
<Zap className="mr-2" size={18} />
<span>Generate All</span>
</button>
</div>
</div>
{/* Main Content */}
<div className="col-span-9">
<div className="bg-white rounded-lg shadow p-6">
<h2 className="text-xl font-bold mb-4">
{selectedInputType === 'text' && 'Text Input'}
{selectedInputType === 'document' && 'Document Upload'}
{selectedInputType === 'image' && 'Image Upload'}
{selectedInputType === 'sample' && 'Sample Materials'}
</h2>
{selectedInputType === 'text' && (
<div>
<textarea
value={sampleText}
onChange={(e) => setSampleText(e.target.value)}
className="w-full h-64 p-3 border border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
placeholder="Paste your learning material here..."
/>
</div>
)}
{selectedInputType === 'document' && (
<div className="border-2 border-dashed border-gray-300 rounded-lg p-12 text-center">
<Upload className="mx-auto text-gray-400 mb-4" size={48} />
<h3 className="text-lg font-medium text-gray-900 mb-1">Upload Document</h3>
<p className="text-sm text-gray-500 mb-4">PDF, DOCX, or TXT files</p>
<button className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 font-medium">
Select File
</button>
</div>
)}
{selectedInputType === 'image' && (
<div className="border-2 border-dashed border-gray-300 rounded-lg p-12 text-center">
<Image className="mx-auto text-gray-400 mb-4" size={48} />
<h3 className="text-lg font-medium text-gray-900 mb-1">Upload Image</h3>
<p className="text-sm text-gray-500 mb-4">JPG, PNG, or GIF files</p>
<button className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 font-medium">
Select Image
</button>
</div>
)}
{selectedInputType === 'sample' && (
<div>
<div className="grid grid-cols-3 gap-4 mb-4">
<button className="p-4 border border-gray-200 rounded-lg hover:border-indigo-500 hover:bg-indigo-50 text-left">
<h3 className="font-medium">Biology</h3>
<p className="text-sm text-gray-500">Photosynthesis process</p>
</button>
<button className="p-4 border border-gray-200 rounded-lg hover:border-indigo-500 hover:bg-indigo-50 text-left">
<h3 className="font-medium">History</h3>
<p className="text-sm text-gray-500">Industrial Revolution</p>
</button>
<button className="p-4 border border-gray-200 rounded-lg hover:border-indigo-500 hover:bg-indigo-50 text-left">
<h3 className="font-medium">Computer Science</h3>
<p className="text-sm text-gray-500">Machine Learning basics</p>
</button>
</div>
<div className="p-4 bg-gray-50 rounded-lg">
<h3 className="font-medium mb-2">Selected Sample:</h3>
<p className="text-sm">{sampleText}</p>
</div>
</div>
)}
<div className="mt-6 flex justify-between items-center">
<div>
<p className="text-sm text-gray-500">
Using {selectedAI === 'openai' ? 'OpenAI GPT-4' : selectedAI === 'anthropic' ? 'Anthropic Claude' : selectedAI === 'cohere' ? 'Cohere Command' : 'Multiple AI Models'}
to generate {selectedTool === 'all' ? 'all study tools' : selectedTool}
</p>
</div>
<div className="flex space-x-3">
<button
onClick={handleCompare}
className="px-4 py-2 border border-indigo-600 text-indigo-600 rounded-md hover:bg-indigo-50 font-medium"
>
Compare AI Models
</button>
<button
onClick={handleGenerate}
disabled={isLoading}
className={`px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 font-medium flex items-center ${isLoading ? 'opacity-70 cursor-not-allowed' : ''}`}
>
{isLoading ? (
<>
<RefreshCw className="animate-spin mr-2" size={18} />
Generating...
</>
) : (
<>
Generate Study Materials
</>
)}
</button>
</div>
</div>
</div>
</div>
</div>
)}
{/* Results Tab */}
{activeTab === 'results' && showResults && (
<div className="grid grid-cols-12 gap-6">
{/* Sidebar */}
<div className="col-span-3">
<div className="bg-white rounded-lg shadow p-4 mb-6">
<h2 className="text-lg font-semibold mb-4">Generated Tools</h2>
<div className="space-y-2">
<button className="flex items-center w-full p-2 rounded-md text-left bg-indigo-50 text-indigo-600">
<FileText className="mr-2" size={18} />
<span>Summary</span>
</button>
<button className="flex items-center w-full p-2 rounded-md text-left hover:bg-gray-50">
<PlusCircle className="mr-2" size={18} />
<span>Flashcards (5)</span>
</button>
<button className="flex items-center w-full p-2 rounded-md text-left hover:bg-gray-50">
<CheckSquare className="mr-2" size={18} />
<span>Quiz (3 questions)</span>
</button>
</div>
</div>
<div className="bg-white rounded-lg shadow p-4">
<h2 className="text-lg font-semibold mb-4">Export Options</h2>
<div className="space-y-2">
<button className="flex items-center w-full p-2 rounded-md text-left hover:bg-gray-50">
<Download className="mr-2" size={18} />
<span>Export as PDF</span>
</button>
<button className="flex items-center w-full p-2 rounded-md text-left hover:bg-gray-50">
<Share2 className="mr-2" size={18} />
<span>Share with Class</span>
</button>
<button className="flex items-center w-full p-2 rounded-md text-left hover:bg-gray-50">
<Book className="mr-2" size={18} />
<span>Save to Library</span>
</button>
</div>
</div>
</div>
{/* Main Content */}
<div className="col-span-9">
<div className="bg-white rounded-lg shadow">
<div className="border-b border-gray-200">
<nav className="flex px-6">
<button className="px-4 py-3 text-sm font-medium border-b-2 border-indigo-600 text-indigo-600">
Summary
</button>
<button className="px-4 py-3 text-sm font-medium border-b-2 border-transparent hover:border-gray-300">
Flashcards
</button>
<button className="px-4 py-3 text-sm font-medium border-b-2 border-transparent hover:border-gray-300">
Quiz
</button>
</nav>
</div>
<div className="p-6">
<div className="bg-indigo-50 p-4 rounded-lg mb-6 flex items-start">
<div className="w-6 h-6 rounded-full bg-gradient-to-r from-green-400 to-blue-500 mr-3 mt-1 flex-shrink-0"></div>
<div>
<h3 className="font-medium text-indigo-800 mb-1">OpenAI GPT-4 Summary:</h3>
<p>
Photosynthesis is the process where green plants use sunlight, carbon dioxide, and water to create glucose (food) and oxygen. This happens in plant leaves using chlorophyll to capture sunlight energy. The process is essential for life on Earth as it produces the oxygen we breathe and is the foundation of most food chains. The chemical equation is: 6CO2 + 6H2O + light energy → C6H12O6 + 6O2.
</p>
</div>
</div>
<div className="mb-6">
<h3 className="font-medium mb-2">Key Concepts Identified:</h3>
<div className="flex flex-wrap gap-2">
<span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Chlorophyll</span>
<span className="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Glucose production</span>
<span className="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">Light energy</span>
<span className="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">Oxygen release</span>
<span className="px-3 py-1 bg-pink-100 text-pink-800 rounded-full text-sm">Carbon dioxide</span>
</div>
</div>
<div className="mb-6">
<div className="flex justify-between items-center mb-2">
<h3 className="font-medium">Reading Level Analysis:</h3>
<span className="text-sm text-gray-500">College Freshman</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2.5">
<div className="bg-indigo-600 h-2.5 rounded-full w-3/4"></div>
</div>
</div>
<div>
<h3 className="font-medium mb-2">Additional Resources:</h3>
<div className="grid grid-cols-2 gap-4">
<div className="border border-gray-200 rounded-lg p-3 hover:border-indigo-300 cursor-pointer">
<h4 className="font-medium">Related Topic: Light-dependent reactions</h4>
<p className="text-sm text-gray-500">Generate study materials about this topic</p>
</div>
<div className="border border-gray-200 rounded-lg p-3 hover:border-indigo-300 cursor-pointer">
<h4 className="font-medium">Related Topic: Calvin cycle</h4>
<p className="text-sm text-gray-500">Generate study materials about this topic</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)}
{/* Compare Tab */}
{activeTab === 'compare' && showComparison && (
<div>
<div className="bg-white rounded-lg shadow mb-6">
<div className="p-6">
<h2 className="text-xl font-bold mb-4">AI Model Comparison</h2>
<p className="text-gray-600 mb-6">
Compare the performance of different AI models for generating educational content.
The metrics shown are based on comprehensive testing across various content types and study tool formats.
</p>
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Model
</th>
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Accuracy
</th>
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Content Quality
</th>
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Response Time
</th>
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Cost
</th>
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Overall Score
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
<tr className="bg-green-50">
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
<div className="w-5 h-5 rounded-full bg-gradient-to-r from-green-400 to-blue-500 mr-2"></div>
<span className="font-medium">OpenAI GPT-4</span>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
94.2%
</td>
<td className="px-6 py-4 whitespace-nowrap">
9.1/10
</td>
<td className="px-6 py-4 whitespace-nowrap">
1.2s
</td>
<td className="px-6 py-4 whitespace-nowrap">
$0.010/1K tokens
</td>
<td className="px-6 py-4 whitespace-nowrap font-medium text-green-600">
8.9/10
</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
<div className="w-5 h-5 rounded-full bg-gradient-to-r from-purple-400 to-pink-500 mr-2"></div>
<span className="font-medium">Anthropic Claude</span>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
93.8%
</td>
<td className="px-6 py-4 whitespace-nowrap">
9.3/10
</td>
<td className="px-6 py-4 whitespace-nowrap">
1.5s
</td>
<td className="px-6 py-4 whitespace-nowrap">
$0.015/1K tokens
</td>
<td className="px-6 py-4 whitespace-nowrap font-medium">
8.7/10
</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
<div className="w-5 h-5 rounded-full bg-gradient-to-r from-blue-400 to-cyan-500 mr-2"></div>
<span className="font-medium">Cohere Command</span>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
88.5%
</td>
<td className="px-6 py-4 whitespace-nowrap">
8.2/10
</td>
<td className="px-6 py-4 whitespace-nowrap">
0.8s
</td>
<td className="px-6 py-4 whitespace-nowrap">
$0.005/1K tokens
</td>
<td className="px-6 py-4 whitespace-nowrap font-medium">
7.9/10
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className="grid grid-cols-2 gap-6 mb-6">
<div className="bg-white rounded-lg shadow p-6">
<h3 className="text-lg font-semibold mb-4">Performance by Metric</h3>
<div className="h-64 flex items-center justify-center">
<BarChart2 size={200} className="text-gray-300" />
</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<h3 className="text-lg font-semibold mb-4">Performance by Content Type</h3>
<div className="h-64 flex items-center justify-center">
<PieChart size={200} className="text-gray-300" />
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<h3 className="text-lg font-semibold mb-4">Model Recommendations by Study Tool Type</h3>
<div className="grid grid-cols-3 gap-4">
<div className="border border-gray-200 rounded-lg p-4 hover:bg-indigo-50">
<h4 className="font-medium flex items-center">
<FileText className="mr-2" size={16} />
Summarization
</h4>
<p className="text-sm text-gray-500 mt-1 mb-2">Best Model:</p>
<div className="flex items-center">
<div className="w-4 h-4 rounded-full bg-gradient-to-r from-purple-400 to-pink-500 mr-2"></div>
<span className="font-medium">Anthropic Claude</span>
</div>
<p className="text-xs text-gray-500 mt-2">
Excels at capturing the essence of complex educational content while maintaining nuance and context.
</p>
</div>
<div className="border border-gray-200 rounded-lg p-4 hover:bg-indigo-50">
<h4 className="font-medium flex items-center">
<PlusCircle className="mr-2" size={16} />
Flashcards
</h4>
<p className="text-sm text-gray-500 mt-1 mb-2">Best Model:</p>
<div className="flex items-center">
<div className="w-4 h-4 rounded-full bg-gradient-to-r from-green-400 to-blue-500 mr-2"></div>
<span className="font-medium">OpenAI GPT-4</span>
</div>
<p className="text-xs text-gray-500 mt-2">
Creates precisely formatted question-answer pairs with excellent factual accuracy.
</p>
</div>
<div className="border border-gray-200 rounded-lg p-4 hover:bg-indigo-50">
<h4 className="font-medium flex items-center">
<CheckSquare className="mr-2" size={16} />
Quizzes
</h4>
<p className="text-sm text-gray-500 mt-1 mb-2">Best Model:</p>
<div className="flex items-center">
<div className="w-4 h-4 rounded-full bg-gradient-to-r from-green-400 to-blue-500 mr-2"></div>
<span className="font-medium">OpenAI GPT-4</span>
</div>
<p className="text-xs text-gray-500 mt-2">
Generates challenging questions with subtle distractors that effectively test understanding.
</p>
</div>
</div>
</div>
</div>
)}
</div>
</main>
{/* Footer */}
<footer className="bg-white border-t border-gray-200 py-4">
<div className="max-w-7xl mx-auto px-4 text-center text-sm text-gray-500">
<p>© 2025 StudyAI - Transform your learning experience with AI</p>
<p className="mt-1">This is a demonstration mockup for a hackathon project</p>
</div>
</footer>
</div>
);
};
export default StudyAIMockup;