Skip to content

MCPJam1

I built a Cocktail ChatGPT app, bringing beautiful cocktail recipe visualizations to ChatGPT.

Code Video Cerebral Valley

Core trick

Exposes an MCP tool that fetches recipes from Convex and serves a single-file HTML UI resource for ChatGPT to render.

Tags

dev tools

Description

I built a Cocktail ChatGPT app, bringing beautiful cocktail recipe visualizations to ChatGPT. Bartenders today use ChatGPT, but the recipes are often not accurate, and slow to generate. Cocktails app brings reliable recipes to ChatGPT with a visual flare that bartenders can use behind the bar at work. We will have every bartender using Cocktail ChatGPT, disrupting the bartending industry.
matteo8p/cocktail-chat-gpt-app★ 00 forksTypeScriptCreated Feb 5, 2026 · last push Feb 5, 2026

README excerpt

# Cocktail Chat MCP App

A small MCP app that fetches cocktail data from Convex and renders it in a hosted MCP UI.

## What This Project Does

- Exposes an MCP tool: `show_cocktail_recipe`
- Looks up cocktail data from Convex (`cocktails:getCocktailBySlug`)
- Returns structured tool output for an MCP app UI
- Serves a built single-file HTML MCP resource (`text/html;profile=mcp-app`)

## Tech Stack

- TypeScript + Node.js
- [Convex](https://www.convex.dev/) for data and image URLs
- [MCP SDK](https://github.com/modelcontextprotocol/typescript-sdk)
- `@modelcontextprotocol/ext-apps` for MCP App tool/resource helpers
- Vite + `vite-plugin-singlefile` for bundling the UI

## Project Structure

- `/convex`
  - Convex schema and query functions
  - `convex/cocktails.ts` powers cocktail lookup
- `/mcp`
  - MCP server entrypoints and app UI
  - `mcp/server.ts` registers MCP tool + MCP app resource
  - `mcp/main.ts` runs server over stdio (default) or HTTP (`--http`)
  - `mcp/src/*` UI source files
  - `mcp/dist/*` built single-file app output
- `/scripts/seedConvexCocktails.js`
  - Seeds cocktails, ingredients, and image asset assignments
- `/images_2`
  - Local image files used during seed

## Prerequisites

- Node.js 18+
- npm
- Convex project initialized and reachable

## Environment

Create/update `.env.local` with at least:

```bash
CONVEX_URL=https://<your-deployment>.convex.cloud
```

Optional values used in local workflows:

```bash
CONVEX_DEPLOYMENT=dev:<name>
CONVEX_SITE_UR

Team