Zach Park

Posted on Nov 4 • Edited on Nov 5

Create Your First ChatGPT App

#chatgpt #beginners #tutorial #programming

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.

DEV Community