FlexAPI Studio is a fullstack, production-ready platform for API testing, learning, and AI exploration. It features a beautiful Next.js frontend, multiple backend APIs (Flask and FastAPI), and a professional, accessible UI. Built for developers, students, and tech enthusiasts.
FlexAPI Studio unifies interactive API playgrounds, machine learning demos, and AI chat in one seamless, responsive web application. Instantly test classic text/number utilities, predict house prices with ML, or chat with advanced AI models—all in a single, elegant interface.
- Text & Number Utilities:
- Try 5 Flask-powered endpoints: word count, number addition, string reversal, temperature conversion, and palindrome check.
- House Price Prediction:
- Enter house features and get instant price predictions from a trained ML model (Random Forest Regressor) via FastAPI.
- AI Chatbot Playground:
- Chat with GPT-3.5 Turbo, Mistral 7B, or Claude 3 Haiku (OpenRouter). Supports markdown/code, chat history, model selection, and more.
- Modern UI:
- Responsive, accessible, and mobile-friendly. Built with Next.js 15, Tailwind CSS, shadcn/ui, lucide-react, framer-motion.
- Sidebar Navigation:
- Consistent, accessible sidebar with hamburger menu on mobile.
- Theming:
- Light/dark mode toggle, beautiful gradients, and professional design.
- Docs & About:
- Comprehensive documentation and About page with team, mission, contact, and tech stack info.
- Frontend: Next.js 15 (TypeScript), Tailwind CSS, shadcn/ui, lucide-react, framer-motion, @headlessui/react.
- Backend:
- Flask API: 5 endpoints for text/number operations, CORS enabled for frontend integration.
- FastAPI: House price prediction with ML model and Pydantic validation.
- API Flow: Next.js frontend communicates with Flask and FastAPI backends via HTTP. Chatbot uses a Next.js API route as a secure proxy to OpenRouter.ai.
- Navigation: Access all features via the sidebar (responsive, accessible).
- API Playgrounds: Each playground (Text & Number Utilities, House Price, Chatbot) provides forms and docs for easy input and instant results.
- Docs & About: Find detailed documentation and team/company info.
- Frontend: Next.js 15, TypeScript, Tailwind CSS, shadcn/ui, lucide-react, framer-motion, @headlessui/react
- Backend: FastAPI (Python), Flask (Python), scikit-learn, pandas, joblib, pydantic
- Deployment: Vercel/Netlify (frontend), Render (Flask API), custom server (FastAPI)
src/pages/index.tsx— Landing pagesrc/pages/flask-api.tsx— Text & Number Utilities playgroundsrc/pages/house-price.tsx— House Price Prediction playgroundsrc/pages/chatbot.tsx— AI Chatbot playgroundsrc/pages/about.tsx— About page (team, mission, contact)src/pages/docs.tsx— API documentationsrc/components/Sidebar.tsx— Sidebar navigationsrc/components/Layout.tsx— Shared layoutsrc/components/Header.tsx/Footer.tsx— Branding and layoutsrc/components/ApiForm.tsx,HousePriceForm.tsx,PredictionDocs.tsx, etc. — UI and formspublic/favicon.ico— Favicon (replace to customize)
cd nextjs-frontend
npm install
npm run devVisit: http://localhost:3000/
Create a .env.local file (not committed) with:
OPENROUTER_API_KEY=your-openrouter-key-here
Or use .env.example as a template.
- Deploy to Vercel or Netlify
- Set
OPENROUTER_API_KEYin your deployment environment variables (never commit your real key!)
- Founder & Lead Developer: Anas Inaam
- Email: support@myapp.com
- Phone: +91 98765 43210
- Office: 91 Springboard, 4th Floor, C2, Sector 1, Noida, Uttar Pradesh, India
- LinkedIn | GitHub
- Careers: Join our team
MIT
- Unified, elegant interface for API testing, ML demos, and AI chat
- Professional, accessible, and mobile-first design
- Open source, extensible, and easy to deploy or customize
Explore, learn, and build with FlexAPI Studio!