> ## 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.

# ChatGPT ADK

> Build an e-commerce ChatGPT app with product browsing, cart, and Gr4vy Embed checkout.

A ChatGPT app is an [MCP](https://modelcontextprotocol.io) server that exposes **tools** (actions ChatGPT can invoke) and **resources** (widgets ChatGPT embeds as iframes). This guide walks through building an e-commerce app with widgets for browsing products, managing a cart, and checking out with Gr4vy Embed.

<Note>
  This guide is part of the [Agentic Development Kit (ADK)](/guides/payments/adk/overview). The ADK enables merchants to build AI-native storefronts within conversational platforms. This section covers building for **ChatGPT**.
</Note>

## What you'll build

<Columns cols={3}>
  <Card title="MCP server" icon="server">
    An HTTP server that declares tools (list products, show cart, start checkout) and resources (widgets) to ChatGPT.
  </Card>

  <Card title="Widgets" icon="window">
    Self-contained HTML widgets that render inside the ChatGPT conversation as iframes—catalog, cart, and checkout.
  </Card>

  <Card title="Gr4vy Embed" icon="credit-card">
    A PCI-compliant payment form loaded into the checkout widget, backed by Gr4vy orchestration and webhook verification.
  </Card>
</Columns>

## Prerequisites

* A ChatGPT **Pro**, **Business**, **Team**, or **Enterprise** subscription. Developer mode is required and is not available on free subscriptions.
* Access to a Gr4vy sandbox environment, including a merchant account, a private API key, and (optionally) a webhook secret. See [Create an API key](/guides/payments/embed/quick-start/key) if you haven't set one up yet.
* A local development runtime for your chosen implementation language.
* A tunneling tool such as [ngrok](https://ngrok.com) to expose your local server to ChatGPT during development.

## User journey

```mermaid theme={"system"}
graph LR
  A["Browse products"] --> B["Manage cart"]
  B --> C["Checkout"]
  C --> D["Confirmation"]
```

<Steps>
  <Step title="Browse">
    ChatGPT invokes `list_products` and the catalog widget appears inline.
  </Step>

  <Step title="Manage cart">
    The user edits the cart, or asks ChatGPT to open a dedicated cart widget.
  </Step>

  <Step title="Checkout">
    The widget triggers `start_checkout` with an order summary and Gr4vy Embed payment form.
  </Step>

  <Step title="Confirmation">
    The checkout widget displays a confirmation with the transaction ID and payment details.
  </Step>
</Steps>

## In this guide

<Steps>
  <Step title="Architecture">
    [Understand the architecture](/guides/payments/chatgpt-app/architecture) — how MCP, tools, widgets, and the three-part return pattern fit together.
  </Step>

  <Step title="Setup">
    [Scaffold the project](/guides/payments/chatgpt-app/setup) with dependencies and environment variables.
  </Step>

  <Step title="MCP server">
    [Build the MCP server](/guides/payments/chatgpt-app/mcp-server) — define data types, product catalog, HTTP transport, tools, and resources.
  </Step>

  <Step title="Widgets">
    [Build the widgets](/guides/payments/chatgpt-app/widgets) — implement the widget bridge and build each widget as a self-contained HTML file.
  </Step>

  <Step title="Gr4vy Embed">
    [Integrate Gr4vy Embed](/guides/payments/chatgpt-app/gr4vy-embed) — generate embed tokens server-side, render the payment form, and verify webhooks.
  </Step>

  <Step title="Deployment">
    [Deploy to ChatGPT](/guides/payments/chatgpt-app/deployment) — expose your server over HTTPS, connect to ChatGPT, and go live.
  </Step>
</Steps>

## Useful resources

* [OpenAI Apps SDK](https://openai.com/index/apps-in-chatgpt/)
* [OpenAI Apps SDK examples](https://github.com/openai/openai-apps-sdk-examples)
* [Model Context Protocol specification](https://modelcontextprotocol.io)
* [Gr4vy Embed quick start](/guides/payments/embed/quick-start/overview)
* [`@modelcontextprotocol/sdk` on npm](https://www.npmjs.com/package/@modelcontextprotocol/sdk)
* [`fastmcp` on PyPI](https://pypi.org/project/fastmcp/)
* [Reference implementation (TypeScript)](https://github.com/gr4vy/gr4vy-typescript-adk)
* [Reference implementation (Python)](https://github.com/gr4vy/gr4vy-python-adk)