A responsive web application built with Next.js, developed in TypeScript and styled with TailwindCSS, integrating the OpenAI API to deliver a culinary-themed chatbot.
Upon entering the web application, the user interacts with a virtual waiter to request a specific recipe.
Then, the AI Waiter Agent proposes 3 randomly selected chefs from the available list.
Once the user selects a chef, a chat starts with that chef, after an intentionally long and frustrating wait time.
Each private chat with a chef is limited to 5 interactions (questions and answers).
However, the chefs always give confusing and humorous answers, aiming to prolong the conversation without ever actually providing the requested recipe.
After the chat ends, the AI Waiter Agent suggests another chef from the available list for the user to talk to, repeating the same cycle.
This web application is designed to balance frustration with usability, creating a funny paradox that keeps users engaged.
Agents’ prompts are designed to produce funny, unpredictable, and confusing responses.
All steps update the session (history and step) to maintain flow consistency.
This project is not meant to be a serious cooking assistant. Instead, it is a creative experiment in human–AI interaction that aims to:
- Playfully engage users in a culinary context
- Explore unconventional UX with humor and irritation
- Showcase the integration of Next.js, TailwindCSS, and OpenAI API in a real-world application
- No authentication required – instant access to the platform
- Virtual waiter persona with humorous and sarcastic tone
- Select Chefs (Modal) – multiple personalities with integrated agents
- Dynamic conversation powered by OpenAI
- Responsive UI styled with TailwindCSS
- Next.js – Full-stack React framework
- TypeScript – Static typing for JavaScript
- TailwindCSS – Utility-first CSS framework
- OpenAI API – Conversational AI model
git clone https://github.com/StefAltavista/OpenAi_project.git
cd OpenAi_projectMake sure you have Node.js (>=18) installed, then run:
npm installCreate a .env.local file in the project root and add your OpenAI API key:
OPENAI_API_KEY=your_api_key_here
npm run devThe app will be available at http://localhost:3000.
npm run build
npm startThe repository is organized as follows:
OpenAi_project/
├── .next/ # Build output (auto-generated by Next.js)
├── node_modules/ # Installed dependencies
├── public/ # Static assets (images, icons, etc.)
├── src/
│ ├── app/ # Next.js routing and pages
│ ├── components/ # Reusable UI components
│ ├── data/ # Static data or mock data
│ ├── hooks/ # Custom React hooks
│ └── lib/ # Utility functions and helpers
├── config/ # Project configurations (Next.js, Tailwind, ESLint, etc.)
└── README.md # Project documentation
This documentation describes how the application interacts with OpenAI through three agents:
- Waiter Agent → general conversational assistant, ironic and deliberately unhelpful.
- Cook Agent → guides recipe preparation with confusing responses and deliberately wrong ingredients.
- AI Assistant (JSON Creator) → technical agent that returns only structured JSON outputs, used to extract information from Cook's responses.
[User] -> [Frontend React] -> Waiter Agent / Cook Agent -> AI Assistant -> Updated session
Manages general user conversation in a ironic and deliberately unhelpful tone, updating the session state step-by-step via switchWaiterState.
| Step | Prompt / Instructions | Expected Behavior |
|---|---|---|
| WELCOME | "You are a digital Waiter in an app that provides recipes upon request. Greet and welcome the user..." | Short greeting (<20 words), ironic tone |
| ASK_RECIPE | "Answer politely to whatever the user says. Ask what recipe they want." | Invite user to choose a recipe, playful tone |
| PROPOSE_COOK | "Extrapolate the name of the recipe from this message..." | Identify recipe, propose random cooks |
| COOK_SELECTED | "Give a weird feedback about the user's choice..." | Ironic/absurd comment, handoff to Cook |
| RETURN_TO_WAITER | "Apologize to the user and offer new cooks..." | Ironic tone, new selection of cooks |
User: "I want advice for dinner."
Waiter: "Dinner? Wasn't it breakfast time? I'd eat cookies and see how it goes."
Guides the user through the recipe in a deliberately confusing and ironic way, also producing ingredient lists that are often wrong.
For creation of this agent we followed the guidelines of OpenAi documentation: Agents SDK TypeScript -> https://openai.github.io/openai-agents-js/
| Step | Prompt / Instructions | Expected Behavior |
|---|---|---|
| SALUTE | "Say Hello, make a silly comment about the recipe, ask if user has a diet" | Ironic greeting and joke about the recipe |
| ASK_ALLERGY | "Extrapolate diet info from the user message" | Store any diet information |
| RANDOM_QUESTION | "Extrapolate allergies and ask a random question" | Absurd question, playful tone |
| LIST_INGREDIENTS | "Now give a wrong recipe with random scales, maybe wrong allergens" | Deliberately wrong ingredients, confusing |
| END | "Say goodbye and handoff to the waiter" | Ends session with ironic tone |
| RETURN_TO_WAITER | "The cook session has ended. Returning to the waiter..." | Session ended, handoff to Waiter |
/lib/switchCookState.ts
import { run } from "@openai/agents"; // call function run from openai libraries
import { ai_assistant } from "./ai_assistant";
type CookState =
| "SALUTE"
| "ASK_ALLERGY"
| "ASK_DIET"
| "RANDOM_QUESTION"
| "LIST_INGREDIENTS"
| "END"
| "RETURN_TO_WAITER";
export interface CookSession {
id: string;
cookID: string;
recipe: string;
step: CookState;
history: { role: string; content: string }[];
allergies?: string[];
diet?: string[];
ingredients?: string[];
}
// Function to switch the state of the cook session based on the current step
export default async function switchCookState(
session: CookSession
): Promise<CookSession> {
const bot = ai_assistant();
let response;
switch (session.step) {
// Initial greeting and asking about diet
case "SALUTE":
session.history.push({
role: "cook",
content: `Say Hello to our guest, make a silly comment about the recipe and ask if the user is on a specific diet`,
});
session.step = "ASK_ALLERGY";
return session;
...User: "How do I make carbonara?"
Cook: "First throw chocolate into the spaghetti… oh and add a pinch of sugared pepper!"
Technical agent that returns only JSON.
Mainly used by the Cook Agent to extract structured data (ingredients, messages).
Input:
Extrapolate ingredients in JSON from: "Great! For a carbonara you need spaghetti, guanciale, eggs, and pecorino."Output:
{
"message": "Great! For a carbonara you need...",
"ingredients": ["spaghetti", "guanciale", "eggs", "pecorino"]
}This project can be easily deployed to Vercel, the official platform for Next.js apps.
Ensure your repository is available on GitHub.
- Go to Vercel Dashboard
- Click New Project → Import Git Repository
- Select your GitHub repository
In the Vercel dashboard, go to Settings → Environment Variables and add:
OPENAI_API_KEY=your_api_key_here
Click Deploy and wait for the process to complete.
Once deployed, your app will be available at:
https://your-project-name.vercel.app