> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gr4vy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Set up the project

> Scaffold a ChatGPT app project with dependencies and Gr4vy configuration.

This guide covers two reference implementations that share the same [architecture](/guides/payments/chatgpt-app/architecture). Pick the language tab that matches your stack.

<Tabs>
  <Tab title="TypeScript">
    Uses Node.js 18+, Express, the MCP TypeScript SDK, React, and Vite with `vite-plugin-singlefile` to bundle each widget into a standalone HTML file.

    <Steps>
      <Step title="Initialise the project">
        Create a new Node.js project:

        ```bash theme={"system"}
        mkdir my-chatgpt-store && cd my-chatgpt-store
        npm init -y
        ```

        Edit `package.json` to set the module type and add build scripts:

        ```json package.json theme={"system"}
        {
          "name": "my-chatgpt-store",
          "version": "0.1.0",
          "type": "module",
          "scripts": {
            "dev": "tsx watch src/server/index.ts",
            "build:server": "tsc -p tsconfig.server.json",
            "build:widgets": "tsx scripts/build-widgets.ts",
            "build": "npm run build:widgets && npm run build:server",
            "start": "node dist/server/index.js",
            "tunnel": "ngrok http 3000"
          }
        }
        ```
      </Step>

      <Step title="Install dependencies">
        Install runtime dependencies:

        ```bash theme={"system"}
        npm install @modelcontextprotocol/sdk express @gr4vy/sdk zod dotenv uuid
        ```

        Install dev dependencies (TypeScript, Vite, React, Tailwind, types):

        ```bash theme={"system"}
        npm install -D typescript tsx vite react react-dom \
          @vitejs/plugin-react vite-plugin-singlefile \
          tailwindcss @tailwindcss/vite \
          @types/express @types/node @types/react @types/react-dom @types/uuid
        ```
      </Step>

      <Step title="Configure TypeScript">
        Create `tsconfig.json` at the project root:

        ```json tsconfig.json theme={"system"}
        {
          "compilerOptions": {
            "target": "ES2022",
            "module": "ESNext",
            "moduleResolution": "bundler",
            "strict": true,
            "esModuleInterop": true,
            "skipLibCheck": true,
            "forceConsistentCasingInFileNames": true,
            "resolveJsonModule": true,
            "declaration": true,
            "declarationMap": true,
            "sourceMap": true,
            "jsx": "react-jsx",
            "lib": ["ES2022", "DOM", "DOM.Iterable"]
          },
          "include": ["src/**/*"],
          "exclude": ["node_modules", "dist"]
        }
        ```

        Create `tsconfig.server.json` for server-only compilation:

        ```json tsconfig.server.json theme={"system"}
        {
          "extends": "./tsconfig.json",
          "compilerOptions": {
            "outDir": "dist/server",
            "rootDir": "src/server",
            "jsx": "react-jsx"
          },
          "include": ["src/server/**/*"],
          "exclude": ["node_modules", "dist"]
        }
        ```
      </Step>

      <Step title="Configure environment variables">
        Create a `.env` file using the values from your Gr4vy sandbox dashboard:

        ```bash .env theme={"system"}
        # Server
        PORT=3000
        NODE_ENV=development

        # Gr4vy
        GR4VY_ID=your-gr4vy-id
        GR4VY_PRIVATE_KEY_PATH=./your-private-key.pem
        GR4VY_MERCHANT_ACCOUNT_ID=your-merchant-account-id
        GR4VY_ENVIRONMENT=sandbox

        # Gr4vy webhook (for payment verification)
        GR4VY_WEBHOOK_SECRET=your-webhook-secret
        ```

        Place the Gr4vy private key `.pem` file in your project root. You can download this from your Gr4vy dashboard under **Settings → Manage Integrations → Add an API Key**.
      </Step>

      <Step title="Confirm the project structure">
        When complete, your project should look like this:

        ```text theme={"system"}
        my-chatgpt-store/
        ├── src/
        │   ├── server/
        │   │   ├── index.ts              # HTTP transport + session management
        │   │   ├── mcp.ts                # MCP tools & resources
        │   │   ├── types.ts              # Shared TypeScript interfaces
        │   │   ├── data/
        │   │   │   └── products.ts       # Your product catalog
        │   │   └── services/
        │   │       └── purchases.ts      # Gr4vy payment integration
        │   └── widgets/
        │       ├── shared/
        │       │   ├── types.ts          # Shared widget types
        │       │   └── openai-bridge.ts  # ChatGPT integration API
        │       ├── product-catalog/      # Catalog browsing widget
        │       ├── shopping-cart/        # Cart management widget
        │       └── checkout/             # Checkout + Gr4vy Embed widget
        ├── scripts/
        │   └── build-widgets.ts          # Widget build orchestrator
        ├── dist/                         # Compiled output (generated)
        ├── package.json
        ├── tsconfig.json
        ├── tsconfig.server.json
        ├── vite.config.ts
        └── .env
        ```

        With the project scaffolded, continue to [Build the MCP server](/guides/payments/chatgpt-app/mcp-server).
      </Step>
    </Steps>
  </Tab>

  <Tab title="Python">
    Uses Python 3.10+, [FastMCP](https://pypi.org/project/fastmcp/) (which bundles the MCP SDK and an HTTP server), and the [Gr4vy Python SDK](https://pypi.org/project/gr4vy/). Widgets are self-contained HTML files served from an `assets/` directory.

    <Steps>
      <Step title="Initialise the project">
        Create a new directory and set up a virtual environment:

        ```bash theme={"system"}
        mkdir my-chatgpt-store && cd my-chatgpt-store
        python -m venv .venv
        source .venv/bin/activate   # Windows: .venv\Scripts\activate
        ```
      </Step>

      <Step title="Install dependencies">
        Install runtime dependencies:

        ```bash theme={"system"}
        pip install "fastmcp>=2.0.0" "gr4vy>=2.0.0" python-dotenv
        ```
      </Step>

      <Step title="Configure environment variables">
        Create a `.env` file using the values from your Gr4vy sandbox dashboard:

        ```bash .env theme={"system"}
        # Server
        PORT=8000

        # Gr4vy
        GR4VY_ID=your-gr4vy-id
        GR4VY_PRIVATE_KEY=your-private-key-content
        GR4VY_MERCHANT_ACCOUNT_ID=your-merchant-account-id
        GR4VY_ENVIRONMENT=sandbox
        ```

        The Python example reads the PEM content directly from the `GR4VY_PRIVATE_KEY` variable. Download the key from your Gr4vy dashboard under **Settings → Manage Integrations → Add an API Key**.
      </Step>

      <Step title="Confirm the project structure">
        When complete, your project should look like this:

        ```text theme={"system"}
        my-chatgpt-store/
        ├── server.py               # MCP server: tools, resources, entry point
        ├── products.py             # Product catalog
        ├── purchases.py            # Gr4vy payment integration
        ├── assets/                 # Widget HTML files
        │   ├── product-catalog.html
        │   ├── shopping-cart.html
        │   └── checkout.html
        ├── pyproject.toml
        └── .env
        ```

        With the project scaffolded, continue to [Build the MCP server](/guides/payments/chatgpt-app/mcp-server).
      </Step>
    </Steps>
  </Tab>
</Tabs>