RecipeGem - A ChatGPT App

Overview

RecipeGem is a custom ChatGPT app for exploring recipes. It uses a JSON dataset of recipes and lets users find recipes based on cuisines. It allows the user to ask ChatGPT to compare selected recipes in terms of ingredients, affordability, and complexity.

Demo

RecipeGem-ChatGPT-App.mp4

Project Structure

• web/: Contains the frontend application built with React and TypeScript.
• server/: Contains the backend application built with Python.
• data/: Includes JSON data files used in the application.

Getting Started

Prerequisites

• Node.js and npm for the frontend.
• Python 3.x for the backend.

Setup

• Check https://developers.openai.com/apps-sdk/deploy/connect-chatgpt for instructions on testing the app in ChatGPT.

Installation

1. Clone the repository:

   git clone <repository-url>
   cd RecipeGem-ChatGPT-App

2. Install frontend dependencies:

   cd web
   npm install

3. Install backend dependencies:

   cd server
   python -m venv .venv
   source .venv/bin/activate # On Windows: .venv\Scripts\activate
   pip install -r requirements.txt

Running the Application

• Start ngrok to expose the backend server:

  ngrok http 8000

• Start the frontend application:

  cd web
  npm run build

• Start the backend server:

  cd server
  $env:MCP_ALLOWED_HOSTS="<subdomain>.ngrok-free.dev"
  $env:MCP_ALLOWED_ORIGINS="https://<subdomain>.ngrok-free.dev"
  python app.py

• Start MCP inspector to test the app:

  npx @modelcontextprotocol/inspector@latest