DEV Community: Zach Park

Build Your First Apps in ChatGPT | A step-by-step guide building with the Apps SDK

Zach Park — Wed, 05 Nov 2025 08:31:47 +0000

Introduction

As AI becomes a core part of everyday workflows, ChatGPT has become second nature for billions of people. But until now, ChatGPT was mostly about conversation, not interaction.

What if you could chat with apps directly inside ChatGPT, from booking hotels to designing slides, all in one place?

That's exactly what Apps in ChatGPT bring to the table. Powered by the new Apps SDK, developers can now build interactive, context-aware apps that live inside ChatGPT.

In this guide, you'll learn how to build your own ChatGPT app with using FastApps framework. We'll walk through each part of the code and I'll explain how it works.

By the end, you'll have a running ChatGPT app that can dynamically show widgets directly in your ChatGPT environment.

Step 0. How does apps in ChatGPT work?

A ChatGPT app is basically a mcp server that serves widgets.

How ChatGPT Apps Work

As you can see from the picture above, it all starts by ChatGPT triggering our app based on the user’s message. The user’s message is sent to our app.

Our app then chooses a mcp tool that best matches the user’s message. For example when the user asks “I want to buy clothes”, our app will choose a mcp tool like “ShowClothes”.

Then, the tool returns widgets and data. A widget is the component that’s shown at ChatGPT, and the data is the response that ChatGPT could use.

Step 1. Install FastApps

Now as you know how ChatGPT apps work, we will dive into building it. We will be using FastApps, which is the open-source framework for building ChatGPT apps.

First, install FastApps with uv:

uv tool install fastapps
uv tool install --upgrade fastapps # Update to the latest version

Step 2. Initialize a New App

Once installed, you can quickly start by running:

fastapps init my-app
cd my-app
fastapps dev

That’s it. You’ll see an image with a public URL automatically generated via Cloudflare Tunnel.

Your MCP server will be available at the /mcp endpoint.

Example:

https://your-public-url.trycloudflare.com/mcp

Step 3. Test Your App

Option A: Test with MCPJam Inspector

Use the MCPJam Inspector to connect and test your server:

npx @mcpjam/inspector@latest

Then, enter your public URL + /mcp.

Option B: Test in ChatGPT

In ChatGPT,

Go to Settings → Connectors
Add your 'public URL + /mcp'
Select 'No authentication'

Step 4. Create More Widgets

You can add new widgets anytime:

fastapps create additional-widget

Step 5. Edit Your Widget

You only need to modify two folders:

1️⃣ `server/tools/` — MCP tool

Define your app logic and interaction schema.

Example:

# server/tools/my_widget_tool.py
from fastapps import BaseWidget, Field, ConfigDict
from pydantic import BaseModel
from typing import Dict, Any

class MyWidgetInput(BaseModel):
    model_config = ConfigDict(populate_by_name=True)
    name: str = Field(default="World")

class MyWidgetTool(BaseWidget):
    identifier = "my-widget"
    title = "My Widget"
    input_schema = MyWidgetInput
    invoking = "Processing..."
    invoked = "Done!"

    widget_csp = {
        "connect_domains": [],
        "resource_domains": []
    }

    async def execute(self, input_data: MyWidgetInput) -> Dict[str, Any]:
        return {
            "name": input_data.name,
            "message": f"Hello, {input_data.name}!"
        }

Each MCP tools contain various attributes that identifies the property of the tool. Looking at the graph below, you could figure out what each attributes mean.

For a more detailed explanation, you could check out the Fastapps docs

Required Class Attributes

Attribute	Type	Description	Example
identifier	str	Unique widget identifier. Must match the widget folder name in widgets/. Used as the resource URI identifier	"greeting" for widgets/greeting/
title	str	Human-readable tool name displayed in ChatGPT interface. Shown when the model considers calling this tool	"Show Greeting Widget"
input_schema	Type[BaseModel]	Pydantic model defining the tool’s input parameters. ChatGPT uses this JSON schema to understand when and how to call your tool	GreetingInput
invoking	str	Short, localized status message shown to users while the tool is being executed. Maps to openai/toolInvocation/invoking	"Preparing your greeting…"
invoked	str	Short, localized status message shown to users after the tool completes. Maps to openai/toolInvocation/invoked	"Greeting ready!"

Optional Class Attributes

Attribute	Type	Description	Example
description	str	Optional tool description. Helps the model understand when to use this tool	"Display a personalized greeting widget"
widget_accessible	bool	Whether the widget can initiate tool calls from its React component	True for interactive widgets

2️⃣ `widgets/` — Frontend UI (React)

This folder contains UI components shown in ChatGPT.

Example:

// widgets/my-widget/index.jsx
import React from 'react';
import { useWidgetProps } from 'fastapps';

export default function MyWidget() {
  const props = useWidgetProps();

  return (
    <div style={{
      padding: '40px',
      textAlign: 'center',
      background: '#4A90E2',
      color: 'white',
      borderRadius: '12px'
    }}>
      <h1>{props.message}</h1>
      <p>Welcome, {props.name}!</p>
    </div>
  );
}

Widgets are React components with additional hooks that interact with ChatGPT.

For a more detailed explanation, you could check out the FastApps docs.

Step 6. Deploy your ChatGPT app for public use

You can directly deploy your ChatGPT app from your CLI:

fastapps cloud deploy

Follow step-by-step instructions from the CLI.

Conclusion

Working with FastApps turned out to be much easier than I expected. Spinning up an MCP server, adding tools, and seeing widgets appear inside ChatGPT felt surprisingly quick and smooth. With just a bit of Python and a simple React UI, you can have a real, interactive app running in minutes.

If you’ve been curious about building for ChatGPT, this the fastest way to start. I hope this walkthrough helps you try it yourself. It's lightweight, fun, and genuinely useful.

Create Your First ChatGPT App

Zach Park — Tue, 04 Nov 2025 07:41:30 +0000

Introduction

ChatGPT has become second nature for billions of people. But historically, it has mainly focused on conversation, not interaction.

What if you could chat with apps directly inside ChatGPT such as booking hotels, designing slides, and more without ever leaving the conversation?

That’s now possible with ChatGPT Apps.

In this tutorial, you’ll learn how to build your first ChatGPT app using FastApps.
We’ll walk through setup → development → deployment.
By the end, you’ll have an app that shows widgets directly inside ChatGPT.

How Do ChatGPT Apps Work?

A ChatGPT app is essentially an MCP server that serves widgets.

[High-level flow]

ChatGPT triggers your app based on user input.
The user message is forwarded to your app.
The app selects an MCP tool based on context.

Example: When a user asks, “I want to buy clothes,” your app may call a tool like ShowClothes.

The tool returns:

Widgets → UI components displayed in ChatGPT
Data → used in the response logic

This lets you create rich interfaces + logic without leaving the conversation.

Step 1: Install FastApps

Install FastApps with uv:

uv tool install fastapps uv tool install --upgrade fastapps

Step 2: Initialize a New App

fastapps init my-app cd my-app fastapps dev

You’ll get a public URL via Cloudflare Tunnel.
Your MCP server lives at:

https://your-public-url.trycloudflare.com/mcp

Step 3: Test Your App

✅ Option A — MCPJam Inspector
npx @mcpjam/inspector@latest

Then enter:

/mcp

✅ Option B — Inside ChatGPT

Go to Settings → Connectors
Add your public MCP endpoint
Select No authentication

Step 4: Create More Widgets

Add new widgets anytime:

fastapps create additional-widget

Step 5: Edit Your Widget

You’ll mainly work inside two folders:

server/tools/
widgets/

1) MCP Tool — server/tools/

Defines backend logic + input schema.

# server/tools/my_widget_tool.py
from fastapps import BaseWidget, Field, ConfigDict
from pydantic import BaseModel
from typing import Dict, Any

class MyWidgetInput(BaseModel):
    model_config = ConfigDict(populate_by_name=True)
    name: str = Field(default="World")

class MyWidgetTool(BaseWidget):
    identifier = "my-widget"
    title = "My Widget"
    input_schema = MyWidgetInput
    invoking = "Processing..."
    invoked = "Done!"

    widget_csp = {
        "connect_domains": [],
        "resource_domains": []
    }

    async def execute(self, input_data: MyWidgetInput) -> Dict[str, Any]:
        return {
            "name": input_data.name,
            "message": f"Hello, {input_data.name}!"
        }

2) Widget UI — widgets/

React UI displayed inside ChatGPT.

// widgets/my-widget/index.jsx
import React from 'react';
import { useWidgetProps } from 'fastapps';

export default function MyWidget() {
  const props = useWidgetProps();

  return (
    <div style={{
      padding: '40px',
      textAlign: 'center',
      background: '#4A90E2',
      color: 'white',
      borderRadius: '12px'
    }}>
      <h1>{props.message}</h1>
      <p>Welcome, {props.name}!</p>
    </div>
  );
}

Widgets support:

React + hooks
Tool interaction
Rich chat-native UI

Step 6: Deploy Your App

Deploy via CLI:

fastapps cloud deploy

Here’s a detailed guide on how to build ChatGPT apps.

How ChatGPT Apps Really Work: Inside the OpenAI Apps SDK

Zach Park — Fri, 24 Oct 2025 02:12:00 +0000

What Are ChatGPT Apps?

The OpenAI Apps SDK lets developers build interactive experiences that live directly inside ChatGPT.
Instead of opening a separate site, your app appears inline, as part of the chat itself.

Each app is essentially a mini web app running in a sandboxed iframe. Its frontend communicates with ChatGPT through the window.openai bridge, syncing data with your backend MCP server and the model’s reasoning in real time.

MCP and Widgets

Every ChatGPT app has two main parts:

MCP server: hosts your tools and handles logic
Widgets: the visual layer rendered inside ChatGPT

The Model Context Protocol (MCP) connects models to external data and tools, ensuring the UI, server, and model stay in sync.
Widgets are fetched from the MCP server and displayed inline — charts, tables, forms, anything interactive — all while staying inside the chat interface.

Because MCP supports streaming and SSE, Apps SDK experiences feel fast, real-time, and deeply conversational.

High-Level Workflow

Here’s the flow when a user says something like:

“Show my recently played songs on Spotify.”

Model triggers a tool → ChatGPT calls your MCP server (e.g., getRecentTracks).
MCP executes + returns metadata → Data + widget identifier.
Widget loads → React-based component is fetched.
ChatGPT renders it inline → Runs securely in a sandboxed iframe.

Through this sequence, model reasoning, backend logic, and frontend rendering work together seamlessly.

The window.openai Bridge

window.openai is what connects your widget (React component) to ChatGPT.
It gives your app access to theme, language, state, and even lets you invoke tools or send messages.

It’s a two-way bridge:
Your widget doesn’t just display data - it can also act inside the conversation.
This is what makes ChatGPT apps feel native rather than embedded.

User Experience Flow

*Discovery *- ChatGPT suggests or surfaces your app contextually (e.g., “Spotify, show my playlist”).
Inline interaction - The widget renders right in chat, matching ChatGPT’s layout and theme.
Context continuity - The app stays active across turns, preserving state and conversational flow.

Building Apps in Minutes with FastApps

The OpenAI Apps SDK provides the foundation, but you don’t have to start from scratch.
FastApps wraps the MCP server and SDK into a single Python-first framework.

pip install fastapps
fastapps init my-app

This spins up a ready-to-run ChatGPT app with:

Server: Preconfigured MCP backend + auto-discovery
Widgets: React components wired to window.openai
Build & Dev: Live reload + ngrok tunnel built in

Then define your tool and UI:

# server/tools/my_widget_tool.py
class HelloTool(BaseWidget):
    async def execute(self, input):
        return {"message": f"Hello, {input.name}!"}

// widgets/my-widget/index.jsx
export default function HelloWidget() {
  const props = useWidgetProps();
  return <h1>{props.message}</h1>;
}

Run it locally:

npm run build
fastapps dev

Instantly live in ChatGPT. No config, no boilerplate.

Final Thoughts

The OpenAI Apps SDK feels like the early architecture of an agentic internet where models, tools, and humans coexist in one continuous conversational ecosystem. You can see the full article here.

If you want to build ChatGPT apps fast, FastApps makes it effortless.
Start today and deploy your first widget in minutes.

Why Apps in ChatGPT Are the Future

Zach Park — Sat, 11 Oct 2025 04:54:53 +0000

When Apple launched the App Store in 2008, it changed the way we thought about software: instead of heavy installations, we had lightweight apps that followed us everywhere. Today we stand on the brink of another inflection point. ChatGPT apps aren’t just a novelty bolted onto a chatbot. They signal a new way of interacting with software, one that revolves around conversation rather than screens. These apps still run on servers and devices, but the experience now sits beyond the GUI layer, in the intelligence that understands and responds to what we say.

Beyond the App Store Moment

ChatGPT apps arrive at a moment when computing is ripe for reinvention. For decades, software depended on tapping and swiping; now, natural language is becoming the primary interface. In practice, ChatGPT apps still rely on a back‑end server and a front‑end component that runs in an iframe inside ChatGPT. But from the user’s perspective, the interaction flows through conversation rather than a discrete user interface. OpenAI has released the Apps SDK in preview and plans to open app submissions later this year. The promise is that, just as the App Store democratized mobile software, the ChatGPT ecosystem could democratize software that lives in dialogue.

From Prompts to Agents — The Inversion of the Software Stack

Traditional apps integrate AI as a feature: voice search or predictive text sits inside an app that is otherwise built on a standard operating system. ChatGPT apps invert that relationship. Developers define tools and UI components, but the intelligence layer, the GPT mode, becomes the primary runtime. Each app is anchored by an MCP server that exposes tools the model can call, enforces authentication, and packages structured data with an HTML template for the client to render. Instead of simply returning text, the app can trigger actions, display interactive widgets, and update its state via window.openai calls. In this sense, the AI isn’t just augmenting an app; it orchestrates the workflow itself.

Unified Conversational UX — Multimodality, Memory and Natural Language

Because ChatGPT understands language, images and even voice inputs, apps can span modalities. A single component can display a card with search results, accept follow‑up questions, call an external API via the MCP tool and return a refreshed dataset. Combined with ChatGPT’s built‑in memory, this creates experiences that feel continuous: the app remembers context across turns and adapts its output accordingly.

Each GPT App still has its own interface, built through the Apps SDK’s component system, but it lives inside the conversation instead of outside it. That makes it lightweight, contextual, and instantly actionable. Today, users still need to connect or explicitly trigger a GPT App, but the direction is unmistakable. Over time, apps will feel less like separate tools and more like natural extensions of the dialogue itself. The interface becomes conversational, living inside the dialogue rather than outside it.

Unprecedented Distribution for Developers

One of the most compelling aspects of ChatGPT apps is the distribution potential. ChatGPT counts hundreds of millions of weekly users globally, giving developers a large audience from day one. While getting into the ecosystem does require building an MCP server, hosting it on a secure HTTPS endpoint and registering a connector via ChatGPT’s developer mode, the friction is lower than traditional app stores. A single integration can instantly reach a global user base already inside ChatGPT.

ChatGPT as the Agentic Ecosystem for Apps

What makes the ecosystem truly novel is how apps cooperate. Each app defines one or more tools, functions the model can call, plus a corresponding UI component. ChatGPT orchestrates when to call which tool in MCP and merges the results into the conversation. Developers don’t need to worry about drawing windows or implementing navigation; they focus on the task their tool performs and the data it returns. The best apps are conversational, time‑bound and visually succinct; they extend ChatGPT rather than replicate existing web workflows. Think booking a flight, ordering food or summarizing the morning’s calendar — tasks that can be completed in a few turns and presented in a clear card. This agentic model turns ChatGPT into more than a host; it becomes the mediator that connects intent to action.

Monetization

Every platform needs an economic model, and ChatGPT apps are no exception. OpenAI already offers subscription plans for ChatGPT, and the company has signaled that monetization policies for apps will be announced when the submission process opens. Although details are still forthcoming, it is easy to see the potential: usage‑based billing, revenue sharing and premium features could create a marketplace akin to the App Store, but oriented around actions rather than downloads. For developers, the allure is clear: a single integration could reach millions of users and generate revenue without the overhead of mobile app development.

Why OpenAI Won’t Walk Away

OpenAI collaborating with Jony Ive on a new hardware device hint at where this ecosystem could go. Imagine a voice‑first device whose primary interface is conversation; instead of launching apps via icons, you call on GPT‑powered tools. In such a scenario, the Apps SDK would be the application layer, GPT the operating system, and the device the input/output surface. While no official device has been announced, the direction is logical: to deliver seamless, multimodal experiences across phones, laptops and dedicated hardware, OpenAI needs an app platform tightly integrated with its models. That is why it’s investing in MCP servers, design guidelines and developer policies now, because the apps created today will populate the devices of tomorrow.

The Intelligence Platform Era

We’re moving from a world where software lives on devices to one where software lives inside intelligence. ChatGPT apps still rely on web servers, SDKs and deployment pipelines, but the user experience is shifting into dialogue. For developers, the platform offers global reach and a chance to build on top of one of the most capable AI models. For users, it promises smarter, more integrated workflows that happen naturally in conversation. Just as the App Store defined the smartphone era, GPT‑powered apps are poised to define the intelligence era and OpenAI’s early moves suggest it intends to lead the way.

What’s Still Missing And What We’re Building Next

As exciting as this ecosystem is, building ChatGPT Apps today still isn’t easy.

Developers have to wire up MCP servers, handle authentication, define tools, and manually decide how each app is triggered within a conversation. There’s no simple framework for routing intent, managing context, or connecting multiple GPT Apps smoothly which makes rapid experimentation difficult even for experienced developers.

That’s the gap we’re working to close.

We released FastApps, an open source, zero-boilerplate framework for building ChatGPT apps powered by OpenAI’s Apps SDK and FastMCP.

You can start building ChatGPT apps with a single line input.

We couldn’t stand generic AI websites anymore.

Zach Park — Fri, 03 Oct 2025 09:02:30 +0000

Hey everyone,

Every AI web builder we tried gave us the same problem: the sites looked cookie-cutter, stiff, and far from what a professional designer would make. Templates everywhere, zero personality. If this continues, we’ll drown in a sea of copy-paste, ugly websites.

So we built Moov, the first coding agent that builds designer-level websites. With a single prompt, Moov generates sites with the right tone, imagery, and motion. It’s like Lovable + Framer, but with a true design sensibility baked in.

Editing is seamless. Hover over any element and Moov suggests tailored design tweaks you can instantly apply. Images can be transformed into videos, and your own Figma components can be locked into the design. When you’re ready, everything exports as clean, production-ready code straight to GitHub.

Moov is now in beta. You can see the demo video through the link below.

DEV Community: Zach Park

Build Your First Apps in ChatGPT | A step-by-step guide building with the Apps SDK

Introduction

Step 0. How does apps in ChatGPT work?

How ChatGPT Apps Work

Step 1. Install FastApps

Step 2. Initialize a New App

Step 3. Test Your App

Option A: Test with MCPJam Inspector

Option B: Test in ChatGPT

Step 4. Create More Widgets

Step 5. Edit Your Widget

1️⃣ server/tools/ — MCP tool

Required Class Attributes

Optional Class Attributes

2️⃣ widgets/ — Frontend UI (React)

Step 6. Deploy your ChatGPT app for public use

Conclusion

Create Your First ChatGPT App

Introduction

How Do ChatGPT Apps Work?

Step 1: Install FastApps

Step 2: Initialize a New App

Step 3: Test Your App

Step 4: Create More Widgets

Step 5: Edit Your Widget

Step 6: Deploy Your App

How ChatGPT Apps Really Work: Inside the OpenAI Apps SDK

What Are ChatGPT Apps?

MCP and Widgets

High-Level Workflow

The window.openai Bridge

User Experience Flow

Building Apps in Minutes with FastApps

Final Thoughts

Why Apps in ChatGPT Are the Future

Beyond the App Store Moment

From Prompts to Agents — The Inversion of the Software Stack

Unified Conversational UX — Multimodality, Memory and Natural Language

Unprecedented Distribution for Developers

ChatGPT as the Agentic Ecosystem for Apps

Monetization

Why OpenAI Won’t Walk Away

The Intelligence Platform Era

What’s Still Missing And What We’re Building Next

We couldn’t stand generic AI websites anymore.

1️⃣ `server/tools/` — MCP tool

2️⃣ `widgets/` — Frontend UI (React)