Gadget

https://docs.gadget.dev/
Admin
Gadget is a full-stack application framework that helps developers build web apps by providing core...
Tokens:588,033
Snippets:6,395
Trust Score:9
Update:1 month ago
Show doc for...
Tokens:
Raw
### Add route example

Source: https://docs.gadget.dev/reference/ggt

Example of adding a GET route.

```sh
$ ggt add route GET howdy
```

--------------------------------

### Start Local Development from App Directory

Source: https://docs.gadget.dev/guides/development-tools/cli.md

Once `ggt` is installed globally and you are inside your local app directory, you can start the development sync with a simple `ggt dev` command.

```shell
cd ./example-app
ggt dev
```

--------------------------------

### Add action examples

Source: https://docs.gadget.dev/reference/ggt

Examples of adding actions to the project.

```sh
$ ggt add action post/publish
```

```sh
$ ggt add action audit
```

```sh
$ ggt add action notifications/sendSms
```

--------------------------------

### Add model examples

Source: https://docs.gadget.dev/reference/ggt

Examples of adding models with various configurations.

```sh
$ ggt add model post
```

```sh
$ ggt add model post title:string body:string
```

```sh
$ ggt add model blogs/post
```

--------------------------------

### Shopify connect examples

Source: https://docs.gadget.dev/reference/ggt

Examples of configuring the Shopify connection.

```sh
$ ggt shopify connect
```

```sh
$ ggt shopify connect --app-name my-shop
```

```sh
$ ggt shopify connect --shopify-organization-id 123456789
```

--------------------------------

### Installation

Source: https://docs.gadget.dev/reference/shopify-extensions.md

Instructions for installing the Gadget JS client and the @gadgetinc/shopify-extensions package.

```APIDOC
## Installation

This package is a companion to the JavaScript API client for your Gadget app. First, install the JS client by setting up the Gadget NPM registry and then installing the client.

### Yarn
```bash
yarn config set @gadget-client:registry https://registry.gadget.dev/npm
yarn add @gadget-client/example-app
```

### NPM
```bash
npm config set @gadget-client:registry https://registry.gadget.dev/npm
npm install @gadget-client/example-app
```

Refer to your app's API docs for full installation instructions.

Once the JS client is installed, install the `@gadgetinc/shopify-extensions` package:

### Yarn
```bash
yarn add @gadgetinc/shopify-extensions
```

### NPM
```bash
npm install --save @gadgetinc/shopify-extensions
```
```

--------------------------------

### Add environment example

Source: https://docs.gadget.dev/reference/ggt

Example of adding a new development environment.

```sh
$ ggt add environment dev-2 --env development
```

--------------------------------

### Installation

Source: https://docs.gadget.dev/reference/react-bigcommerce.md

Instructions for installing the @gadgetinc/react-bigcommerce package.

```APIDOC
## Installation

For Gadget apps that have a BigCommerce connection, the `@gadgetinc/react-bigcommerce` package is automatically installed.

If you need to install the package manually, you can do so with `yarn`:

```bash
yarn add @gadgetinc/react-bigcommerce
```

Gadget apps use `yarn` as the package manager.

If you are adding `@gadgetinc/react-bigcommerce` to a non-Gadget app, you can use the package manager of your choice.
```

--------------------------------

### Add action with context examples

Source: https://docs.gadget.dev/reference/ggt

Examples of adding actions with explicit context namespaces.

```sh
$ ggt add action model/post/audit
```

```sh
$ ggt add action action/post/audit
```

--------------------------------

### Custom Router Setup with Gadget Provider

Source: https://docs.gadget.dev/reference/shopify-app-bridge.md

This example demonstrates setting up a custom router using createBrowserRouter and createRoutesFromElements from react-router. It includes a basic layout, index route, and a catch-all 404 route. The GadgetProvider is used within the Layout component to handle authentication and App Bridge initialization.

```typescript
import {
  AppType,
  Provider as GadgetProvider,
  useGadget,
} from "@gadgetinc/react-shopify-app-bridge";
import { NavMenu } from "@shopify/app-bridge-react";
import { useEffect } from "react";
import {
  Link,
  Outlet,
  Route,
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
  useLocation,
  useNavigate,
} from "react-router";
import { api } from "../api";
import Index from "../routes/index";

function Error404() {
  // use navigation hooks to handle 404 pages for undefined routes
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    const appURL = process.env.GADGET_PUBLIC_SHOPIFY_APP_URL;

    if (appURL && location.pathname === new URL(appURL).pathname) {
      navigate("/", { replace: true });
    }
  }, [location.pathname]);

  return <div>404 not found</div>;
}

function App() {
  // define routes
  const router = createBrowserRouter(
    createRoutesFromElements(
      <Route path="/" element={<Layout />}>
        <Route index element={<Index />} />
        <Route path="*" element={<Error404 />} />
      </Route>
    )
  );

  // and return the router provider that defines the App component
  return (
    <>
      <RouterProvider router={router} />
    </>
  );
}

function Layout() {
  // use the Provider to set up auth, init App Bridge
  return (
    <GadgetProvider
      type={AppType.Embedded}
      shopifyApiKey={window.gadgetConfig.apiKeys.shopify}
      api={api}
    >
      <AuthenticatedApp />
    </GadgetProvider>
  );
}

function AuthenticatedApp() {
  // we use `isAuthenticated` to render pages once the OAuth flow is complete!
  const { isAuthenticated, loading } = useGadget();
  if (loading) {
    return <>Loading...</>;
  }
  return isAuthenticated ? <EmbeddedApp /> : <UnauthenticatedApp />;
}

function EmbeddedApp() {
  // use the Outlet, which renders the correct page given the current route
  // and use the App Bridge NavMenu for Shopify embedded app nav
  return (
    <>
      <Outlet />
      <NavMenu>
        <Link to="/" rel="home">
          Shop Information
        </Link>
      </NavMenu>
    </>
  );
}

function UnauthenticatedApp() {
  return <>App must be viewed in the Shopify Admin</>;
}

export default App;

```

--------------------------------

### Shopify status example and output

Source: https://docs.gadget.dev/reference/ggt

Example command to check Shopify status and its sample output.

```sh
$ ggt shopify status
```

```text
API version:            2024-04 (2026-07 available)
Enabled models:        shopifyProduct | shopifyVariant
Authed partner account: dev@example.com
App:                    my-gadget-app (client_id: abc123)
Scopes:                 read_orders | write_products
Webhook topics:         app/uninstalled | orders/create | orders/updated
```

--------------------------------

### Start Shopify Extension Development Server

Source: https://docs.gadget.dev/guides/plugins/shopify/advanced-topics/extensions.md

Run this command in your Gadget editor terminal to start the development server for your Shopify extensions.

```bash
yarn shopify:dev
```

--------------------------------

### Usage Example

Source: https://docs.gadget.dev/reference/react-bigcommerce.md

Example of how to use the Provider and useGadget hook in a React application.

```APIDOC
## Usage Example

To use `@gadgetinc/react-bigcommerce` in your app, you can import the `<Provider />` and pass in your Gadget app API client as a prop. A `useGadget()` hook can be used to check when the OAuth request is `loading` and if the user `isAuthenticated`.

```tsx
import { Provider as GadgetProvider, useGadget } from "@gadgetinc/react-bigcommerce";
import { Box, Link, Panel, ProgressCircle, Text } from "@bigcommerce/big-design";
import { api } from "../api";
import { Outlet } from "react-router";

export default function App() {
  // pass your app's api client to the Provider
  return (
    <GadgetProvider api={api}>
      <AuthenticatedApp />
    </GadgetProvider>
  );
}

function AuthenticatedApp() {
  // the useGadget hook provides the `isAuthenticated` and `loading` booleans
  const { isAuthenticated, loading } = useGadget();

  // show a spinner if authentication is in progress
  if (loading) {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100%",
          width: "100%",
        }}
      >
        <ProgressCircle />
      </div>
    );
  }

  // if the user is authenticated, render the router Outlet
  // otherwise show an unauthenticated app page
  return (
    <Box marginHorizontal={{ mobile: "none", tablet: "xxxLarge" }} marginVertical={{ mobile: "none", tablet: "xxLarge" }}>
      {isAuthenticated ? <Outlet /> : <UnauthenticatedApp />}
    </Box>
  );
}

function UnauthenticatedApp() {
  return (
    <Panel description="App must be viewed in the BigCommerce control panel">
      <Text>
        <Link target="_blank" href={`/edit/${process.env.GADGET_PUBLIC_APP_ENV}`}>
          {"Edit this app"}
        </Link>
      </Text>
    </Panel>
  );
}
```
```

--------------------------------

### Install default Gadget agent context files

Source: https://docs.gadget.dev/reference/ggt

Installs the default Gadget agent context files in your current project.

```sh
ggt agent-plugin install
```

--------------------------------

### Start ggt dev

Source: https://docs.gadget.dev/guides/development-tools/working-with-agents/working-in-parallel.md

Start the sync process to allow the agent to test code changes against the running Gadget environment.

```bash
ggt dev
```

--------------------------------

### Install React Libraries (Yarn)

Source: https://docs.gadget.dev/reference/shopify-app-bridge.md

Install the React hooks library, App Bridge React, and React using Yarn.

```bash
yarn add @gadgetinc/react-shopify-app-bridge @gadgetinc/react @shopify/app-bridge-react react
```

--------------------------------

### Install React Libraries (NPM)

Source: https://docs.gadget.dev/reference/shopify-app-bridge.md

Install the React hooks library, App Bridge React, and React using NPM.

```bash
npm install --save @gadgetinc/react-shopify-app-bridge @gadgetinc/react @shopify/app-bridge-react react
```

--------------------------------

### Install Gadget Client and React Hooks (yarn)

Source: https://docs.gadget.dev/guides/frontend/external-frontends

Install the Gadget client package for your specific app and the @gadgetinc/react package using yarn.

```yarn
yarn add @gadget-client/example-app @gadgetinc/react
```

--------------------------------

### Create and switch environment example

Source: https://docs.gadget.dev/reference/ggt

Creates a dev-2 environment and switches to it immediately.

```sh
$ ggt env create dev-2 --use --app my-blog
```

--------------------------------

### Example Shopify OAuth Trigger Object

Source: https://docs.gadget.dev/guides/actions/triggers

This trigger object is passed when a shop completes the OAuth process to install or reinstall an app. It signifies the start of the installation flow.

```json
// in an example shopify OAuth trigger
{
  "type": "shopify_oauth"
}
```

--------------------------------

### Create environment example

Source: https://docs.gadget.dev/reference/ggt

Creates a new dev-2 environment for the my-blog app.

```sh
$ ggt env create dev-2 --app my-blog
```

--------------------------------

### Sync all installed shops

Source: https://docs.gadget.dev/reference/ggt

Starts a sync for all valid installed shops, defaulting to the last 10 records per model.

```sh
$ ggt shopify sync
```

--------------------------------

### Get variable value

Source: https://docs.gadget.dev/reference/ggt

Example of retrieving a specific variable value.

```sh
$ ggt var get DATABASE_URL --app my-app --env development
```

--------------------------------

### Example Shopify Admin Trigger Object

Source: https://docs.gadget.dev/guides/actions/triggers

This trigger object is activated when a Shopify admin app is installed into Gadget. It is used for the `install` action on the `ShopifyShop` model.

```json
// in an example shopify admin trigger
{
  "type": "shopify_admin_install"
}
```

--------------------------------

### Send GET Request Immediately with useFetch

Source: https://docs.gadget.dev/reference/preact

This example demonstrates how `useFetch` automatically sends GET requests when the component first renders. `fetching` will be `true` initially.

```preact
import { useFetch } from "@gadgetinc/preact";

export function GetRequest() {
  // will automatically send the request when the component renders the first time, as it is a GET
  const [{ data, fetching, error }, resend] = useFetch("/products");
  // fetching will be `true`
}
```

--------------------------------

### Sync a specific store

Source: https://docs.gadget.dev/reference/ggt

Starts a sync for a single installed store by domain.

```sh
$ ggt shopify sync --store mystore.myshopify.com
```

--------------------------------

### List environments example

Source: https://docs.gadget.dev/reference/ggt

Lists all environments for the my-blog app.

```sh
$ ggt env list --app my-blog
```

--------------------------------

### Record Free Trial Start Date

Source: https://docs.gadget.dev/guides/plugins/shopify/advanced-topics/billing

Populate the 'Trial Started At' field in the Shopify Shop model when a merchant installs the app. This prevents restarting trials on re-installs.

```typescript
export const onSuccess: ActionOnSuccess = async ({ api, record }) => {
  if (!record.trialStartedAt) {
    // record the current time as the trial start date
    await api.internal.shopifyShop.update(record.id, { trialStartedAt: new Date() });
  }
};
```

--------------------------------

### ggt shopify sync

Source: https://docs.gadget.dev/reference/ggt

Starts a Shopify data sync for installed shops. By default, it syncs the last 10 records per model for all valid installed shops.

```APIDOC
## ggt shopify sync

### Description
Starts Shopify data syncs for installed shops. With no selector, all valid installed shops are synced.

### Usage
`ggt shopify sync [flags]`

### Options
- **-a, --app** (string) - Optional - Selects the application. Defaults to the app set in .gadget/sync.json.
- **-e, --env** (string) - Optional - Selects the environment. Defaults to the environment set in .gadget/sync.json.
- **--store** (string) - Optional - Syncs one installed store by domain. Cannot be combined with --shop-ids.
- **--shop-ids** (string) - Optional - Syncs specific shopifyShop records by ID (comma-separated). Cannot be combined with --store.
- **--models** (string) - Optional - Syncs specific Shopify models (comma-separated list of model API identifiers).
- **--since** (string) - Optional - Syncs records updated since the given date (e.g., 2024-01-01).
- **--last** (integer) - Optional - Syncs the last number of records per Shopify model. Defaults to 10. Cannot be combined with --all.
- **--all** (boolean) - Optional - Syncs all matching records. Cannot be combined with --last.
```

--------------------------------

### Install and Initialize Gadget Client SDK

Source: https://docs.gadget.dev/guides/plugins/shopify/building-shopify-apps

Include the Gadget client-side JavaScript SDK and initialize the client within a `DOMContentLoaded` event listener. Ensure the `endpoint` matches your app proxy configuration.

```html
<script defer src="https://example-app--development.gadget.appapi/client/web.min.js"></script>

<script>
// Wait for the HTML document to be fully loaded and parsed
// This ensures both the DOM is ready and our deferred Gadget script is loaded
document.addEventListener("DOMContentLoaded", () => {
  window.exampleAppClient = new ExampleAppClient({
    browserSession: {
      shopId: {{ shop.id }}
    },
    // the proxy path defined in your shopify.app.toml file, format: /<prefix>/<subpath>
    endpoint: "/apps/example-app-api"
  });
  // ...
});
</script>

```

--------------------------------

### Switch environment example

Source: https://docs.gadget.dev/reference/ggt

Switches the current sync directory to dev-2.

```sh
$ ggt env use dev-2
```

--------------------------------

### Handling ChatGPT App Install Trigger

Source: https://docs.gadget.dev/guides/plugins/chatgpt

Custom actions with the 'ChatGPT App Install' trigger receive a payload containing OAuth information. Use this to perform setup or validation during the OAuth flow. Errors in these actions will abort the OAuth flow.

```typescript
export const onSuccess: ActionOnSuccess = async ({ params, record, trigger }) => {
  if (trigger?.type === "chatgpt_app_install") {
    // Access OAuth information from the trigger
    const { oauth, userId, sessionId } = trigger;

    // oauth.scope - the scopes being granted
    // oauth.clientId - the OAuth client ID
    // userId - the user ID (if user model exists)
    // sessionId - the session ID

    // Perform any setup needed for this installation
    await api.yourModel.create({
      session: { _link: sessionId },
      // ... other fields
    });
  }
};
```

--------------------------------

### Configure Vite with Remix and Gadget

Source: https://docs.gadget.dev/reference/gadget-server.md

Integrates Gadget's pre-defined Remix configuration into your Vite setup. Ensure `gadget-server/vite` and `@remix-run/dev` are installed.

```typescript
import { defineConfig } from "vite";
import { gadget } from "gadget-server/vite";
// import the pre-defined config
import { remixViteOptions } from "gadget-server/remix";
import { vitePlugin as remix } from "@remix-run/dev";

export default defineConfig({
  plugins: [
    gadget(),
    remix({
      // pass the config to the remix plugin
      ...remixViteOptions,
    }),
  ],
});
```

--------------------------------

### Filter Employees by Last Name Prefix

Source: https://docs.gadget.dev/guides/data-access/gelly

Fetch employees whose last name starts with a specific prefix. This example filters for employees with last names beginning with 'A'.

```gelly
field on department {
  employeeList {
    id
    [where startsWith(lastName, prefix: "A")]
  }
}
```

--------------------------------

### Import keys from staging

Source: https://docs.gadget.dev/reference/ggt

Example of importing keys from a staging environment as placeholders.

```sh
$ ggt var import --from staging --all --app my-app --env development
```

--------------------------------

### Include Trace ID in Route Response

Source: https://docs.gadget.dev/guides/development-tools/logger

This example shows how to access the current trace ID using OpenTelemetry's API and include it in an HTTP route's JSON response. Ensure `@opentelemetry/api` is installed.

```typescript
import {
  RouteHandler,
} from "gadget-server";
import { trace, context } from "@opentelemetry/api";

function getCurrentTraceId() {
  const spanContext = trace.getSpanContext(context.active());
  return spanContext?.traceId;
}

/**
 * Route handler for GET hello
 *
 * @type { RouteHandler } route handler - see: https://docs.gadget.dev/guides/http-routes/route-configuration#route-context
 */
const route = async ({ request, reply, api, logger, connections }) => {
  // This route file will respond to an http request -- feel free to edit or change it!
  // For more information on HTTP routes in Gadget applications, see https://docs.gadget.dev/guides/http-routes

  await reply
    .type("application/json")
    .send({ hello: "world", traceId: getCurrentTraceId() });
};

export default route;
```

--------------------------------

### Open specific app and environment example

Source: https://docs.gadget.dev/reference/ggt

Opens the data editor for the post model of the my-blog app in the staging environment.

```sh
$ ggt open data post --app my-blog --env staging
```

--------------------------------

### Call BigCommerce API with Authenticated Client in HTTP Route

Source: https://docs.gadget.dev/guides/plugins/bigcommerce/frontends

When calling from a single-click frontend, use `connections.bigcommerce.current` to get an authenticated BigCommerce API client instance within an HTTP route. This example fetches products.

```typescript
import { RouteHandler } from "gadget-server";

const route: RouteHandler = async ({ request, reply, connections }) => {
  const bigcommerce = connections.bigcommerce.current;
  const products = await bigcommerce?.v3.get(`/catalog/products`, {
    query: { limit: 5 },
  });
  await reply.send({
    products,
  });
};

export default route;
```

--------------------------------

### Deploy with from option

Source: https://docs.gadget.dev/reference/ggt

Specifies the environment to deploy from, overriding the default in .gadget/sync.json.

```sh
ggt deploy --from development
```

--------------------------------

### Example cURL Request for LLM Chat Completion

Source: https://docs.gadget.dev/guides/plugins/openai/building-ai-apps.md

This bash command shows how to call the previously defined Gadget HTTP route to get a chat completion, passing the user's question as a query parameter. The response will be the LLM's answer based on the provided context.

```bash
> curl https://example-app--development.gadget.app/ask?question=what%20will%20keep%20me%20dry%20in%20the%20rain
A raincoat or shelter will keep you dry in the rain.
```

--------------------------------

### Initialize Gadget App with Local Sync

Source: https://docs.gadget.dev/guides/source-control.md

Use this command to download Gadget's CLI tool and start a two-way sync session between your local directory and Gadget's cloud infrastructure. Replace 'test-app' with your actual app name.

```sh
npx ggt@latest dev ./test-app --app=test-app
```

--------------------------------

### Defining Custom Routes within a Plugin

Source: https://docs.gadget.dev/guides/http-routes/route-structure

A route plugin that defines a custom GET route using Fastify's `server.get` method. This example creates a route that captures a numeric file ID from the URL and responds with a JSON object containing the extracted file ID.

```typescript
// in routes/+custom-routes.ts
import type { Server } from "gadget-server";

export default async function (server: Server) {
  server.get("/example/:file(^d+).png", async ({ request, reply }) => {
    await reply.send({ filenameWithoutExtension: request.params.file });
  });
}
```

--------------------------------

### Gadget App File Structure Example

Source: https://docs.gadget.dev/guides/source-control.md

This example illustrates the typical file structure of a Gadget app, including backend models, actions, frontend components, access control, and settings.

```text
api/                     // the backend folder powering your app's api
  models/
    foo/
      schema.gadget.ts   // the metadata for the foo model
      actions/
        create.js
        update.js
        delete.js
    bar/
      schema.gadget.ts   // the metadata for the bar model
      actions/
        create.js
        update.js
        delete.js
  actions/
    globalActionA.js
    globalActionB.js
web/                     // the frontend folder powering your app's experience
  pages/
    index.js
    about.js
  components/
    header.js
    footer.js
accessControl/
  permissions.gadget.ts  // the metadata for the app's roles and permissions
settings.gadget.ts       // the metadata for the app's settings
```

--------------------------------

### List variable keys in development

Source: https://docs.gadget.dev/reference/ggt

Example of listing all variable keys for a specific app and environment.

```sh
$ ggt var list --app my-app --env development
```

--------------------------------

### Install @gadgetinc/react-bigcommerce with Yarn

Source: https://docs.gadget.dev/reference/react-bigcommerce.md

Use this command to install the package if you need to add it manually to your project. Gadget apps typically have this package installed automatically.

```bash
yarn add @gadgetinc/react-bigcommerce
```

--------------------------------

### Show-all option example for ggt open

Source: https://docs.gadget.dev/reference/ggt

Shows all schema or data options by listing available models.

```sh
ggt open data --show-all
```

--------------------------------

### signUp Usage Examples

Source: https://docs.gadget.dev/api/example-app/development/schema/user

Examples of calling the signUp action using the TypeScript client, React hook, GraphQL mutation, and JSON input format.

```typescript
const userRecord = await api.user.signUp({
  email: "example@email.com",
  password: "nohacking123%",
  roles: ["signed-in"],
});
```

```tsx
const ExampleRunSignUpComponent = () => {
  const [{ data, error, fetching }, signUp] = useAction(api.user.signUp);

  return (
    <>
      <button
        onClick={async () => {
          await signUp({
            email: "example@email.com",
            password: "nohacking123%",
            roles: ["signed-in"],
          });
        }}
      >
        Run Action
      </button>
      Result: {JSON.stringify(data)}
    </>
  );
};
```

```graphql
mutation SignUpUser($user: SignUpUserInput) {
  signUpUser(user: $user) {
    success
    errors {
      message
      ... on InvalidRecordError {
        validationErrors {
          apiIdentifier
          message
        }
        record
        model {
          apiIdentifier
        }
      }
    }
    user {
      __typename
      id
      state
      createdAt
      email
      roles {
        key
        name
      }
      updatedAt
    }
  }
}
```

```json
{
  "user": {
    "email": "example@email.com",
    "password": "nohacking123%",
    "roles": ["signed-in"]
  }
}
```

--------------------------------

### Add field examples

Source: https://docs.gadget.dev/reference/ggt

Examples of adding fields to models.

```sh
$ ggt add field post/published:boolean
```

```sh
$ ggt add field blogs/post/title:string
```

--------------------------------

### Open logs example

Source: https://docs.gadget.dev/reference/ggt

Opens the logs page.

```sh
$ ggt open logs
```

--------------------------------

### Start Shopify Development Server

Source: https://docs.gadget.dev/guides/tutorials/shopify/theme-app-extensions.md

Serve your theme extension locally using the Shopify CLI. This command can be run from your local terminal or the Gadget editor's terminal.

```bash
shopify app dev
```

```bash
yarn shopify:dev
```

--------------------------------

### Initialize Gadget Client with Dynamic Environment

Source: https://docs.gadget.dev/guides/development-tools/framework-linter.md

This example demonstrates initializing a Gadget API client with a dynamic environment, which is the recommended approach. It uses `window.gadgetConfig.environment` for runtime environment selection.

```typescript
import { MyAppClient } from "@gadget-client/my-app-name";

export const api = new MyAppClient({ environment: window.gadgetConfig.environment });
```

--------------------------------

### Clone app environment

Source: https://docs.gadget.dev/reference/ggt

Example of cloning the my-blog app into a local directory and maintaining a sync connection.

```sh
ggt dev ./my-blog --app my-blog --env development
```

--------------------------------

### Start logs from datetime

Source: https://docs.gadget.dev/reference/ggt

Sets the start time for the log query.

```sh
ggt logs --start 2026-03-12T10:00:00Z
```

--------------------------------

### Start Gadget Development Server

Source: https://docs.gadget.dev/guides/plugins/shopify/advanced-topics/extensions.md

Run this command in your local terminal to pull down your Gadget app to your local machine for development. Replace placeholders with your actual app domain.

```bash
ggt dev ./<YOUR APP DOMAIN> --app=<YOUR APP DOMAIN> --env=development
```

--------------------------------

### Install Gadget agent plugins

Source: https://docs.gadget.dev/reference/ggt

Installs agent skills and context into the current project.

```sh-session
ggt agent-plugin install [--force]
```

--------------------------------

### Show all models in schema viewer example

Source: https://docs.gadget.dev/reference/ggt

Lists all models available in the schema viewer.

```sh
$ ggt open schema --show-all
```

--------------------------------

### Making API Calls with Gadget Client

Source: https://docs.gadget.dev/guides/plugins/shopify/building-shopify-apps

After initializing the client, use `window.exampleAppClient` to make secure calls to your app's actions (e.g., `getBanner()`) or HTTP routes (e.g., `fetch('/banner-image')`).

```html
<script defer src="https://example-app--development.gadget.appapi/client/web.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", () => {
  window.exampleAppClient = new ExampleAppClient({
    browserSession: {
      shopId: {{ shop.id }}
    },
    endpoint: "/apps/example-app-api"
  });

  doSomething();
});

async function doSomething() {
  // use the API client to call actions or views, like getBanner()
  const bannerCopy = window.exampleAppClient.getBanner();

  // or use the API client to call HTTP routes
  const bannerImage = window.exampleAppClient.fetch("/banner-image", {
    method: "GET",
    headers: {
      "Content-type": "application/json",
    },
  });

  // ... add copy and image to block elements
}
</script>

```

--------------------------------

### API Client Setup

Source: https://docs.gadget.dev/reference/shopify-app-bridge.md

Set up your API client for use in your Gadget frontend. Ensure the client is imported correctly.

```typescript
import { ExampleAppClient } from "@gadget-client/example-app";

export const api = new ExampleAppClient();
```

--------------------------------

### ggt pull examples

Source: https://docs.gadget.dev/reference/ggt

Examples of pulling changes from an environment or skipping interactive prompts.

```sh
ggt pull --env main --force
```

```sh
ggt pull --force --allow-all
```

--------------------------------

### Install Anthropic SDK

Source: https://docs.gadget.dev/guides/plugins/extending-gadget.md

Install the Anthropic SDK using yarn to integrate with the Anthropic API.

```bash
yarn add @anthropic-ai/sdk
```

--------------------------------

### Example TOML with Webhook Subscriptions

Source: https://docs.gadget.dev/guides/plugins/shopify/advanced-topics/shopify-app-toml

An example of a `shopify.app.toml` file for framework v1.7+ demonstrating webhook subscriptions. This includes auto-generated entries for enabled Shopify models and specific entries for model actions with filters.

```toml
// in example shopify.app.toml with webhook subscriptions
[webhooks]
api_version = "2024-10"

# Model webhook subscriptions (auto-generated for enabled models)
[[webhooks.subscriptions]]
topics = ["products/create", "products/update", "products/delete"]
uri = "https://webhooks.gadget-services.net/shopify/v1?domain=my-app--development.gadget.app"

# Model action webhook with filter and include_fields (linked via triggerKey)
[[webhooks.subscriptions]]
topics = ["products/update"]
filter = "vendor:Nike"
include_fields = ["id", "title", "vendor", "updated_at"]
uri = "https://webhooks.gadget-services.net/shopify/v1/shopifyProduct-update?domain=my-app--development.gadget.app"

```

--------------------------------

### Install React Router Dev Dependency

Source: https://docs.gadget.dev/guides/frontend/react-router-in-gadget

Install the required development dependency for React Router.

```bash
yarn add -D @react-router/dev
```

--------------------------------

### Navigate and List App Files

Source: https://docs.gadget.dev/guides/source-control.md

Change into your application's directory and list the files to verify the sync. This is a standard command-line operation.

```sh
cd ./test-app
ls
```

--------------------------------

### Install React Router Dependencies

Source: https://docs.gadget.dev/guides/frontend/react-router-in-gadget

Install the necessary React Router packages using yarn.

```bash
yarn add react-router @react-router/fs-routes @react-router/node @react-router/serve
```
Tokens:
Raw