DEV Community: Gadget

We ran vinext (Next.js on Vite) inside a Gadget app

Gadget — Mon, 09 Mar 2026 21:07:00 +0000

Use vinext in Gadget to get a drop-in replacement for your Next apps on Gadget's infrastructure.

Cloudflare dropped something pretty fun the other week: they rebuilt a drop-in replacement for Next.js on top of Vite. It took them about a week and only cost $1100 in tokens.

The project is called vinext. It keeps the Next.js API but swaps the underlying toolchain for Vite, which means dramatically faster builds and smaller client bundles. The announcement blog post is worth a read if you care about those numbers.

My immediate reaction was: can we use this to power a Gadget frontend?

Gadget already uses Vite for its frontend tooling. If vinext also runs on Vite, we should be able to get it running. So I spent some time experimenting to get a Next-style frontend running inside a Gadget project.

As it turns out you can get something working pretty quickly!

So I figured I’d share the steps I took to set things up. This isn’t meant to be a strict tutorial, it’s more of a “here are the steps I took and how I used agents to do this ” guide.

Also, this is very experimental on both the vinext and Gadget side of things.

You can also check out the video:

The idea

A normal Gadget app contains everything you need to power a modern full-stack web app.

You get a managed Postgres database, a Node backend, authentication and multi-tenancy, and a generated API client. The frontend is a Vite + React Router project that is already wired up to that backend, and has built-in auth and session management.

The experiment was simple: keep all of that exactly the same, but replace the default frontend runtime with vinext.

Conceptually, the architecture becomes:

The backend still behaves like a normal Gadget app. The frontend just adopts the Next programming model running on Vite.

Starting with a normal Gadget app

I began by creating a new Gadget web app and pulled it down locally using the ggt CLI. Relevant for the vinext migration, all new apps have a package.json file, a vite.config.mts, and a web directory containing the frontend (in addition to everything needed to power and configure the database and backend).

The web directory is where everything interesting happens.

Normally, Gadget frontends use React Router. In this experiment that router disappears and the frontend becomes a vinext app instead.

Once that swap happens, the project suddenly feels a lot like a Next app. Instead of client-side routing handled by React Router, the project now uses vinext’s Next-style page routing. Page components, layouts, and routing conventions look exactly like what you’d expect from a new NextJS app.

What’s nice is that all the Gadget primitives still work exactly the same way. For example, grabbing the authenticated user in a component still looks like this:

const user = useUser();

That hook comes from Gadget and continues to work normally as long as the GadgetProvider is setup properly. vinext is just responsible for routing and rendering.

Making Vite happy

The only part of the integration that required a bit of experimentation was the Vite configuration.

The project needs both the Gadget Vite plugin and the vinext plugin so the frontend can run the vinext runtime while still talking to the Gadget backend. (The Tailwind plugin was used too. It didn’t need to be touched.)

It seems like authentication needed a small passthrough configuration so auth-related requests resolve correctly during development. This was the major hangup I ran into during the migration experiment, and Codex helped me resolve it. It’s definitely possible (probable, even) that there’s a more “Next-native” way to handle this.

vite.config.mts

/**
 * Vite plugin that prevents vinext/RSC from handling Gadget backend routes.
 *
 * The @vitejs/plugin-rsc registers a catch-all middleware that writes a
 * response for ALL requests (returning 404 for unmatched App Router routes).
 * This prevents Gadget's platform from handling backend paths like /auth/*
 * (OAuth flows).
 *
 * This plugin patches the middleware stack after all plugins have registered,
 * wrapping every async handler so that backend paths call next() instead of
 * being handled by the RSC renderer.
 */
function gadgetBackendPassthrough(): Plugin {
  const backendPrefixes = ["/auth/"];

  function isBackendPath(url: string): boolean {
    const pathname = url.split("?")[0];
    return backendPrefixes.some((prefix) => pathname.startsWith(prefix));
  }

  return {
    name: "gadget-backend-passthrough",
    configureServer(server) {
      // Return a post-middleware setup function. This runs after all
      // plugins' configureServer hooks, including vinext and RSC.
      // By listing this plugin AFTER vinext, our setup function runs
      // after the RSC middleware is already in the stack.
      return () => {
        const stack = server.middlewares.stack;

        for (const layer of stack) {
          const fn = layer.handle;
          if (!fn || (fn as any).__gadgetWrapped) continue;

          // Wrap all 3-param middleware handlers (req, res, next)
          // to skip backend paths. This catches the RSC handler
          // regardless of its name.
          if (fn.length === 3 || fn.length === 2) {
            const original = fn;
            const wrapped = function (req: any, res: any, next: any) {
              const url = req.originalUrl ?? req.url ?? "";
              if (isBackendPath(url)) {
                return next();
              }
              return original(req, res, next);
            };
            (wrapped as any).__gadgetWrapped = true;
            layer.handle = wrapped;
          }
        }
      };
    },
  };
}

Once those pieces are in place, vinext spins up and I can build like I would any other NextJS app, but using my Gadget API client to call my app APIs.

Letting an agent do the migration

Rather than doing everything by hand, I let an agent (Codex) handle most of the conversion.

I started with a fresh NextJS app and used the cloudflare/vinext agent skill to convert it to vinext. If you have an existing app, you could convert it instead. The skill one-shot the transformation. I tested locally and used the converted project as a reference for migrating my Gadget app.

From there, it was mostly a matter of copying the frontend structure into the Gadget project and adapting it so it used the Gadget API client and authentication hooks. The agent took care of all of it for me. There was a bit of back and forth around using the Vite Tailwind plugin (my reference app used PostCSS instead). And the only other hangup was the auth passthrough.

Look ma, no Next!

Once everything is wired together, you can build a NextJS-style app on Gadget. But, you know, without actually using NextJS.

You still get access to Gadget’s infra-less setup: define data models, Gadget generates the API client, and call those APIs directly from vinext pages. Authentication flows through Gadget. Multi-tenancy still works. The hosted development environment’s backend and database are unchanged.

The frontend just happens to speak the Next API.

vinext is still very early, but the idea behind it is compelling. If the Next programming model can run comfortably on top of Vite, it opens up a lot of flexibility in how those applications can be built and hosted.

Gadget happens to fit that model well. Because the platform already exposes backend services through a generated client, the frontend runtime becomes relatively interchangeable (so long as it uses Vite!). vinext just restructures how you build the UI layer.

This experiment worked better than expected. But let's be real: I migrated a fresh NextJS app and a fresh Gadget app. I didn’t have a bunch of existing, complex logic. I wasn’t exactly pushing the boundaries of vinext here.

But as a proof of concept, running vinext inside a Gadget project is very possible.

Want to chat more or have questions? I’m usually hanging out in our dev Discord.

Building HubSpot apps in 2025: What’s new, what’s changing, and how to get started.

Gadget — Tue, 06 Jan 2026 15:53:33 +0000

HubSpots developer ecosystem is changing a lot, so let's break down what is changing for developers like yourself.

HubSpot’s developer ecosystem has expanded rapidly over the last two years. With the release of HubSpot’s Developer Platform, they are transitioning away from legacy CRM extensions, which were all crammed in the side-bar, toward a much more capable environment by taking apps out of the side panel with App Cards, alongside a modernized HubSpot CLI, and a long-awaited local development workflow.

Whether you’re building a lightweight internal integration or a full commercial app for the marketplace, understanding these changes is essential. This post summarizes the key improvements, how the new platform differs from the legacy model, and what new tooling options are available to developers in 2025.

The new HubSpot app environment

HubSpot’s new development environment is designed to be significantly more extensible, structured, and consistent than the previous generation of “sidebar-only” CRM extensions.

Extensible App Cards

Extensible UI options like the App Card are the centrepiece of the modern HubSpot app framework, compared to legacy CRM Cards (deprecated in 2025 and sunset in October 2026).

At a high level, the key differences are:

Placement is flexible: cards can appear in the main record pages, not just the sidebar.
Rendering is reactive: extensions use React UI components within HubSpot’s native UX.
Data access is easier: apps fetch data through hubspot.fetch(), which handles the data handling process for developers out of the box
More ways to view data: App Objects, Events, and eventually Home Pages provide a path to more deeply integrated experiences.

Account executives and BDRs can rejoice now as information can be more digestible at a glance, rather than a slow, clunky sidebar. Rather than sit, wait, and scramble to review the Legacy apps data 5 minutes into the customer call, sales teams can be right on time with the center page app card, giving them what they need at a glance, between back-to-back calls.

App settings & app home

The new App Settings and App Home experiences allow developers to build configuration UIs directly inside HubSpot. You no longer need an external settings page or a separate admin dashboard. Apps can now:

Store and render their own configuration screens
Allow merchants to manage connections and preferences
Use the same UI Extensions framework as CRM-facing cards

This closes a long-standing pain point for app developers and users where the app existed on an object page side-panel.

There is a large list of beneficial changes for developers, all in the right direction, with more development environment customization, logging, and promised consistency for future HubSpot API changes.

These changes include:

Developers can now configure which combination of hub and tier their test accounts are, whereas before it was always enterprise
Developers can configure & deploy single projects across multiple environments, as well as define and set reference environment variables
Easily integrate Sentry and Honeycomb for logging and debugging
Regularly cadenced releases for API updates in March and September, as well as selectable versioning.

A notable feature in the HubSpot CLI is the hs get-started command, which scaffolds a working starter app, authenticates the CLI, and walks developers through deployment and installation. During this process, templated app cards, AGENTS.md, and CLAUDE.md are generated so your app is AI-ready as well.

HubSpot has also promoted several upcoming Breeze AI features designed to help developers build faster by searching documentation, educating, exploring, debugging, and scaffolding. Breeze is also exposed through an MCP server, enabling the same AI capabilities to be used in any MCP-compatible environment, such as IDEs or chat tools.

Of the mentioned AI features, the only ones currently available are the “Fast and Intelligent” documentation search, and debugging. The accompanying material with these statements is just the AI chat found in the developer documentation page, and not embedded in the app logs page.

So far, anecdotal experience with these features feels like another AI assistant straight from Anthropic, lightly wrapped in whatever content it’s claimed to be an “expert” on. Key highlights from my experience of using Breeze AI are:

This was a miss for me as a result of the expectations. I found it quite slow, strangely clunky with page navigation, and the Assistant did not seem properly educated or integrated on the HubSpot docs knowledge base for about half of my questions.
There were instances where I could tell it was not searching the HubSpot docs for questions I had and used external information that did not pertain to HubSpot's components.
Heavily gravitates to assuming all questions pertain to Legacy apps
There was a specific instance where I got lost in the HubSpot menus (as we all do) and asked the Breeze AI “Where can I find my App’s logs”. The response was that “Legacy Apps do not have logs”, and when I clarified more that this is a “Non-legacy app” it told me HubSpot does not have logging capabilities, and I will need to use an external platform. I knew it existed as I do use the logs in HubSpot, and eventually found it myself in /Development/Monitoring/Logs. Then selected my app from the dropdown menu at the top of the screen.

Authentication

With the expansion of the HubSpot app store comes a push for a standard web application experience, meaning OAuth for multi-tenant apps. You will still have the option of static auth for private app distributions.

If you are looking to have your app be publicly listed on the HubSpot app marketplace, you will need to use OAuth.

If you are building a private app for a single client, an internal tool, or just want to start building without worrying about OAuth, Hubspot's static authentication is a fast way to get started.

The primary difference between OAuth and static is how your application backend will obtain its access token. With OAuth, your backend must perform the full authorization flow. This includes generating an authorization URL using your HubSpot app’s Client ID, Client Secret, redirect URI, and required scopes.

Users are redirected to HubSpot to grant access, and HubSpot sends your backend a temporary authorization code at the redirect URI. Your backend must exchange this code for an access token and a refresh token using HubSpot’s token endpoint, then store and refresh these tokens as needed. In contrast, static auth allows you to manually supply the Client ID, Client Secret, and permanent access token without performing redirects or token exchanges.

For more information on working with OAuth you can check out HubSpot’s developer docs, OR stay tuned to our Gadget blog for our upcoming Gadget app template for HubSpot Oauth, which will have a working implementation for HubSpot Oauth.

Start building Hubspot apps on Gadget

HubSpot’s 2025 platform is a great step forward for a new era of extensibility in the HubSpot ecosystem. With a fully modern app framework, richer UI options, more predictable APIs, and a growing set of developer tools, builders can finally create polished, reliable, highly integrated experiences inside HubSpot.

As the platform evolves through 2025 and beyond, we look forward to seeing the support HubSpot is putting forward in developers to nurture its platform and add highly requested and bespoke capabilities for a wide range of businesses.

Want to start building private Hubspot apps for single clients? Try out the Gadget Hubspot template. It includes static auth, user and session token management, and gives you a hosted and scaled Postgres db, serverless Node backend, and Vite frontend for your app admin.

Tutorial: Build a ChatGPT app using OpenAI's Apps SDK and Gadget

Riley Draward — Thu, 16 Oct 2025 19:06:23 +0000

The ChatGPT Apps SDK gives developers the ability to make ChatGPT more interactive. It lets it call APIs, store user data, and render custom UIs.

In this tutorial, you'll build a movie app that connects to The Movie Database (TMDB), fetches data on popular and upcoming movies, and lets users create their own watch list inside ChatGPT.

You’ll learn how to:

Build and register tools using the Model Context Protocol (MCP)
Create widgets that render React components inside ChatGPT
Make API calls to your backend from within a ChatGPT app

A paid ChatGPT plan is required to build apps, and developer mode must be enabled.

You’ll also need an account with The Movie Database in order to generate an API key.

How ChatGPT apps work

ChatGPT apps run inside ChatGPT in an iframe environment. They’re built with the OpenAI Apps SDK and communicate with ChatGPT using MCP, a protocol for defining tools (server-side functions ChatGPT can call) and resources (UI widgets).

Each app defines:

Iframe sandboxing: Each app runs inside a triple-layered iframe sandbox, isolating your UI from ChatGPT and protecting user data.
MCP as the bridge: MCP defines your app’s tools and resources so ChatGPT knows what functions it can call and what widgets to render as output.
Tool calls: When a user asks something your app can handle, ChatGPT invokes a registered tool on your MCP server with structured JSON input.
Resources and widgets: Tools return structured content and point to a resource (like a React component) that ChatGPT renders inline inside the chat.
window.openai environment: Inside that iframe, your widget can read tool output, persist state, send follow-up messages, or make authenticated API calls.

This project uses Gadget to handle OAuth, database models, MCP setup, and so you can focus on building the app itself.

1. Create a new project

Start by forking the Gadget ChatGPT app template. Give your project a name, e.g. chatgpt-movies. This template includes:

Built-in OAuth
A pre-configured MCP server (api/mcp.ts)
A React-based widgets folder (web/chatgpt-widgets)
A Vite frontend setup using vite-plugin-chatgpt-widgets

When you build and run your app in Gadget, you’ll have both:

Unlimited development environments (e.g. myapp--development.gadget.app)
A production environment (deployed later)

Gadget apps come with all the production-grade infrastructure needed to build and run ChatGPT apps. Every Gadget app is powered by a Postgres database with multiple read replicas, a Node + Fastify backend, and a React frontend served and bundled by Vite, and also includes Elasticsearch built into the auto-generated APIs and a built-in background jobs system. Everything is stitched together so you can focus on writing the code to make your unique ChatGPT app.

Understanding the MCP server

Your MCP server is what exposes tool calls and frontend widgets to ChatGPT.

In the template, it’s defined in api/mcp.ts and is created and called using the pre-defined /mcp HTTP routes (api/routes/mcp/*). A new MCP server instance is created and all React widgets (from the chatgpt-widgets folder) are registered as resources.

Each resource gets a URI (e.g. ui://widget/HelloWorld.html), and tools reference these URIs in their output templates meta definition:

_meta: {
  "openai/outputTemplate": "ui://widget/HelloWorld.html",
}

This is how a tool call knows which widget to render its data in.

The __getGadgetAuthTokenV1 tool included by default lets widgets make authenticated API requests directly using your Gadget app’s API client (web/api.ts) so you don’t have to define a new tool call for every single request you want to make from your widget.

2. Connecting your app to ChatGPT

Now you can install your app in ChatGPT by setting up a new connection.

Copy your app’s live development URL (for example, https://chatgpt-movies--development.gadget.app).
In ChatGPT, go to Settings > Apps & Connectors > Create.
Give it a name, e.g. “My Movies App.”
Set the MCP endpoint to your Gadget app’s URL (ending with /mcp, for example, https://chatgpt-movies--development.gadget.app/mcp).
Complete the OAuth flow. ChatGPT will handle authentication automatically.

Once it’s connected, you’ll see two actions in ChatGPT:

helloWorld
__getGadgetAuthTokenV1

These come from your template’s MCP server and confirm that everything’s working.

If you want to test out your app, you can start a new chat, add your app as context, and ask ChatGPT “Use my app to say hello”. A “Hello, World” widget should appear in the chat!

The user model in your app (api/models/user) contains the record for the signed-in user. In this app, it will be used to associate a movie watch list with a user, as an example of multi-tenancy in a ChatGPT app.

3. Add a `watchlist` data model

Before you start to modify your MCP server, you’ll need a place to store the ID of the list created in The Movie Database. Instead of storing individual movies and watch lists inside Gadget, you can use The Movie Database’s /list API to generate watch lists, and store the reference list ID in Gadget.

In Gadget, create a new model called watchlist:
Add a tmdbId field with the number type
The model will already have timestamps, an ID, and be related to the user model

That’s all you need for now. Gadget will automatically generate a CRUD API for this model (create, read, update, delete), which you’ll use later from your front end.

4. Adding the `saveToList` action

Now you create an action that adds a movie to a user’s watch list. A global action is used because you need to upsert a watch list ID from The Movie Database - if a watch list record does not exist for this user, create one on The Movie Database, then store the ID in Gadget. If the watch list record does exist, we use it in follow up calls of saveToList to add movies to the list.

Create a new api/actions/saveToList.ts action.
Paste the following code:

// in api/actions/saveToList.ts
import { tmdbPost, type TMDBCreateListResponse } from "../tmdb";

export const run: ActionRun = async ({ params, logger, api, session }) => {
  const { movieId } = params;

  let watchlist = await api.watchlist.maybeFindFirst();
  if (!watchlist) {
    // create watchlist if it doesn't exist
    const user = await api.user.findFirst();
    const data = await tmdbPost<TMDBCreateListResponse>("/list", {
      name: `This is ${user.firstName}'s custom ChatGPT watchlist.`,
      description: "A list of movies added using ChatGPT.",
      language: "en",
    });

    if (data) {
      watchlist = await api.watchlist.create({
        tmdbId: data.list_id,
        user: {
          _link: session!.get("user"),
        },
      });
    }
  }

  const listId = watchlist?.tmdbId;
  const response = await tmdbPost<{
    status_code: number;
    status_message: string;
  }>(`/list/${listId}/add_item`, {
    media_id: movieId,
  });

  if (response.status_code !== 12 && response.status_code !== 1) {
    throw new Error(
      `Failed to add movie to watchlist: ${response.status_message}`,
    );
  }

  return { listId };
};

// define the incoming movie ID as a param
export const params = {
  movieId: { type: "number" }
};

Because your widget requests include a bearer token (thanks to the auth tool), we can associate a watch list to a user’s ChatGPT account, enabling multi-tenancy.

5. Connecting to The Movie Database (TMDB)

Now that your backend can save data, let’s connect to the TMDB API to fetch movies.

Add a TMDB_API_KEY environment variable to Gadget (Settings > Environment variables) and paste in your key.
Create a helper file at api/tmdb.ts.
Paste the following code into the helper file:

// in api/tmdb.ts
// TMDB API configuration
const TMDB_BASE_URL = "https://api.themoviedb.org/3";
export const TMDB_IMAGE_BASE_URL = "https://image.tmdb.org/t/p";

export interface TMDBMovie {
  id: number;
  title: string;
  original_title: string;
  overview: string;
  release_date: string;
  poster_path: string | null;
  backdrop_path: string | null;
  vote_average: number;
  vote_count: number;
  popularity: number;
  genre_ids: number[];
  adult: boolean;
  original_language: string;
}

export interface TMDBMovieDetails extends TMDBMovie {
  runtime: number;
  genres: Array<{ id: number; name: string }>;
  budget: number;
  revenue: number;
  tagline: string;
  status: string;
  production_companies: Array<{
    id: number;
    name: string;
    logo_path: string | null;
  }>;
}

export interface TMDBResponse {
  page: number;
  results: TMDBMovie[];
  total_pages: number;
  total_results: number;
}

// Helper function to fetch from TMDB API
export async function tmdbFetch<T>(
  endpoint: string,
  params: Record<string, string> = {},
): Promise<T> {
  const url = new URL(`${TMDB_BASE_URL}${endpoint}`);
  Object.entries(params).forEach(([key, value]) => {
    url.searchParams.append(key, value);
  });

  const response = await fetch(url.toString(), {
    headers: {
      Authorization: `Bearer ${process.env.TMDB_API_KEY!}`,
      Accept: "application/json",
    },
  });
  if (!response.ok) {
    throw new Error(`TMDB API error: ${response.statusText}`);
  }
  return response.json();
}

export interface TMDBCreateListResponse {
  status_message: string;
  success: boolean;
  status_code: number;
  list_id: number;
}

export interface TMDBList {
  created_by: string;
  description: string;
  favorite_count: number;
  id: string;
  items: TMDBMovie[];
  item_count: number;
  iso_639_1: string;
  name: string;
  poster_path: string;
  total_results: number;
}

// Helper function to post to TMDB API
export async function tmdbPost<T>(
  endpoint: string,
  body: Record<string, any> = {},
): Promise<T> {
  const url = new URL(`${TMDB_BASE_URL}${endpoint}`);

  const response = await fetch(url.toString(), {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.TMDB_API_KEY!}`,
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify(body),
  });
  if (!response.ok) {
    throw new Error(`TMDB API error: ${response.statusText}`);
  }
  return response.json();
}

// Helper to format movie data for display
export function formatMovieInfo(movie: TMDBMovie | TMDBMovieDetails): string {
  const posterUrl = movie.poster_path
    ? `${TMDB_IMAGE_BASE_URL}/w500${movie.poster_path}`
    : "No poster available";

  let info = `**${movie.title}** (${movie.release_date?.split("-")[0] || "N/A"})\n`;
  info += `Rating: ${movie.vote_average.toFixed(1)}/10 (${movie.vote_count} votes)\n`;
  info += `Overview: ${movie.overview}\n`;
  info += `Poster: ${posterUrl}\n`;

  if ("runtime" in movie && movie.runtime) {
    info += `Runtime: ${movie.runtime} minutes\n`;
  }

  if ("genres" in movie && movie.genres) {
    info += `Genres: ${movie.genres.map((g) => g.name).join(", ")}\n`;
  }

  return info;
}

This helper file makes it easy for us to call TMDB endpoints and defines some types for our app.

6. Registering MCP tools for movie endpoints

It is finally time to modify your MCP server. Open mcp.ts again and start registering tools for the different TMDB endpoints.

Paste the following code into api/mcp.ts:

// in api/mcp.ts
import { getWidgets } from "vite-plugin-chatgpt-widgets";
import { FastifyRequest } from "fastify";
import type { Server } from "gadget-server";
import { z } from "zod";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
import path from "path";
import {
  tmdbFetch,
  tmdbPost,
  formatMovieInfo,
  TMDB_IMAGE_BASE_URL,
  type TMDBResponse,
  type TMDBMovieDetails,
  type TMDBCreateListResponse,
  TMDBList,
} from "./tmdb";

export const createMCPServer = async (request: FastifyRequest) => {
  const mcpServer = new McpServer({
    name: "movie-demo",
    version: "1.0.0",
  });

  const api = request.api.actAsSession;

  // helper functions to fetch watchlist
  const getMyWatchlist = async (request: FastifyRequest) => {
    const watchlist = await api.watchlist.maybeFindFirst();

    if (!watchlist) {
      return;
    }

    const data = await tmdbFetch<TMDBList>(`/list/${watchlist.tmdbId}`);

    const output = {
      movies: data.items.map((movie) => ({
        id: movie.id,
        title: movie.title,
        release_date: movie.release_date,
        rating: movie.vote_average,
        overview: movie.overview,
        poster_url: movie.poster_path
          ? `${TMDB_IMAGE_BASE_URL}/w500${movie.poster_path}`
          : null,
        in_watchlist: true,
      })),
      total_results: data.total_results,
    };

    return output;
  };

  const getMyWatchlistMovieIds = async (request: FastifyRequest) => {
    const watchlist = await getMyWatchlist(request);
    const ids = new Set(watchlist?.movies.map((m) => m.id) || []);
    return ids;
  };

  // Tool 1: Get now playing movies (recently released in theaters)
  mcpServer.registerTool(
    "getNowPlayingMovies",
    {
      title: "Get Now Playing Movies",
      description:
        "Get a list of movies currently playing in theaters. These are recently released movies that are available to watch right now.",
      // give an input schema to the ChatGPT LLM, allowing it to invoke this tool with different parameters as needed
      inputSchema: {
        page: z
          .number()
          .optional()
          .describe("Page number for pagination (default: 1)"),
        region: z
          .string()
          .optional()
          .describe(
            "ISO 3166-1 code to filter release dates (e.g., 'US', 'GB')",
          ),
      },
      annotations: {
        readOnlyHint: true,
      },
      _meta: {
        // render the MovieList React widget in the ChatGPT UI when this tool is invoked
        "openai/outputTemplate": "ui://widget/MovieList.html",
        "openai/toolInvocation/invoking":
          "Getting movies currently playing in theaters",
        "openai/toolInvocation/invoked": "Found currently playing movies",
      },
    },
    async ({ page = 1, region = "US" }) => {
      const data = await tmdbFetch<TMDBResponse>("/movie/now_playing?sort_by=popularity.desc", {
        page: page.toString(),
        region,
      });

      const myWatchlistIds = await getMyWatchlistMovieIds(request);

      const output = {
        movies: data.results.map((movie) => ({
          id: movie.id,
          title: movie.title,
          release_date: movie.release_date,
          rating: movie.vote_average,
          overview: movie.overview,
          poster_url: movie.poster_path
            ? `${TMDB_IMAGE_BASE_URL}/w500${movie.poster_path}`
            : null,
          in_watchlist: myWatchlistIds.has(movie.id),
        })),
        total_results: data.total_results,
      };

      return {
        content: [
          {
            type: "text",
            text: `Found ${data.total_results} movies now playing in theaters`,
          },
        ],
        structuredContent: output,
      };
    },
  );

  // Tool 2: Search for movies
  mcpServer.registerTool(
    "searchMovies",
    {
      title: "Search Movies",
      description: "Search for movies by title or keywords",
      inputSchema: {
        query: z.string().describe("Search query (movie title or keywords)"),
        page: z
          .number()
          .optional()
          .describe("Page number for pagination (default: 1)"),
        year: z.number().optional().describe("Filter by release year"),
      },
      annotations: {
        readOnlyHint: true,
      },
      _meta: {
        "openai/toolInvocation/invoking": "Searching for movies",
        "openai/toolInvocation/invoked": "Found matching movies",
        "openai/outputTemplate": "ui://widget/MovieList.html",
      },
    },
    async ({ query, page = 1, year }) => {
      const params: Record<string, string> = {
        query,
        page: page.toString(),
      };
      if (year) {
        params.year = year.toString();
      }

      const data = await tmdbFetch<TMDBResponse>("/search/movie", params);

      const output = {
        movies: data.results.map((movie) => ({
          id: movie.id,
          title: movie.title,
          release_date: movie.release_date,
          rating: movie.vote_average,
          overview: movie.overview,
          poster_url: movie.poster_path
            ? `${TMDB_IMAGE_BASE_URL}/w500${movie.poster_path}`
            : null,
        })),
        total_results: data.total_results,
      };

      return {
        content: [
          {
            type: "text",
            text: `Found ${data.total_results} movies matching "${query}"`,
          },
        ],
        structuredContent: output,
      };
    },
  );

  // Tool 3: Get popular movies
  mcpServer.registerTool(
    "getPopularMovies",
    {
      title: "Get Popular Movies",
      description: "Get a list of popular movies, ordered by popularity",
      inputSchema: {
        page: z
          .number()
          .optional()
          .describe("Page number for pagination (default: 1)"),
      },
      annotations: {
        readOnlyHint: true,
      },
      _meta: {
        "openai/toolInvocation/invoking": "Getting popular movies",
        "openai/toolInvocation/invoked": "Found popular movies",
        "openai/outputTemplate": "ui://widget/MovieList.html",
      },
    },
    async ({ page = 1 }) => {
      const data = await tmdbFetch<TMDBResponse>("/movie/popular?sort_by=popularity.desc", {
        page: page.toString(),
      });

      const myWatchlistIds = await getMyWatchlistMovieIds(request);

      const output = {
        movies: data.results.map((movie) => ({
          id: movie.id,
          title: movie.title,
          release_date: movie.release_date,
          rating: movie.vote_average,
          overview: movie.overview,
          poster_url: movie.poster_path
            ? `${TMDB_IMAGE_BASE_URL}/w500${movie.poster_path}`
            : null,
          in_watchlist: myWatchlistIds.has(movie.id),
        })),
        total_results: data.total_results,
      };

      return {
        content: [
          {
            type: "text",
            text: `Found ${data.total_results} popular movies`,
          },
        ],
        structuredContent: output,
      };
    },
  );

  // Tool 4: Get movie details
  mcpServer.registerTool(
    "getMovieDetails",
    {
      title: "Get Movie Details",
      description: "Get detailed information about a specific movie by its ID",
      inputSchema: {
        movieId: z.number().describe("The TMDB movie ID"),
      },
      annotations: {
        readOnlyHint: true,
      },
      _meta: {
        "openai/toolInvocation/invoking": "Getting movie details",
        "openai/toolInvocation/invoked": "Retrieved movie details",
        "openai/outputTemplate": "ui://widget/MovieList.html",
      },
    },
    async ({ movieId }) => {
      const movie = await tmdbFetch<TMDBMovieDetails>(`/movie/${movieId}`);

      let details = formatMovieInfo(movie);
      details += `Tagline: ${movie.tagline || "N/A"}\n`;
      details += `Status: ${movie.status}\n`;
      details += `Budget: $${movie.budget.toLocaleString()}\n`;
      details += `Revenue: $${movie.revenue.toLocaleString()}\n`;

      if (movie.production_companies.length > 0) {
        details += `Production: ${movie.production_companies.map((c) => c.name).join(", ")}\n`;
      }

      const output = {
        id: movie.id,
        title: movie.title,
        release_date: movie.release_date,
        rating: movie.vote_average,
        overview: movie.overview,
        runtime: movie.runtime,
        genres: movie.genres,
        tagline: movie.tagline,
        budget: movie.budget,
        revenue: movie.revenue,
        poster_url: movie.poster_path
          ? `${TMDB_IMAGE_BASE_URL}/w500${movie.poster_path}`
          : null,
        backdrop_url: movie.backdrop_path
          ? `${TMDB_IMAGE_BASE_URL}/original${movie.backdrop_path}`
          : null,
      };

      return {
        content: [{ type: "text", text: details }],
        structuredContent: output,
      };
    },
  );

  // Tool 5: Get upcoming movies
  mcpServer.registerTool(
    "getUpcomingMovies",
    {
      title: "Get Upcoming Movies",
      description: "Get a list of upcoming movies that will be released soon",
      inputSchema: {
        page: z
          .number()
          .optional()
          .describe("Page number for pagination (default: 1)"),
        region: z
          .string()
          .optional()
          .describe(
            "ISO 3166-1 code to filter release dates (e.g., 'US', 'GB')",
          ),
      },
      annotations: {
        readOnlyHint: true,
      },
      _meta: {
        "openai/toolInvocation/invoking": "Getting upcoming movies",
        "openai/toolInvocation/invoked": "Found upcoming movies",
        "openai/outputTemplate": "ui://widget/MovieList.html",
      },
    },
    async ({ page = 1, region = "US" }) => {
      const data = await tmdbFetch<TMDBResponse>("/movie/upcoming?sort_by=popularity.desc", {
        page: page.toString(),
        region,
      });

      const myWatchlistIds = await getMyWatchlistMovieIds(request);

      const output = {
        movies: data.results.map((movie) => ({
          id: movie.id,
          title: movie.title,
          release_date: movie.release_date,
          rating: movie.vote_average,
          overview: movie.overview,
          poster_url: movie.poster_path
            ? `${TMDB_IMAGE_BASE_URL}/w500${movie.poster_path}`
            : null,
          in_watchlist: myWatchlistIds.has(movie.id),
        })),
        total_results: data.total_results,
      };

      return {
        content: [
          {
            type: "text",
            text: `Found ${data.total_results} upcoming movies`,
          },
        ],
        structuredContent: output,
      };
    },
  );

  // Tool 6: Get watchlist
  mcpServer.registerTool(
    "getMyWatchlist",
    {
      title: "Get Movies Saved To My Watchlist",
      description:
        "Get a list of movies that the user has saved to their watchlist",
      annotations: {
        readOnlyHint: true,
      },
      _meta: {
        "openai/toolInvocation/invoking": "Getting movies on your watchlist",
        "openai/toolInvocation/invoked": "Found your watchlist of movies",
        "openai/outputTemplate": "ui://widget/MovieList.html",
      },
    },
    async () => {
      const output = await getMyWatchlist(request);

      if (!output) {
        return {
          content: [
            {
              type: "text",
              text: `You don't have a watchlist yet.`,
            },
          ],
          structuredContent: {},
        };
      }

      return {
        content: [
          {
            type: "text",
            text: `Found ${output.total_results} movies on your watchlist`,
          },
        ],
        structuredContent: output,
      };
    },
  );

  const devServer = await (
    request.server as any
  ).frontendServerManager?.devServerManager?.getServer();

  const viteHandle =
    devServer && process.env.NODE_ENV != "production"
      ? { devServer }
      : {
        manifestPath: path.resolve(
          process.cwd(),
          ".gadget/remix-dist/build/client/.vite/manifest.json",
        ),
      };

  // Pass the Vite dev server instance from wherever you can get it
  const widgets = await getWidgets("web/chatgpt-widgets", viteHandle);

  // Register each widget on an MCP server as a resource for exposure to ChatGPT
  for (const widget of widgets) {
    const resourceName = `widget-${widget.name.toLowerCase()}`;
    const resourceUri = `ui://widget/${widget.name}.html`;

    mcpServer.registerResource(
      resourceName,
      resourceUri,
      {
        title: widget.name,
        description: `ChatGPT widget for ${widget.name}`,
      },
      async () => {
        return {
          contents: [
            {
              uri: resourceUri,
              mimeType: "text/html+skybridge",
              text: widget.content,
            },
          ],
        };
      },
    );
  }

  mcpServer.registerTool(
    "__getGadgetAuthTokenV1",
    {
      title: "Get the gadget auth token",
      description:
        "Gets the gadget auth token. Should never be called by LLMs or ChatGPT -- only used for internal auth machinery.",
      _meta: {
        // ensure widgets can invoke this tool to get the token
        "openai/widgetAccessible": true,
      },
    },
    async () => {
      if (!request.headers["authorization"]) {
        return {
          structuredContent: {
            token: null,
            error: "no token found",
          },
          content: [],
        };
      }

      const [scheme, token] = request.headers["authorization"].split(" ", 2);
      if (scheme !== "Bearer") {
        return {
          structuredContent: {
            token: null,
            error: "incorrect token scheme",
          },
          content: [],
        };
      }

      return {
        structuredContent: {
          token,
          scheme,
        },
        content: [],
      };
    }
  );

  return mcpServer;
};

Each tool should:

Use Zod to define its input schema (for pagination, region, etc.)
Fetch data using your TMDB helper
Format the results into structured content
Register a widget output URI (MovieList.html)

This structuredContent will be passed into the React widget via window.openai.toolOutput inside the ChatGPT iframe.

7. Building the React widget

Notice how there are no tool calls for adding movies to a watch list! We can use the Gadget API directly in our widget (inside the ChatGPT iframe environment) thanks to the __getGadgetAuthTokenV1 tool call and the Provider in web/chatgpt-widgets/root.tsx.

The Provider makes a single tool call to __getGadgetAuthTokenV1 and appends the OAuth token as a Authorization: Bearer <token> to any requests made with the Gadget API client. This is what allows for authenticated requests to be made from ChatGPT to your Gadget backend without having to define a separate tool call. (Tool calls are slow. Calling your app’s API directly is much faster.)

The OpenAI Apps sample repo includes reusable hooks for accessing toolOutput and widgetState, which have been included in the original template that you forked. toolOutput is how you pass in your list of movies from the backend to the widget. widgetState allows you to persist the current state of your frontend. If a user refreshes their browser tab or leaves and returns to the chat, the app will be in the same state as before.

Create a new file in your web/chatgpt-widgets folder called MovieList.tsx.
Paste the following code into MovieList.tsx:

// in web/chatgpt-widgets/MovieList.tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../components/ui/card";
import { Badge } from "../components/ui/badge";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "../components/ui/tabs";
import {
  Star,
  Calendar,
  DollarSign,
  Clock,
  Film,
  Bookmark,
} from "lucide-react";
import { useWidgetProps, useWidgetState } from "./utils/hooks";
import { UnknownObject } from "./utils/types";
import { useEffect, useState } from "react";
import { api } from "../api";

interface Movie {
  id: number;
  title: string;
  release_date?: string;
  rating?: number;
  overview?: string;
  poster_url?: string | null;
  backdrop_url?: string | null;
  runtime?: number;
  genres?: Array<{ id: number; name: string; }>;
  tagline?: string;
  budget?: number;
  revenue?: number;
  in_watchlist?: boolean;
}

interface ToolOutput extends UnknownObject {
  movies?: Movie[];
  id?: number;
  title?: string;
  release_date?: string;
  rating?: number;
  overview?: string;
  poster_url?: string | null;
  backdrop_url?: string | null;
  runtime?: number;
  genres?: Array<{ id: number; name: string; }>;
  tagline?: string;
  budget?: number;
  revenue?: number;
  total_results?: number;
}

const MovieCard = ({
  movie,
  onWatchlistAdd,
}: {
  movie: Movie;
  onWatchlistAdd?: (movieId: number) => void;
}) => {
  return (
    <Card className="group overflow-hidden hover:shadow-2xl transition-all duration-300 border-0 bg-white hover:scale-[1.02]">
      <div className="relative">
        {/* Poster Image */}
        {movie.poster_url ? (
          <div className="relative h-96 bg-gray-100 overflow-hidden">
            <img
              src={movie.poster_url}
              alt={movie.title}
              className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
            />
            {/* Gradient Overlay */}
            <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-90" />

            {/* Rating Badge - Positioned on poster */}
            {movie.rating && (
              <div className="absolute top-4 right-4 bg-black/80 backdrop-blur-sm rounded-full px-3 py-1.5 flex items-center gap-1.5 border border-yellow-400/30">
                <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                <span className="text-white font-bold text-sm">
                  {movie.rating.toFixed(1)}
                </span>
              </div>
            )}

            {/* Watchlist Button */}
            <button
              className="absolute top-4 left-4 bg-black/80 backdrop-blur-sm rounded-full p-2.5 hover:bg-black/90 transition-colors border border-white/30 hover:border-white/50"
              onClick={async (e) => {
                e.stopPropagation();
                await api.saveToList({ movieId: movie.id });
                onWatchlistAdd?.(movie.id);
              }}
              aria-label="Add to watchlist"
              disabled={movie.in_watchlist}
            >
              <Bookmark
                className={`w-5 h-5 text-white ${movie.in_watchlist ? "fill-white" : ""}`}
              />
            </button>

            {/* Content Overlay at Bottom */}
            <div className="absolute bottom-0 left-0 right-0 p-5 text-white">
              <h3 className="text-xl font-bold leading-tight mb-2 line-clamp-2 drop-shadow-lg">
                {movie.title}
              </h3>

              {movie.release_date && (
                <div className="flex items-center gap-1.5 text-sm text-gray-200 mb-3">
                  <Calendar className="w-4 h-4" />
                  <span>
                    {new Date(movie.release_date).toLocaleDateString("en-US", {
                      year: "numeric",
                      month: "short",
                      day: "numeric",
                    })}
                  </span>
                </div>
              )}

              {movie.overview && (
                <p className="text-sm text-gray-200 line-clamp-3 leading-relaxed">
                  {movie.overview}
                </p>
              )}

              {/* Genres */}
              {movie.genres && movie.genres.length > 0 && (
                <div className="flex flex-wrap gap-1.5 mt-3">
                  {movie.genres.slice(0, 3).map((genre) => (
                    <Badge
                      key={genre.id}
                      variant="secondary"
                      className="text-xs bg-white/20 hover:bg-white/30 backdrop-blur-sm border-white/30 text-white"
                    >
                      {genre.name}
                    </Badge>
                  ))}
                </div>
              )}
            </div>
          </div>
        ) : (
          <div className="h-96 bg-gradient-to-br from-purple-500 via-purple-600 to-indigo-700 flex flex-col items-center justify-center relative overflow-hidden">
            {/* Background Pattern */}
            <div className="absolute inset-0 opacity-10">
              <div
                className="absolute inset-0"
                style={{
                  backgroundImage:
                    "radial-gradient(circle, white 1px, transparent 1px)",
                  backgroundSize: "20px 20px",
                }}
              />
            </div>

            <Film className="w-24 h-24 text-white opacity-40 mb-4" />

            <div className="absolute bottom-0 left-0 right-0 p-5 text-white">
              <h3 className="text-xl font-bold leading-tight mb-2">
                {movie.title}
              </h3>

              {movie.release_date && (
                <div className="flex items-center gap-1.5 text-sm text-gray-200 mb-3">
                  <Calendar className="w-4 h-4" />
                  <span>
                    {new Date(movie.release_date).toLocaleDateString()}
                  </span>
                </div>
              )}

              {movie.overview && (
                <p className="text-sm text-gray-200 line-clamp-3">
                  {movie.overview}
                </p>
              )}
            </div>

            {movie.rating && (
              <div className="absolute top-4 right-4 bg-black/50 backdrop-blur-sm rounded-full px-3 py-1.5 flex items-center gap-1.5">
                <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                <span className="text-white font-bold text-sm">
                  {movie.rating.toFixed(1)}
                </span>
              </div>
            )}

            {/* Watchlist Button */}
            <button
              className="absolute top-4 left-4 bg-black/50 backdrop-blur-sm rounded-full p-2.5 hover:bg-black/70 transition-colors border border-white/30 hover:border-white/50"
              onClick={async (e) => {
                e.stopPropagation();
                await api.saveToList({ movieId: movie.id });
                onWatchlistAdd?.(movie.id);
              }}
              aria-label="Add to watchlist"
              disabled={movie.in_watchlist}
            >
              <Bookmark
                className={`w-5 h-5 text-white ${movie.in_watchlist ? "fill-white" : ""}`}
              />
            </button>
          </div>
        )}
      </div>
    </Card>
  );
};

const MovieDetailView = ({ movie }: { movie: Movie; }) => {
  return (
    <div className="space-y-6">
      {/* Hero Section with Backdrop */}
      {movie.backdrop_url && (
        <div className="relative h-64 rounded-lg overflow-hidden">
          <img
            src={movie.backdrop_url}
            alt={movie.title}
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" />
          <div className="absolute bottom-4 left-4 right-4">
            <h1 className="text-3xl font-bold text-white mb-2">
              {movie.title}
            </h1>
            {movie.tagline && (
              <p className="text-gray-200 italic">{movie.tagline}</p>
            )}
          </div>
        </div>
      )}

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Poster and Quick Stats */}
        <div className="space-y-4">
          {movie.poster_url ? (
            <Card className="overflow-hidden">
              <img
                src={movie.poster_url}
                alt={movie.title}
                className="w-full h-auto"
              />
            </Card>
          ) : (
            <Card className="aspect-[2/3] bg-gradient-to-br from-purple-400 to-indigo-600 flex items-center justify-center">
              <Film className="w-24 h-24 text-white opacity-50" />
            </Card>
          )}

          {/* Quick Stats */}
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm">Quick Stats</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {movie.rating && (
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600 flex items-center gap-1">
                    <Star className="w-4 h-4" />
                    Rating
                  </span>
                  <Badge
                    variant="secondary"
                    className="flex items-center gap-1"
                  >
                    <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
                    {movie.rating.toFixed(1)}
                  </Badge>
                </div>
              )}
              {movie.release_date && (
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600 flex items-center gap-1">
                    <Calendar className="w-4 h-4" />
                    Release Date
                  </span>
                  <span className="text-sm font-medium">
                    {new Date(movie.release_date).toLocaleDateString()}
                  </span>
                </div>
              )}
              {movie.runtime && (
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600 flex items-center gap-1">
                    <Clock className="w-4 h-4" />
                    Runtime
                  </span>
                  <span className="text-sm font-medium">
                    {movie.runtime} min
                  </span>
                </div>
              )}
            </CardContent>
          </Card>
        </div>

        {/* Main Content */}
        <div className="md:col-span-2 space-y-4">
          {!movie.backdrop_url && (
            <div>
              <h1 className="text-3xl font-bold mb-2">{movie.title}</h1>
              {movie.tagline && (
                <p className="text-gray-600 italic mb-4">{movie.tagline}</p>
              )}
            </div>
          )}

          <Tabs defaultValue="overview" className="w-full">
            <TabsList>
              <TabsTrigger value="overview">Overview</TabsTrigger>
              {(movie.budget || movie.revenue) && (
                <TabsTrigger value="financials">Financials</TabsTrigger>
              )}
              {movie.genres && movie.genres.length > 0 && (
                <TabsTrigger value="details">Details</TabsTrigger>
              )}
            </TabsList>

            <TabsContent value="overview" className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Synopsis</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-700 leading-relaxed">
                    {movie.overview || "No overview available."}
                  </p>
                </CardContent>
              </Card>
            </TabsContent>

            {(movie.budget || movie.revenue) && (
              <TabsContent value="financials" className="space-y-4">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-lg">Box Office</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    {movie.budget && movie.budget > 0 && (
                      <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <span className="text-sm text-gray-600 flex items-center gap-2">
                          <DollarSign className="w-4 h-4" />
                          Budget
                        </span>
                        <span className="text-lg font-semibold">
                          ${movie.budget.toLocaleString()}
                        </span>
                      </div>
                    )}
                    {movie.revenue && movie.revenue > 0 && (
                      <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                        <span className="text-sm text-gray-600 flex items-center gap-2">
                          <DollarSign className="w-4 h-4" />
                          Revenue
                        </span>
                        <span className="text-lg font-semibold text-green-700">
                          ${movie.revenue.toLocaleString()}
                        </span>
                      </div>
                    )}
                    {movie.budget &&
                      movie.revenue &&
                      movie.budget > 0 &&
                      movie.revenue > 0 && (
                        <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                          <span className="text-sm text-gray-600 flex items-center gap-2">
                            <DollarSign className="w-4 h-4" />
                            Profit
                          </span>
                          <span
                            className={`text-lg font-semibold ${movie.revenue - movie.budget >= 0 ? "text-blue-700" : "text-red-700"}`}
                          >
                            ${(movie.revenue - movie.budget).toLocaleString()}
                          </span>
                        </div>
                      )}
                  </CardContent>
                </Card>
              </TabsContent>
            )}

            {movie.genres && movie.genres.length > 0 && (
              <TabsContent value="details" className="space-y-4">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-lg">Genres</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="flex flex-wrap gap-2">
                      {movie.genres.map((genre) => (
                        <Badge key={genre.id} variant="outline">
                          {genre.name}
                        </Badge>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
            )}
          </Tabs>
        </div>
      </div>
    </div>
  );
};

const LoadingCard = ({
  title,
  description,
}: {
  title: string;
  description: string;
}) => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50 p-6 flex items-center justify-center">
      <Card className="border-0 shadow-xl max-w-md w-full">
        <CardHeader className="text-center py-12">
          <div className="w-20 h-20 bg-gradient-to-br from-purple-100 to-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6">
            <Film className="w-10 h-10 text-purple-600" />
          </div>
          <CardTitle className="text-2xl mb-3">{title}</CardTitle>
          <CardDescription className="text-base">{description}</CardDescription>
        </CardHeader>
      </Card>
    </div>
  );
};

const MovieList = () => {
  const [state, setState] = useWidgetState<ToolOutput>();
  const [loading, setLoading] = useState(true);

  const toolOutput: ToolOutput = useWidgetProps();

  useEffect(() => {
    if (toolOutput && !state) {
      // Update state with movie info (in whatever form it takes) from tool output
      setState(toolOutput);
      setLoading(false);
    }
  }, [toolOutput, setState]);

  const handleWatchlistAdd = (movieId: number) => {
    setState((prevState) => {
      if (!prevState) return prevState;

      // Update movies array if it exists
      if (prevState.movies) {
        return {
          ...prevState,
          movies: prevState.movies.map((movie) =>
            movie.id === movieId ? { ...movie, in_watchlist: true } : movie,
          ),
        };
      }
      return prevState;
    });
  };

  if (!state) {
    if (loading) {
      return (
        <LoadingCard
          title="Loading movie data"
          description="Loading data from The Movie Database"
        />
      );
    } else {
      return (
        <LoadingCard
          title="No data available"
          description="No movie data was found. Try searching for movies or browsing popular titles."
        />
      );
    }
  }

  // Check if this is a detail view (single movie with id)
  const isDetailView = !state.movies && state.id && state.title;

  if (isDetailView) {
    const movie: Movie = {
      id: state.id!,
      title: state.title!,
      release_date: state.release_date,
      rating: state.rating,
      overview: state.overview,
      poster_url: state.poster_url,
      backdrop_url: state.backdrop_url,
      runtime: state.runtime,
      genres: state.genres,
      tagline: state.tagline,
      budget: state.budget,
      revenue: state.revenue,
    };

    return (
      <div className="p-6">
        <MovieDetailView movie={movie} />
      </div>
    );
  }

  // List view
  const movies = state.movies || [];
  const totalResults = state.total_results;

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50">
      <div className="p-6 md:p-8 lg:p-10 space-y-8">
        {/* Header Section */}
        <div className="space-y-2">
          <div className="flex items-center gap-3">
            <div className="w-1 h-10 bg-gradient-to-b from-purple-600 to-indigo-600 rounded-full" />
            <div>
              <h2 className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent">
                MEGA Cool Movies
              </h2>
              {totalResults && (
                <p className="text-sm text-gray-500 mt-1">
                  Showing{" "}
                  <span className="font-semibold text-gray-700">
                    {movies.length}
                  </span>{" "}
                  of{" "}
                  <span className="font-semibold text-gray-700">
                    {totalResults.toLocaleString()}
                  </span>{" "}
                  results
                </p>
              )}
            </div>
          </div>
        </div>

        {movies.length === 0 ? (
          <Card className="border-0 shadow-lg">
            <CardHeader className="text-center py-12">
              <div className="w-16 h-16 bg-gradient-to-br from-purple-100 to-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <Film className="w-8 h-8 text-purple-600" />
              </div>
              <CardTitle className="text-2xl">No Movies Found</CardTitle>
              <CardDescription className="text-base mt-2">
                Try a different search or browse other categories.
              </CardDescription>
            </CardHeader>
          </Card>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {movies.map((movie) => (
              <MovieCard
                key={movie.id}
                movie={movie}
                onWatchlistAdd={handleWatchlistAdd}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default MovieList;

This widget is just React + Tailwind, so you can style and extend it however you like.

The api client is used to save movies to the user’s watch list.

8. Running and testing the app

You’re done building!

Now it’s time to test out the app. First you need to r*efresh your ChatGPT connector* to load up the new tool calls added to the MCP server, then you can try asking ChatGPT questions like:

“Show me upcoming movies.”
“What movies are in theatres near me?”
“Show my watch list.”

ChatGPT will call your MCP tool (e.g. getUpcomingMovies), fetch data from TMDB, return structured content to your widget, render it inside ChatGPT with your React widget.

If you open Gadget, you’ll see your watchlist model populated with TMDB list IDs linked to your user record.

Wrap-up and next steps

You just built a fully interactive ChatGPT app with:

Custom tool calls via MCP
Embedded React widgets Multi-tenant data storage through Gadget
Real movie data from TMDB

This foundation can power any ChatGPT-connected app: news dashboards, e-commerce stores, or productivity tools.

Gadget is building a ChatGPT connection to help speed up building ChatGPT apps. Keep an eye on our blog for an announcement.

If you have any questions, feel free to reach out on Gadget’s developer Discord!

Need more info?

Start building ChatGPT apps on Gadget today

Get started at gadget.new or fork our template.

Introducing autocomponents: Instantly generate beautiful React UIs that come connected to your API

Gadget — Thu, 08 Aug 2024 15:49:09 +0000

TL;DR: Instantly generate extensible React components that come connected to your Gadget API with just one line of code.‍

Starting today, developers can automatically generate fully-functional forms and tables in seconds that can read and write data to your Gadget database. With just one line of code, you can render complex frontend components that use Polaris, with the ability to extend and customize everything exactly to your needs.

Autocomponents let you build and launch beautiful frontends faster than ever, by instantly creating interactive UIs for the most common components in a B2B app. In seconds, you can see your components and run them on our hosted frontends, and get a true sense of how they behave in production so you know exactly what the end user experience is like. You’ll spend much less time building and debugging common components, and more time on the code that matters most for your app.

Currently, there are three autocomponents you can build with: AutoForm, AutoTable, and AutoButton.

AutoForm instantly generates extensible, fully-functional forms for your Gadget actions with a single line of code.

AutoButton lets you easily call any of your backend API actions, along with the required variables passed as a prop. When clicked, your button will run an action, and show a success or error once complete, with a loading spinner displayed while the action is running.

AutoTable automatically generates feature-rich Polaris tables with search, sorting, and even pagination included from the moment your table is created.

Instant, extensible, and boilerplate-free

Autocomponents all come ready to customize and extend. We give you access to all the underlying Polaris components, so you can adjust the layout or properties of your forms and tables to your needs.

AutoForm

By default, Gadget renders AutoForm with the fields and field types defined within your models. It comes with built-in support for complex field types, like rich text and file uploads, model relationships, and even custom action parameters that sit outside of your data model. Instead of writing hundreds of lines of code to handle file storage or actions in your form, all you have to do is build your model and call AutoForm — Gadget handles the rest.

For example, here’s how you could render a form to handle creation of new product model records:

<AutoForm action={api.product.create} />

If you prefer to have fields displayed differently from what you’ve defined in your models, you can customize your form to use whatever field types you want.

Another way to extend forms would be to change the layout. Here’s an example of of how the layout of AutoForm can be customized for the same creation of product model records used earlier:

import { AutoForm, AutoInput, AutoSubmit } from "@gadgetinc/react/auto/polaris";
import { api } from "../api";
import { Card, InlineStack, Text, Divider } from "@shopify/polaris"


export default function () {
 return (
   <Card>
     <AutoForm action={api.product.create}>
       <Text variant="heading2xl" as="h3">
         Add a new product
       </Text>
       <InlineStack gap="200">
         <AutoInput field="title" />
         <AutoInput field="weight" />
       </InlineStack>
       <AutoInput field="image" />
       <Divider />
       <AutoSubmit />
     </AutoForm>
   </Card >
 );
}

Regardless of how you make changes to your forms, validations that you specify on an action’s fields or parameters will be enforced when that action is run. In the event that there are any validation errors, the form will automatically display the appropriate validations to your app’s users in accordance with Polaris style guides. You also have the option to set up custom validations as needed.

AutoTable

When you generate a new table using AutoTable, Gadget will render your table with up to 10 columns, depending on the number fields included in your model.

For example, a table to display products from a store may look like:

<AutoTable model={api.product} />

You can extend AutoTable to show certain fields as columns in your table, or reorder them:

<AutoTable model={api.product} columns={["title", "draft", "image"]} />

You can fetch relationships, and display them within your table. For example, if you wanted to display a table of products along with any variants, you could do that with the following code:

<AutoTable live model={api.product} columns={["title", "draft", "image", "variants"]} />

AutoTable also gives you the ability to run certain actions, like delete or bulk delete, within the table view itself.

You can even include any custom actions in your AutoTable. For example, we can add an export action to our table with the following code:

    <AutoTable model={api.product} actions={[
       {
         label: "Export",
         action: async (records) => {
        // call a global export action
        const ids = records.map(product => product.id);
           await api.export(ids);
         },
       },
     ]} />

And if you still need to refine your table further, customizable cell rendering allows you to show the data you want, exactly the way you want it. Whether it’s a button, icon, slider, image, or anything else you can think of, you can include it with just a few lines of code.

     <AutoTable model={api.product} columns={[
       "title",
       {
         header: "Draft",
         render: ({ record }) => {
           if (record.draft) {
             return <img height="40px" src={cat} />
           }
           else return <img height="40px" src={ogre} />
         },
       },
       "image"]}
     />

Building with AutoButton

AutoButton is best for when you have a simple task or single action that needs to be executed. For example, if you have a list of keywords for your products in Shopify, you may want to remove specific keywords from the list. A button to run a delete action for specific keywords could be rendered using AutoButton.

<AutoButton action={api.product.delete} variables={{ id: 1 }} />

All autocomponents are rendered using Polaris, with new design systems like MUI coming soon.

If Polaris isn’t your style, or you want maximum fidelity and control over your designs, we’ve got you covered. We provide headless React hooks that allow you to take over and build your own UX, while still benefiting from the automated state management and API calls. You can find more details on building with React hooks in our useActionForm docs.

Autocomponents is a true game changer. I don't deal with connecting to my API, writing validations, or managing a bunch of code. Same with tables. I just call my model and Gadget does the rest, so I have more time to play tennis.
— Tanmay Kejriwal, Founder at Shopvana

The magic of a single-stack platform

Normally when building your UI, you would need to manually wire up your frontend, api, and database; you’d read through docs, code up state management, set up component libraries, and deal with never-ending pagination headaches. Hours of work, just to render a simple table or form.

However, with Gadget’s context-aware, full-stack framework, you can avoid adding in all of the glue code and let the platform handle it for you. Gadget generates your API, so we know your actions and how to run them. Gadget powers your database, so we know everything about your records and how to best display them. Gadget is your frontend, so we can generate components for you. And because Gadget constantly updates and regenerates your API as you build, we can update those frontend components automatically as you make changes.

For more details on how to start building with AutoForm, AutoButton, and AutoTable, you can check out the Gadget docs. If you want to learn more about autocomponents, share feedback, or suggest new design systems, you get in touch with us through our developer Discord.

How to start building with new customer accounts in Shopify

Gadget — Tue, 11 Jun 2024 18:52:35 +0000

Shopify recently announced that new customer accounts are being made accessible to developers through the use of customer account UI extensions, which are now in developer preview. This means that Shopify developers can start building apps directly into the customer accounts portal.

But what are they, why should app developers use them, and what can you build with them? We’re here to cover all the details.

What are new customer accounts?

Shopify first launched new customer accounts in January 2023. Like classic customer accounts, they give the customer a way to check in on the status of their orders, subscriptions, addresses, and profile information.

New customer accounts, however, will allow shoppers to sign in with either a one-time code, or through the Shop app. Merchants can even embed links in emails that give customers access to the order index page, order status page, and profile page without requiring any sign-in.

From there, customers can update their customer profile, and the changes will be reflected in the Shopify admin, something that was not available in classic customer accounts. If you want a full breakdown of the differences, Shopify has a handy comparison chart in their documentation.

So why should developers care?

Back in December, Shopify announced that new customer accounts would be made available to app developers through customer account UI extensions. Much like checkout UI extensions, these will be a series of building blocks that merchants can use to enhance and customize their customer accounts pages.

This opens up a whole new world of opportunities for how developers can help merchants create a better experience for their customers.

If you need help getting started, you can identify whether a merchant is using classic or new customer accounts by querying customerAccountsVersion using the GraphQL Admin API.

What can you actually build?

The new customer account UI extensions will be available on the Order Status, Order Index, and Profile pages, as well as in the form of full-page extensions. The Shopify team expects to see a new wave of apps for order tracking, returns, subscriptions, loyalty programs, reviews, and more.

B2B extensions are one of the biggest areas of opportunity for developers looking to build with the new extensions type, since B2B functionality is exclusively supported on new customer accounts. B2B customers are required to use new customer accounts, which means they’ll be spending a lot of time there. Extensions for things like customer-specific catalogs or payment terms would be a great place to start, and Shopify might be keeping an eye out for developers building these, but keep in mind B2B functionality is currently only for Shopify Plus merchants.

Inline extensions can be added to either the Order Status or Profile page, with pre-determined placements throughout the page. These are great for things like the number of loyalty points a customer earned for a specific order, or encouraging customers to leave reviews of their recent purchases.

Order actions menu extensions are buttons that can be added to the Order Status and Order Index pages to allow customers to take action on their orders. Things like re-ordering, or reporting a problem with their order are great examples. Buttons can even link to a modal, to prompt the customer to confirm the action, and bring up any additional information that may be needed to complete an order action.

Full-page extensions allow developers to create unique pages within the customer account experience that will match all of the merchant’s branding, while delivering entirely custom content. Things like wishlists and subscriptions are great examples, and customers will be able to access these full-page extensions without leaving their account or needing to log in again.

How to start building

The Shopify CLI is currently the only way to generate extensions. If you're interested in building with customer account UI extensions, you should also make sure to consider some additional privacy and security measures. You can also follow our app tutorial to see how to build safe, secure customer account UI extensions.

Just like other extension types, customer account UI extensions are deployed to and hosted on Shopify's infrastructure. This means you don't need to worry about managing any additional services to add them to your apps.

However, this also means that an app is a requirement, as merchants will need to a way to install them. If you're looking to distribute any extensions you build at scale, they'll need to be published to the app store.

Out with the old?

As of June 2024, there’s no official deprecation date for classic customer accounts. Shopify will continue to support them for the time being. And they still have features that new customer accounts do not; things like multipass and liquid customizations.

Since new customer accounts are well, new, it’s likely Shopify will continue to add extensibility options as they roll out the feature. For now though, there’s plenty to work with, and early adopters might even have the chance to be featured by Shopify in a co-marketing campaign when customer account UI extensions become available to merchants.

We'll be sharing some detailed guides and tutorials on how to create and deploy your customer account UI extensions, so keep an eye out!

If you want to connect with other developers building with the new extensibility options, you can join the conversation over on our Discord server.

Watch how we build our own customer account UI extension.

Shopify’s product overhaul: 2,000 variants, new GraphQL mutations, and a farewell to REST

Gadget — Mon, 10 Jun 2024 16:18:36 +0000

Shopify’s 2024 Winter Editions focused on improving the foundations of the platform. And what is more foundational to ecommerce than products?

Shopify announced one major change to how products are going to be handled in the platform going forward, which is accompanied by a bunch of changes to the underlying product APIs.

As always, that means many of these changes will affect developers. So let’s dig into what’s different.

100 → 2,000 product variants

At long last, Shopify has finally chosen to increase the product variant limit to 2,000 variants. This is great news for both developers and merchants, as it shifts variant management to Shopify’s infrastructure, so merchants no longer require custom applications to get around the 100 variant limit.

Merchants selling products that naturally have many different combinations and options, such as sizes, colors, and styles, will massively benefit from this limit increase.

The 2,000 variant limit isn’t live for production stores yet, but that doesn’t mean Shopify Partner developers can’t start testing out the changes on a development store.

To start testing the 2,000 variant limit:

Create a new development store
Select the Extended Variants developer preview

Note: Shopify’s documentation calls this preview the Increased Variants developer preview, instead of the Extended Variants naming displayed in the Partners dashboard when creating a new dev store.

Once your new development store is created, you can add up to 2,000 variants per product by adding multiple product options as you normally would. Clothing options are a good place to start when generating test data.

For example, you could create a shirt product that comes in multiple different colors, has a range of different sizes, and has multiple different styles, for example, crew neck, v-neck, henley, and long-sleeved versions. Immediately, by offering 10 colors, 6 sizes, and 6 styles, you’ve created 360 possible variants (10 x 6 x 6) of this single product, which wouldn’t have worked with Shopify’s old 100 variant limit!

All of these variants will be visible as options on the product page in the storefront without any additional changes being required. No changes to Liquid or theme app extensions necessary.

Note: When adding a large number of variants, some additional loading is required on product pages in the admin. This will not be the case on the storefront itself.

Shopify is currently working with select partners to adopt this change in the variant limit and will be rolling this variant increase out across 2024.

Updates for merchandising additional variants

With this increase in variants, merchants will also need to be able to properly merchandize all of the different variants and options that now exist for a single product. They may require dedicated URLs and SEO tags for product options, and certain product options or variants may need to be added to collections that are part of targeted marketing or discount campaigns.

Shopify has launched the Combined Listings app to help display these additional variants in the storefront. It allows for flexibility in listing different options separately and provides proper SEO support for individual options and variants.

Available for Plus merchants only, this app allows merchants to create child products under a single parent product, ensuring that each child has its own dedicated URL, media carousel, and description, while still being included as an option on a single product page.

This means that merchants can take full advantage of the additional variant limit without sacrificing their SEO strategies or losing the flexibility required by some product options.

Product and variant API updates

In addition to the variant limit increasing, the product endpoints and data models are getting an overhaul as well. In version 2024-01, the /product and /variant endpoints will be deprecated in the REST Admin API.

Additionally, the Shopify product data model and GraphQL Admin API are getting an overhaul, with additional fields and mutations being added allowing for bulk changes to product data.

Of particular interest, there is going to be a productSet mutation added that allows for product information to be pushed in bulk from external sources, such as ERPs, to Shopify. Product options are also being elevated to first-class entities in the data model, which means that there will be a set of new mutations and fields for manipulating product option data.

You can read Shopify’s documentation to get all the details on the API changes for the updated product model.

How to get started with Shopify theme development

Gadget — Fri, 07 Jun 2024 15:48:42 +0000

In this guide, we’ll walk you through how to get started with Shopify theme development.

Requirements

Before you get started, you need the following:

The URL of a store you want to work on. We recommend signing up for a Shopify Partner account and creating a new development store when you first get started.
Permission to work on themes for the store you are working on. If you are working on a merchant’s store, you need to make sure that you have a collaborator or staff account that has been granted the Manage themes or Themes permission. If you’re working on a Partner account and a development store, you don’t need to worry about this step at this time.

Anytime a buyer is browsing through products or services offered by a Shopify merchant, they are interacting with the store’s theme. Themes power Shopify storefronts, and unique and attractive themes help drive higher traffic and conversion rates.

If you’re looking to start building your own themes, you have two options. You can either build custom themes for merchants, or build themes that are listed for sale on Shopify’s Theme Store. In either case, it’s easy to get started, as setting up a local development environment for building Shopify themes takes less than 10 minutes and we’re here to walk you through the steps.

Shopify CLI or Theme Kit?

Shopify has two CLI tools that can be used to develop themes: the Shopify CLI and the Theme Kit. We recommend using the Shopify CLI, as this is Shopify’s newest tool for building themes and apps. They’ve released a number of improvements to it in recent months, and Shopify recommends using it for Online Store 2.0 theme development. For vintage themes, Theme Kit can be installed and used instead.

Shopify has a guide for getting set up with the CLI. This guide will cover those steps, and sprinkle in some extra useful info about building themes using the CLI. If you want to use Theme Kit to work on a vintage theme, Shopify has a separate getting started guide.

What about theme app extensions?

Theme app extensions are a way to inject small bits of custom functionality into an existing theme. For example, if you want to add a storefront chatbot or a product recommendation quiz to a theme, you could do so using a theme app extension.

Theme app extensions are also built using the Shopify CLI, but are released as part of a public or custom Shopify app instead of as part of a theme. Merchants can then use Shopify’s theme editor to place the theme app extension somewhere in the storefront.

This guide will not cover theme app extensions. If you are looking to get started building storefront apps using theme app extensions, you can check out Gadget’s product quiz tutorial.

Step 0: Installing dependencies and the Shopify CLI

Some required dependencies need to be installed before you get started with the Shopify CLI. Shopify lists all dependencies on their site: Ruby, Node, and git are required for all operating systems.

Things are dead simple on a Mac, two homebrew commands will install the Shopify CLI as well as any of the required dependencies.


brew tap shopify/shopify
brew install shopify-cli

Windows and Linux developers have some additional required dependencies before the Shopify CLI can be installed globally using npm.


npm install -g @shopify/cli @shopify/theme

Once the Shopify CLI is installed, you can verify that it was installed correctly by running shopify in the terminal, which prints out the current version as well as the available topics and commands. Notice that one of the topics is theme, this is what you will be using to do theme development. If you want to see all the available theme commands, you can do this using shopify theme.

Once the CLI is installed, you can start by cloning an existing theme.

Step 1: Cloning a theme

Now you need to pull down some theme code to your local machine. Navigate to the directory you want to clone your theme in and run shopify theme init. You will be prompted to name your new theme, and then Shopify’s Dawn theme will be cloned into the folder.

If you want to clone a different theme, you can use a --clone-url flag to point to a different repository. For example, shopify theme init –-clone-url https://github.com/Shopify/dawn.git (this also clones Dawn, but you get the idea 😉).

Now that you have a base theme, you can start modifying the template!

Step 2: Start building

With your theme code at the ready, you can start your development server and make some changes to the custom theme. To do this, run shopify theme init –-store <my-store-name> and your local theme code will be synced to the passed-in store. Once the sync is complete, you can preview your theme at http://127.0.0.1:9202.

If you encounter a sign-in form when you click this link, you’ll need to grab the password from the store admin. In the admin, click on Online Store, then Preferences. The password will be on the preferences page. Copy and paste it into the login form, and you should see a preview of your theme on the store!

Hot module reloading works out of the box, so any CSS or section changes will be visible immediately. Note that this preview is only available in Chrome, according to Shopify’s docs! I find that making small changes in sections/image-banner.liquid is a great way to start testings changes out when working on the default Dawn theme. This will make changes that are reflected on the theme’s home page.

Note: If you stop your development server and want to restart it on the same store, you can just run shopify theme dev without the --store flag.

There are some other neat commands included in the CLI that help with theme development. One notable example, running shopify theme check runs Theme Check, which is a linter for the Liquid and JSON files in your theme. Theme Check will identify any errors in your theme, such as syntax errors, unused variables and snippets, and even points out potential performance issues. Running Theme Check to catch these errors before pushing or publishing your theme is probably a good idea!

When building themes in your local editor, it is also handy to install extensions to help write Liquid. If you are working in VSCode, Shopify has a Liquid extension that helps with syntax highlighting, formatting, and autocompletion. Bonus: this extension also works for theme app extensions.

Step 2.5: Learn Liquid

This can’t be covered in a couple of paragraphs in a blog post.

In fact, it can’t be covered by a single standalone blog post. At least, a blog post of reasonable length.

Shopify’s themes are built with Liquid, which is their templating language. Shopify has plenty of Liquid documentation, and there are entire courses, including one offered by Shopify, that focus on teaching developers how to build themes. Because of this, I’m not going to cover any Liquid details here. But if you are getting into theme development, you will want to make sure you have a decent grasp of Liquid and how it can be used to build themes.

Step 3: Pushing and publishing themes

Once you have made some changes to your theme, you can push it up to your store. You can also use the CLI to publish the theme so that it is the live version that buyers will see when they visit the store.

To push your theme to a store, you can run the command shopify theme push -–unpublished. Using the --unpublished flag will create a new theme for the store. You will be prompted to give your theme a name, and this name will appear in the admin as the name of the new theme. You only need to include --unpublished the first time you push a new theme. Any additional changes can be pushed without the flag included.

Once your theme is pushed, you can see it available in the store admin under Online Store → Themes. Merchants can customize the theme using the available theme options by clicking on the Customize button. Clicking on the ellipsis (...) button and then selecting Edit code, allows you to see all of your theme’s code files, which is where you can make unique customizations for a store, if desired.

When a theme is published, it becomes the live theme that buyers will see when they visit the store. There are two ways to publish a theme, clicking the Publish button in the admin or running shopify theme publish in the CLI. Running the command in the CLI prompts you to select the theme you want to publish, which makes it easy to quickly change the theme that’s live on the store.

This was a quick, end-to-end overview of setting up a Shopify theme development environment. If you have any questions about setting up your environment (or building custom Shopify apps) join Gadget’s developer Discord and ask.

What are Shopify admin UI extensions?

Gadget — Thu, 06 Jun 2024 17:19:24 +0000

Shopify admin UI extensions are an easy way to customize how merchants can interact with the Orders, Products, and Customers pages.

By now, you’ve probably heard about Shopify’s decision to move away from Scripts and Liquid customizations, and towards Shopify Functions and extensions. A few extension types have been released in the past year, with checkout UI extensions being the most notable, as Shopify announced that they would replace checkout.liquid when it’s deprecated. Because extensions make it easy to read and request data stored in Shopify and surface it to merchants, they’ve been extended to other areas of Shopify as well – including the admin.

The Shopify admin is where merchants spend most of their time, so it only makes sense that this would be a place that needs an extra layer of customization. With admin UI extensions, merchants can tailor their Shopify admin to work for their specific store needs. For developers and agencies building custom apps, this is a big deal, so let’s talk about what admin UI extensions are and how to use them.

What are admin UI extensions?

Shopify admin UI extensions were first announced during Summer Editions 2023, in an effort to standardize how developers and agencies customize the Shopify admin UI, and create the best possible experiences for merchants. Admin extensions give developers the option to add custom blocks and actions to the existing Orders, Products, and Customers pages. This means that app developers can add custom UIs and actions to the existing Shopify admin portal instead of designing and building out additional workflows and pages in a custom-embedded app.

Currently, there are two types of admin UI extensions you can build with: action extensions and block extensions, which can be created using the Shopify CLI 3.48 or later.

An example of how a merchant would navigate to an admin extension in Shopify

Admin action extensions

If you’re looking to add new ways to let merchants quickly customize orders, products, or customers, admin action extensions are a great place to start — and the good news is that these are generally available, which means you can start using them in your public and custom apps right away.

Shopify has released a suite of action-based components developers can embed in the Shopify admin, including buttons, forms, date pickers, and a variety of other field types. These are all used to make changes to an individual resource, for example logging complaints that have come in for certain products. Action extensions will appear in the More Actions section in the top right of a resource details page, for example, a specific order or product. They can also appear on the overview pages for products or orders for bulk selection actions. From there, merchants can make changes which will instantly be reflected on the order, product, or customer resource.

Tip: We recommend communicating where merchants can access admin extensions in some of your app onboarding materials!

Admin block extensions

Block extensions, on the other hand, are used to add additional context and information to the admin, making your apps more integrated with Shopify. Rather than having to navigate to your app interface, merchants will be able to see and interact with the information from your app directly in the admin. Block extensions give merchants an inline card on the product/order/customer page that can be used to display or change custom data unique to your app. Instead of navigating a separate embedded admin app, all relevant data can be viewed by merchants on a single page.

Bonus: You can call your action extensions from within block extensions!

Extending custom apps with admin UI extensions

If you’re working with merchants on custom apps and internal tools, admin UI extensions are an easy way to integrate the added functionality they’re looking for into an interface they’re already familiar with. Although block extensions are still in developer preview, you can start building with them so that once they become generally available, you’re able to quickly deploy them to any merchant clients. In the meantime, admin action extensions are available and ready to be added to your apps to extend the order, product, or customer resources directly in the admin portal.

Many of your existing custom apps may benefit from being connected more directly into the Shopify admin. If the tools you’ve built for your clients regularly require modifying things like products or orders, check to see if any of the new components could help streamline those workflows. Your merchant clients will thank you for saving them from the tedious task of flipping between your app interface and the admin portal.

If you’re looking for a place to get started with Shopify admin UI extensions, you can follow along with our build of a VIP customer tagger. We use the Shopify CLI and Gadget to combine customer segment template extensions with admin UI extensions in just 10 minutes.

If you have any questions, feedback, or just want to connect with a community of other Shopify developers, stop by our Discord and say hi.

What are Shopify theme app extensions? (and how to build with them)

Gadget — Tue, 04 Jun 2024 19:33:10 +0000

When you think of a Shopify app, there’s a good chance you’re thinking of one of two things: an app that helps a merchant optimize things behind the scenes, like an analytics tool, or an app that adds buyer-facing functionality to the storefront. If you think of the latter, then you’re probably thinking of a theme app extension.

What are theme app extensions?

Shopify theme app extensions are bundles of Liquid blocks, static assets, and JavaScript snippets that allow merchants to extend and customize the functionalities of their Shopify themes. These extensions allow developers to easily add dynamic modules and additional features into a store without the need for extensive theme modifications.

Because they exist outside of the core theme, theme app extensions enable developers to maintain the integrity of the core theme while making updates or changes. This ensures that modifications are easier to manage, reducing the likelihood of conflicts and errors. Merchants can place and edit the theme extension anywhere in their store using the theme editor, instead of diving into a theme’s Liquid template.

Themes vs apps

In order to fully understand theme app extensions, we have to go back to Shopify basics, because it’s important to really understand the difference between apps and themes. Themes, essentially, are the face of a Shopify store. They provide the layout and overall look and feel of the interface a shopper interacts with as they browse through products. Apps, on the other hand, give a Shopify store added features and functionality.

For a long time, any apps that wanted to inject new functionality into a theme would require merchants to manually edit the theme code upon install. This, obviously, was not ideal. If the app was uninstalled, entire sections of a store could break. Or, if the code was edited incorrectly, the merchant would run into problems that they likely didn’t know how to fix. Overall, it was a necessity, but we should all be relieved that there’s now a better way, and that is where Shopify theme app extensions come in.

Theme app extensions are the way Shopify plans to have themes and apps overlap moving forward. They provide developers with a controlled way to customize a theme, without requiring merchants to manually edit their theme code. This avoids any potential integration bugs, maintaining the integrity of the theme so all future updates are supported without issue, and the app is automatically removed from the theme when uninstalled, without the need for manual code cleanup. In order to use theme app extensions, it’s important to identify whether a merchant is using a vintage theme or Online Store V2, as they are only compatible with 2.0 themes.

Using theme app extensions

Just like with other extension types, theme extensions allow Shopify to standardize the experience for merchants. They offer a cleaner onboarding experience for public apps, because everything is standardized and automated, and for custom apps, it means less hand-holding.

There are two primary types of theme app extensions: App blocks and app embed blocks.

App blocks are blocks of code that inject inline content onto a page to extend a theme. Merchants can add app blocks to a compatible theme section, or as wrapped app blocks that add your app’s functionality directly into a theme. They allow merchants to inject their apps directly into a theme, while giving the merchant control to modify, add, remove, or reposition the app block using Shopify’s built-in storefront editor. To add app blocks to a section, a theme will need to include a generic block of type @app in the section schema. You can find an example in Shopify’s documentation. App blocks only work for themes on Online Store 2.0. Merchants using vintage themes still need to manually copy and paste Liquid and JavaScript code snippets to their theme.

App embed blocks are used when storefront apps do not require a UI component, or use a popup or floating element instead of inline functionality. Keep in mind that by default, app embed blocks are deactivated upon install, and merchants will need to manually activate them. If this is your first time working with app embed blocks, read our guide to make sure your app embed blocks are running properly. App embed blocks work for both vintage and Online Store 2.0 themes, no copy-paste is required by the merchant.

When using either type of theme app extensions, your application can integrate Javascript, CSS files, or other static assets such as images, directly within an /assets subdirectory, which allows Shopify's CDN to distribute your content on your behalf, so you don’t have to worry about performant load times for your app components or managing your assets.

Examples of theme app extensions

Whether it's improving navigation or optimizing product pages, extensions allow you to customize a Shopify store to a merchant’s specific needs. If you’re looking for ideas on how you can use theme app extensions in your apps, we’ve got a few suggestions!

Product recommendation quizzes can be a great way to help merchants increase conversion rates. By suggesting products based on a buyer’s own preferences or interests, you’re able to offer much more personalized recommendations, and they’re more likely to buy. You could even go a step further by creating a bundle based on the quiz results to increase AOV. You can check out our forkable Shopify product quiz template to get a jump start.

Chatbots are a great way to help merchants hop on the AI bandwagon, and provide personalized recommendations to shoppers as they browse. By leveraging store knowledge, prompts, and context, you can have a chatbot that’s tailor-made for a specific store. We have a step-by-step tutorial to build a storefront chatbot with OpenAI.

Customer reviews will quickly provide social proof on product listings to build trust and increase conversion. If you support buyer-submitted photos, it can create a sense of authenticity, and has been shown to improve conversion rates.

---

Shopify theme app extensions have substantially changed the way developers can enhance Shopify themes. They provide better integration, smoother updates, and simple app installs and removals.

If you want to build using theme app extensions for your next app, Gadget makes it easy. You can sign up for free to start building, or connect with the community over on the Gadget Discord.

How this Shopify Plus agency increased revenue by 30% and doubled their staff

Gadget — Tue, 02 Apr 2024 04:00:00 +0000

The problem

For years, the Craftberry team has worked to build a strong relationship with their clients. They’ve consistently delivered high-quality work, providing Shopify merchants with theme development and customizations. Despite being a small team, their workload was steady, which was both a blessing and a curse.

With all the time they spent supporting existing clients, the agency was stunted in its growth. The team had been building themes for their clients for years, but they wanted to expand their efforts to include more custom app development, giving their clients more flexibility in how they could customize their stores. They found themselves pouring too much time into their backlog of requests or maintaining existing projects, which prevented them from expanding into new services.

The more time they spent on their existing clients, the less time they had to take on full-stack app development. Maintaining any new projects they chose to pursue would also be out of the question. It was a losing effort.

Then Preslav Nikov, founder and CEO at Craftberry, came across Gadget through a LinkedIn post. One of his connections was boasting about how much time Gadget had saved their team, and how easy all the setup was. Skeptical but hopeful, Preslav decided to see if the tool would truly save as much time as it claimed.

The solution

As a first project, Preslav decided to experiment with a low-priority app request from a client, that until now, the team had never found the time to build. The project consisted of creating a fundraiser leaderboard for Bang Cookies that would allow schools to host fundraisers, while students could track how much money they had raised. The app would track and highlight top contributors based on how many cookies they had sold, fostering competition and engagement within each school or district.

“That first project was instantly a success. It was immediately clear that Gadget is really powerful.” Preslav shared. “It just makes it so easy to set up and build an app. It removed the barrier by giving us all the infrastructure and all of the functionalities we’d never had time to build.” Gadget even offered live support and pair programming to help them out when they ran into problems. Suddenly, custom app development was an option for Craftberry and their clients.

Without Gadget, the team only had one developer who was comfortable working with AWS. Because Gadget offered fully hosted infrastructure, including a pre-packaged backend and frontend, the team could completely skip the setup for every custom app. But beyond that, all of the scaling and maintenance was handled for them — something that had been holding them back with their existing clients. And with a built-in Shopify connection, there was no question, this tool would be a game changer.

They began using it for all the projects they hadn’t had a chance to tackle. Preslav says, “Before starting to use Gadget, we didn't do as many private app builds, just because the barrier change was higher. And now with Gadget, it's much easier for us. We’re taking on more projects and solving many more client problems.”

The results

In just a few weeks, the team could see Gadget would be a major contributor to their growth.

More projects
With Gadget, the team was able to finally take on new challenges because it cut their app build time in half. “Projects that previously would have taken us 200 hours were only taking 100 hours. Gadget literally doubled the number of projects we could ship.”

Without Gadget, there was only one developer that could build full-stack infrastructure from scratch. Since Gadget instantly provides a fully connected backend and frontend, suddenly the whole team of developers at Craftberry can dive into custom app development, meaning they have officially expanded their offerings to include app development.

The team is no longer bogged down by a repetitive workload, and the team has grown significantly. According to Preslav, “Since starting to use Gadget, we’ve gone from a team of 10 to a team of 22.”

“There’s just less room for error with Gadget. Because everything was built to work together, there’s a much lower risk that anything will break unexpectedly.” Preslav says. “Gadget is a competitive advantage, especially when it comes to building backend functionalities and apps. It's stable, there are less bugs, less time for QA and troubleshooting. It has totally replaced AWS for our custom apps.”

More revenue
The expansion into app development has directly translated to more clients, and of course, more money. Since introducing app development into their business, Craftberry has seen a huge jump in revenue in just the past year. “Gadget opened up a whole new channel for us, and we’ve seen more than a 30% increase in revenue as a direct result of Gadget projects. Indirectly, there’s been even more.”

Because projects now take half the time to complete, Gadget has also equipped the agency with some additional negotiation power. Craftberry can provide a higher level of service to their clients at a lower cost by charging on a per-project basis. They’ve been able to drop their prices while increasing their margins, which means their clients pay less, while Craftberry still makes more. It’s a win/win all around.

Overall, Gadget has proven to be a game-changer for Craftberry, allowing them to expand their offerings, take on more projects, and achieve significant revenue growth.

About the agency

Craftberry is a Shopify Plus agency that has been working with merchants since 2015. They’ve launched more than 700 projects, including store-wide themes, minor liquid customizations, and full-stack custom Shopify apps. They assist merchants with everything that goes into running a Shopify store, including engineering, design, general strategy, and overall customer experience.

How to create Shopify customer segment template extensions

Gadget — Fri, 26 Jan 2024 14:54:00 +0000

Shopify customer segments serve as a powerful tool to organize your large pool of customer data into smaller, more manageable groups. These segments can be helpful for conducting targeted marketing activities, understanding customer behavior, and looking for trends to help you figure out what the next best step for your store is.

Customer segment template extensions provide a structured way to define queries that merchants can use to create new customer segments based on their specific criteria. Shopify provides some pre-defined templates for you, but many merchants will want their own custom segments for organizing their customer data.

In this step-by-step guide, we'll walk you through what these extensions are, how they seamlessly integrate with Shopify's admin action extensions, and how you can leverage them to build unique apps from scratch, or enhance the functionality of your existing Shopify apps.

Now, let's roll up our sleeves and create a custom customer segment template extension.

Create your extension

To get started, create a new app using the Shopify CLI. Run yarn create @shopify/app in your terminal. Make sure to select the extension-only app template (not the Remix template) since we're focusing on customer segment templates and admin action extensions.

Next, generate the customer segment template extension by navigating to your new app directory and using yarn generate extension. Choose the customer segment template extension type and opt for JavaScript React as your preferred language.

Install the app

To make sure everything is working as it should, you’ll want to install the app on your development store. Run your app using yarn run dev and you should be prompted to open the Shopify Developer Console. Copy the “App home” preview link, open the preview URL in a browser, and follow Shopify’s prompts to install your app. Now, you should be able to find your customer segment template in your dev store, under the Customers page.

‍Customize your customer segment template

In the generated code, you’ll find an extensions folder. You should have a shopify.extension.toml file, which you can use to change your extension settings, a package.json file, and in the source folder, you’ll find your CustomerSegmentTemplate.jsx file.

import {
  reactExtension,
  CustomerSegmentTemplate,
  useApi,
} from "@shopify/ui-extensions-react/admin";

// The target used here must match the target used in the extension's toml file (./shopify.extension.toml)
const TARGET = "admin.customers.segmentation-templates.render";

export default reactExtension(TARGET, () => <App />);

function App() {
  // The useApi hook provides access to several useful APIs like i18n, close, and data.
  const { i18n } = useApi(TARGET);

  const query = `customer_tags CONTAINS 'upsell_accept'`;

  return (
    // The CustomerSegmentTemplate component provides an API for setting the title, description, date, query, and query to insert of the segmentation template.
    <>
      <CustomerSegmentTemplate
        title={i18n.translate("title")}
        description={i18n.translate("description")}
        createdOn={new Date("2023-08-15").toISOString()}
        query={query}
        queryToInsert={query}
      />
    </>
  );
}

Note the query and queryToInsert properties on the CustomerSegmentTemplate component. The query field is the preview query that is shown in the templates drawer. The queryToInsert field, however, is what is actually added to the filter box on the customer page. You’ll want to customize queryToInsert with the details your merchant will need, for example Product ID, to create your segment.

Create and apply a segment

Once you’ve added the necessary fields for your segment, go back to the Customers page in your dev store and use your custom template to filter customers based on specific criteria, for example, products purchased. Save this filter as a segment for future use.

‍

Here is what your customer segment template extension should look like

Adding admin action extensions for custom actions

Now that we have our customer segments set up, let's enhance our app by adding admin action extensions for custom actions.

Stop running your app and generate a new extension using yarn generate extension. Choose the admin action extension type, and once again, opt for JavaScript React as the language.

Modify the generated TOML file to set the target to admin.customer-segment-details.action.render. Adjust the action extension code to suit your custom logic for running actions on customers within a segment.

Test the admin action extension

Restart your app and refresh your page. Select your customer segment and observe the presence of your admin action extension. Use the extension to fetch customer data and run custom actions, such as sending emails or applying discounts.

Action is available to run against the segment, simply click the “Use Segment” button
‍

...and then run your custom action against customers in that segment!

Using multiple templates in one extension
You can always experiment with adding multiple customer segment templates to a single extension for better flexibility. Let's explore a real-world example where we extend an existing app for post-purchase upselling

Tag customers who accept an upsell offer with a unique tag.
Create a customer segment template based on this tag.
Use an admin action extension to offer discounts to customers within this segment.

And you’re done! You can now build Shopify customer segment template extensions and admin action extensions. For further details and troubleshooting, you can read through Shopify's documentation and tutorials.

If you have questions, you can join the Gadget Discord. We’re always happy to discuss Shopify extensions and Gadget. Until next time, keep building more and coding less with Gadget!

Fork, customize, deploy: Get extensible Shopify app templates to jumpstart your next build

Gadget — Tue, 23 Jan 2024 21:30:23 +0000

TL;DR: You can now instantly fork, extend, and deploy a collection of fully customizable app templates with Gadget. Setup guides, easy-to-use docs, and best practices baked into every build.

New apps are released to the Shopify app store every day, and a lot of the time they’re variations on the same popular use cases. Because no matter how many options are available, there will always be merchants who want something different, and there will always be a need for custom apps. Gadget is introducing a suite of app templates based on popular use cases, to give Shopify developers the option to skip most of their app setup.

Each template includes all of the infrastructure, models, actions, and code you need to power your app. In seconds, you can go from having no project to a fully functional app deployed and installed on a Shopify store. Gadget templates let you offload the repetitive parts of your app builds by providing a high-level starting point that has all of the basic functionality built-in, but is designed to be fully customized and extended in code.
‍

"With Gadget’s templates, we can save weeks of work by forking a starting point that already includes all of the boilerplate features, and lets us focus on the customizations the merchant desires."
— Jonathan Moore, Style Hatch

The new product quiz template, for example, gives developers access to a fully customizable version of a common use case. Many Shopify merchants want to personalize their store and recommend products based on a buyer’s needs or interests. By default, Gadget’s product quiz template includes the code to run theme app extensions, and can be installed on a store immediately. It gives merchants a tool to create their own questions and recommend a product for each answer, but it also comes with functional code and instructions on how to set up your actions to extend the logic that powers a quiz. You can quickly add features like automatic discounts, or recommend collections instead of individual products, and when you fork the template, it includes all of the models and backend logic required to run. It’s yours to extend and customize as you like, including the UI and admin workflows.

A preview of how the product quiz template works once installed, with no customizations.

Style Hatch, for example, recently launched a product quiz in the form of a shade finder for their client Kosas Cosmetics. The agency founder, Jonathan Moore, worked to build the app in just three weeks with Gadget. “We often see merchants request similar apps, like custom product recommendation apps, and find ourselves spending a lot of time doing repetitive work. With Gadget’s templates, we can save weeks of work by forking a starting point that already includes all of the boilerplate features, and lets us focus on the customizations the merchant desires."

Fork and launch, again and again

Rather than spending your time constantly building and rebuilding the same projects, Gadget templates give you a way to instantly spin up an app that’s built for your specific use case, without worrying about the setup or maintaining the boilerplate code to power it. All you have to build are the custom features and interfaces for your individual clients.

Once you’ve made a template your own, you can fork the customized version again and again, abstracting away another layer of repetitive code. By giving you the tools to automate your specific processes, Gadget templates allow you to complete and ship projects in a fraction of the time, so you can build a thousand apps for a thousand merchants without breaking a sweat.

Join us for a live 20 minute demo on how to use and extend the new templates when we take our new Product Quiz template from fork to deploy.
Thursday, January 25 at 10:00 am ET
‍Register now →

Brendan Micallef, the Design & Technical Director at Head On, used a Gadget template to build a fully-custom product quiz that could quickly be adapted for regional sites when their client was working on a tight deadline. "We used the Gadget product quiz template to power one of our recent projects for a client. The template gave us the flexibility to implement a Shopify app with ease, at a level we could easily maintain and manage across multiple stores. Overall, it took us just a few hours to customize and deploy."

Each of the new Gadget templates includes straightforward documentation, clear setup instructions, and built-in best practices. The setup instructions provide detailed steps for extending and customizing a template to quickly build an app that meets specific merchant needs, whether you’re building apps for individual merchants or public use. All the new templates were built by the people who know Gadget best: the Gadget development team. Each one gives you code that follows Gadget and Shopify’s best practices, takes advantage of all of our latest features and tooling, and runs on the latest version of the Shopify API, Polaris, and the Gadget framework. All of the roles and permissions for templates are formatted with the proper security practices in mind to ensure that sensitive data is only accessible by authorized users.

The template gave us the flexibility to implement a Shopify app with ease, at a level we could easily maintain and manage across multiple stores.
— Brendan Micallef, Head On

Templates are also a great way to learn how to optimize your apps in Gadget. All the documentation comes with an overview of the application’s architecture, providing you with a roadmap to see which code files contain key logic and which models to look at. By exploring the documentation and setup and extending existing functionality, developers working on their first Gadget project have a real-life example of how to build using the Gadget framework.

Recreate on repeat

If you want to use one of the templates for your next project, it’s easy to quickly fork, customize, deploy, and use it on a live store.

Fork & install
Once you fork a template, the first thing you’ll want to do is connect to Shopify and install your app on a store. Because every Gadget template is set up to automatically sync all the necessary data upon connection, you’ll instantly have the opportunity to start using the app. Not forking a Shopify app? Then no setup is required, you can preview your app and start customizing right away.

Customize & extend
After you’ve forked a template, it’s yours to change as you like. You own the project, so it’s up to you to add, edit, and remove any features. You can customize the UI and frontend using React, and extend the backend logic in Node.js. The detailed docs and app architecture give you a roadmap of all the important files and models so you know where to focus your attention to start customizing.

Deploy & maintain
Once you’ve made a template yours, like all Gadget apps, you can deploy your project in a single click. When it’s live, Gadget’s auto-scaled infrastructure makes it easy to grow with a store, and the platform regularly provides easy migrations to the latest versions of Shopify’s API, so you’re not left with tedious maintenance.

10 new app templates

Each one of our new templates includes all of the Gadget features you know and love, including full-stack architecture, built-in auth, third-party connections, and more. We’ve introduced templates for building Shopify, web apps, and OpenAI-powered applications.

Product quiz
Recommend products based on how buyers answer a series of questions. This template uses tools like useActionForm to reduce the amount of code in your apps, optimizing those requests you get for shade match quizzes from makeup brands. Extend it by using the answers to apply custom filters to a product catalog, or suggest the perfect product bundle.

Explore this template →

Pre-purchase upsell
Let merchants choose products to upsell and have them appear at checkout. This build combines Shopify admin UI extensions and checkout extensions to create an inline upsell offer on checkout. One way you could extend this could be as a way to enter customers into a contest.

Explore this template →

Product tagger
Need to quickly tag products or create collections? The product tagger is a great way to see how Gadget can be used across Shopify to customize a store. You could add a layer by using OpenAI to create smart tag suggestions.

Explore this template →

Billing templates x3
Whatever pricing model you use, we’ve got a billing template to suit your needs. Fork and customize our monthly subscription, usage-based, and one-time charge templates for your next public Shopify app.

Chat GPT Clone
Explore how Gadget can be used to build your own AI chatbot. This template uses the built-in OpenAI connection and comes with data models and backend logic built-in so you can learn how to work with generative AI. Add your own domain knowledge, prompts, and context so you can have a chatbot that works for your business.

Explore this template →

CRUD Blog with auth
See how Gadget handles CRUD actions when it comes to public and protected routes. This template comes with a pre-built blog authors can publish to and readers can view. Consider pairing it with notification emails whenever a new post is published.

Explore this template →

Screenwriter GPT
Maybe you want to explore how vector embeddings and response streaming work in Gadget, or maybe you want to break into Hollywood. This template comes with extensible logic and a built-in OpenAI connection to create the movie scenes of your dreams.

Explore this template →

Start with TailwindCSS
Create a Gadget web app that’s been restyled with TailwindCSS. Start building your custom app theme in the included tailwind.config.js file. From there, you can build any web app you can think of, like a project that lets your non-developer friends submit their business ideas for the next crypto app, and automatically tells them not a chance.

Explore this template →

You can find the full list of Gadget app templates here.

We’ll continue to release more templates and support more use cases so developers can build and learn faster with Gadget. If you have requests or ideas for new templates or you have feedback on the current ones, we want to know! You can share your suggestions, get updates on new template releases, and connect with the team over on our Discord.

DEV Community: Gadget

We ran vinext (Next.js on Vite) inside a Gadget app

The idea

Starting with a normal Gadget app

Making Vite happy

Letting an agent do the migration

Look ma, no Next!

Building HubSpot apps in 2025: What’s new, what’s changing, and how to get started.

The new HubSpot app environment

Extensible App Cards

App settings & app home

Authentication

Start building Hubspot apps on Gadget

Tutorial: Build a ChatGPT app using OpenAI's Apps SDK and Gadget

How ChatGPT apps work

1. Create a new project

Understanding the MCP server

2. Connecting your app to ChatGPT

3. Add a watchlist data model

4. Adding the saveToList action

5. Connecting to The Movie Database (TMDB)

6. Registering MCP tools for movie endpoints

7. Building the React widget

8. Running and testing the app

Wrap-up and next steps

Need more info?

Start building ChatGPT apps on Gadget today

Introducing autocomponents: Instantly generate beautiful React UIs that come connected to your API

Instant, extensible, and boilerplate-free

AutoForm

AutoTable

Building with AutoButton

The magic of a single-stack platform

How to start building with new customer accounts in Shopify

What are new customer accounts?

So why should developers care?

What can you actually build?

How to start building

Out with the old?

Shopify’s product overhaul: 2,000 variants, new GraphQL mutations, and a farewell to REST

100 → 2,000 product variants

Updates for merchandising additional variants

Product and variant API updates

How to get started with Shopify theme development

Requirements

Shopify CLI or Theme Kit?

What about theme app extensions?

Step 0: Installing dependencies and the Shopify CLI

Step 1: Cloning a theme

Step 2: Start building

Step 2.5: Learn Liquid

Step 3: Pushing and publishing themes

What are Shopify admin UI extensions?

What are admin UI extensions?

Admin action extensions

Admin block extensions

Extending custom apps with admin UI extensions

What are Shopify theme app extensions? (and how to build with them)

What are theme app extensions?

Themes vs apps

Using theme app extensions

Examples of theme app extensions

---

How this Shopify Plus agency increased revenue by 30% and doubled their staff

The problem

The solution

The results

About the agency

How to create Shopify customer segment template extensions

Create your extension

Install the app

‍Customize your customer segment template

Create and apply a segment

Adding admin action extensions for custom actions

Test the admin action extension

Fork, customize, deploy: Get extensible Shopify app templates to jumpstart your next build

Fork and launch, again and again

Recreate on repeat

10 new app templates

3. Add a `watchlist` data model

4. Adding the `saveToList` action