open-index/open-npm huggingface dataset:
npm package: @shopify/consumer-agent-mcp
Description: A stdio bridge to facilitate communication between LLM agents and MCP (Model Context Protocol) servers.
Latest version: 0.1.7

# Shopify Consumer Agent MCP Bridge

This repository acts as a stdio bridge to facilitate communication between LLM agents and MCP (Model Context Protocol) servers.

This bridge supports both unauthenticated servers and servers protected by Basic Authentication or Bearer Tokens.

## Configuration

To set up the MCP servers locally, use the following configuration file. Below, you will find examples for each type of authentication supported: unauthenticated, Basic Authentication, and Bearer Token.

1. **Unauthenticated Server**: No additional credentials are required. Use the `unauthed` configuration as shown in the example.

2. **Basic Authentication**: Provide your username and password in the `USERNAME` and `PASSWORD` fields of the `basic-auth` configuration.

3. **Bearer Token Authentication**: Supply your authentication token in the `BEARER_TOKEN` field of the `bearer-auth` configuration.

4. **Custom Headers**: Add any custom headers by using the `--header` command line argument in the format `--header "Name: Value"`. Multiple headers can be specified by repeating the `--header` argument.
Copy and customize the JSON configuration below to match your setup. Replace placeholder values like `your_username`, `your_password`, and `your_auth_token` with your actual credentials.

```json
{
  "mcpServers": {
    "unauthed": {
      "command": "npx",
      "args": ["-y", "@shopify/consumer-agent-mcp@latest"],
      "env": {
        "MCP_SERVER": "https://unauthed-mcp-server.ai"
      }
    },
    "basic-auth": {
      "command": "npx",
      "args": ["-y", "@shopify/consumer-agent-mcp@latest"],
      "env": {
        "MCP_SERVER": "https://basic-auth-mcp-server.ai",
        "USERNAME": "your_username",
        "PASSWORD": "your_password"
      }
    },
    "bearer-auth": {
      "command": "npx",
      "args": ["-y", "@shopify/consumer-agent-mcp@latest"],
      "env": {
        "MCP_SERVER": "https://bearer-auth.mcp-server.ai",
        "BEARER_TOKEN": "your_auth_token"
      }
    }
  }
}
```
npm package: @shopify/create-hydrogen
Description: This package generates a new Hydrogen project. Hydrogen is a set of tools, utilities, and best-in-class examples for building a commerce application with [Remix](https://wwww.remix.run).
Latest version: 5.0.33

# @shopify/create-hydrogen

This package generates a new Hydrogen project. Hydrogen is a set of tools, utilities, and best-in-class examples for building a commerce application with [Remix](https://wwww.remix.run).

[Check out the docs](https://shopify.dev/custom-storefronts/hydrogen)
npm package: @shopify/csrf-token-fetcher
Description: JavaScript utility function to fetch the CSRF token required to make requests to a Rails server
Author: Shopify Inc.
Latest version: 2.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/csrf-token-fetcher`

[![Build Status](https://github.com/Shopify/quilt/workflows/Node-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ANode-CI)
[![Build Status](https://github.com/Shopify/quilt/workflows/Ruby-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ARuby-CI)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Fcsrf-token-fetcher.svg)](https://badge.fury.io/js/%40shopify%2Fcsrf-token-fetcher.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/csrf-token-fetcher.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/csrf-token-fetcher.svg)

JavaScript utility function to fetch the CSRF token required to make requests to a Rails server.

## Installation

```bash
yarn add @shopify/csrf-token-fetcher
```

## API Reference

### `function getCSRFToken(scope = document)`

Retrieve the CSRF token from the meta tag rendered by a Rails server. This token is required in the `X-CSRF-Token` header for requests to the Rails server.

In the `html.erb` file:

```
<%= csrf_meta_tags %>
```

#### Example Usage

```typescript
import getCSRFToken from '@shopify/csrf-token-fetcher';

getCSRFToken();
// → 'token_value'
```
npm package: @shopify/css-utilities
Description: A set of CSS styling-related utilities
Author: Shopify Inc.
Latest version: 3.2.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/css-utilities`

[![Build Status](https://github.com/Shopify/quilt/workflows/Node-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ANode-CI)
[![Build Status](https://github.com/Shopify/quilt/workflows/Ruby-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ARuby-CI)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Fcss-utilities.svg)](https://badge.fury.io/js/%40shopify%2Fcss-utilities.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/css-utilities.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/css-utilities.svg)

A set of CSS styling-related utilities.

## Installation

```bash
yarn add @shopify/css-utilities
```

Both `classNames` and `variationName` are helper functions that are use to generate class names.

### `classNames`

Is a straight export of [`classnames`](https://github.com/JedWatson/classnames). It returns a classNames string that are conditionally joined together.

### `variationName`

Is a utility that returns a camelCase string combining the name and value passed in.

## Usage

Given this CSS file for a `Square` React component:

```scss
.Square {
  color: transparent;
}

.sizeSmall {
  height: 20px
  width: 20px
}

.sizeLarge {
  height: 44px
  width: 44px
}

.colorWhite {
  background-color: white;
}

.colorBlack {
  background-color: black;
}
```

The following can be use to generate different class names for the component based on its props:

```tsx
type Size = 'small' | 'large';
type Color = 'white' | 'black';

interface Props {
  size: Size;
  color: Color;
}

function Square({size, color}: Props) {
  const className = classNames(
    styles.Square,
    styles[variationName<Color>('color', color)],
    styles[variationName<Size>('size', size)],
  );

  return <div className={className} />;
}
```
npm package: @shopify/customer-account-ui-extensions
Description: The API for UI Extensions that run in Shopify's Customer Account
Latest version: 0.0.63

# Customer Account UI Extensions

Customer Account UI Extensions is a library that enables developers to write custom JavaScript to be sent to and rendered within the Shopify Customer Account web application.

## Usage

There are multiple ways to use Customer Account UI Extensions components in your extension.

### Vanilla JS

Adding a button looks like the following:

```js
import {extend, Button} from '@shopify/customer-account-ui-extensions';

extend('CustomerAccount::FullPage::RenderWithin', (root, api) => {
  const button = root.createComponent(Button, {
    title: 'Press Me',
    primary: true,
    onPress: () => console.log('Pressed'),
  });

  root.appendChild(button);
});
```

### React

To use the React implementation, check out [packages/customer-account-ui-extensions-react](../customer-account-ui-extensions/README.md).
npm package: @shopify/customer-account-ui-extensions-react
Description: React bindings for @shopify/customer-account-ui-extensions
Latest version: 0.0.65

# Customer Account UI Extensions (React)

This library provides utilities for writing Customer Account UI extensions using [React](https://reactjs.org).

## Installation

```bash
$ yarn add @shopify/customer-account-ui-extensions-react
```

## Usage

To use the React bindings in a UI extension, start by importing `React` as you normally would. All of the [core features of React](https://reactjs.org/docs/getting-started.html) are available, including hooks, context, and more.

```tsx
import {Button, render} from '@shopify/customer-account-ui-extensions-react';

render('CustomerAccount::FullPage::RenderWithin', () => <App />);

interface Props {}

function App(_: Props) {
  return (
    <Button
      onPress={() => {
        console.log('Pressed');
      }}
    >
      Press me
    </Button>
  );
}
```

If you’ve ever used React on the web, you’re probably used to returning DOM nodes as part of your React components. Because UI extensions execute in a web worker and have no access to the DOM, returning DOM components is an error in UI extensions. Instead, you can return the components you import from `@shopify/customer-account-ui-extensions-react`, which are the equivalent of the DOM in Customer Account — they are the “leaf” elements, the lowest-level UI primitives that exist.

For example, the following will throw an error:

```tsx
import {render} from '@shopify/customer-account-ui-extensions-react';

render('CustomerAccount::FullPage::RenderWithin', () => <App />);

interface Props {}

function App(_: Props) {
  return <div>No HTML tag allowed</div>;
}
```

## Other React-specific APIs

### `useExtensionApi()`

`useExtensionApi` is a [custom React hook](https://reactjs.org/docs/hooks-intro.html) that gives you access to the full input argument provided to your extension point (this is the value that, if you were registering an extension point directly with [`shopify.extend`](../checkout-ui-extensions/documentation/globals.md), would be passed as the second argument to your callback). This allows you to access and call the main APIs between your extension and Shopify anywhere in your React component.

If you are using TypeScript, you can supply the name of the extension point as a type parameter to this function. Doing so will refine the return type to be exactly the input type for that extension point, so make sure you pass the name of the extension you are actually rendering.

```tsx
import {
  render,
  useExtensionApi,
  Button,
} from '@shopify/customer-account-ui-extensions-react';

render("CustomerAccount::FullPage::RenderWithin", () => <App />);

function App() {
  const {extension, features, i18n} = useExtensionApi();

  return (
    <Button
      onPress={() => {
        console.log({extension, features, i18n});
      }}
    >
      Log extension API to console
    </Button>
  );
}
```

This hook can only be called if you registered your extension with `render`, as that callback wraps the application in the necessary React context to make the input available anywhere in the tree.
npm package: @shopify/cypress-graphql
Description: Cypress commands for stubbing, intercepting and testing graphql endpoints
Author: Shopify Inc.
Latest version: 1.0.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/cypress-graphql`

[![Build Status](https://github.com/Shopify/cypress-graphql/workflows/CI/badge.svg?branch=main)](https://github.com/Shopify/cypress-graphql/actions?query=workflow%3ACI)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Fcypress-graphql.svg)](https://badge.fury.io/js/%40shopify%2Fcypress-graphql.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/cypress-graphql.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/cypress-graphql.svg)

Cypress commands for intercepting and testing graphql endpoints.

## Installation

Install this package w/ npm or yarn

```bash
npm install --dev @shopify/cypress-graphql
yarn add --dev @shopify/cypress-graphql
```

Then in your cypress/support/index files, import the entire package to register these commands.

```
import '@shopify/cypress-graphql';
```

Typescript types are automatically included, so no further action is required.

## Usage

### `cy.interceptGql`

This command sets up spies and stubs for a graphql endpoint, similar to [cypress route intercepts](https://docs.cypress.io/api/commands/intercept#Syntax). This registers a top-level route alias called `GraphQL`. Optionally, but definitely encouraged is providing an array of known operations, which will then be registered as sub-operations with their own aliases.

#### Intercept any request

```
cy.interceptGql('**/graphql')                         // register route intercepts
cy.get('button[type="submit"]').click()               // make the UI send a request
cy.wait('@GraphQL').its('status').should('eq', 200)   // test the response
```

#### Intercept a specific operation

```
cy.interceptGql('**/graphql', ['UserQuery'])          // register route intercepts
cy.get('button[type="submit"]').click()               // make the UI send a request
cy.wait('@UserQuery').its('status').should('eq', 200) // test the response
```

#### Stub a specific operation

```
cy.interceptGql('**/graphql', [
  ['UserQuery', { statusCode: 400, body: { data: null, errors: ['fake err']  } }]
])                                                    // provide a fake error
cy.get('button[type="submit"]').click()               // make the UI send a request
cy.wait('@UserQuery').its('status').should('eq', 400) // test the response

```
npm package: @shopify/danger
Description: Rules for dangerjs
Author: Shopify
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @shopify/danger

[![Build Status](https://github.com/Shopify/danger/workflows/CI/badge.svg?branch=main)](https://github.com/Shopify/danger/actions?query=workflow%3ACI)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Fdanger.svg)](https://badge.fury.io/js/%40shopify%2Fdanger.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/danger.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/danger.svg)

Danger is a static analysis tool used to automate code review by evaluating the content of a PR and reporting pass/fail status based on user-supplied rules for a repository. It is de-centralized and relies upon the APIs of a hosted git repository like GitHub.

This repo is a collection of open-source rules for DangerJS pipelines to enforce conventions such as warning if a PR is too large, if it lacks tests, etc.

## Usage

Install:

```sh
yarn add @shopify/danger --dev
```

In your dangerfile:

```js
// dangerfile.js
import analyze, {
  skipForBots,
  includeIssueNumber,
  includeFrontendTesting,
  includeBackendTesting,
  warnIfLargePR,
} from "@shopify/danger";

// Skip testing for bots e.g. Dependabot
skipForBots(danger)

// Require an issue number
includeIssueNumber(danger)

// fail PRs with >2 FE or BE file changes without tests
includeFrontendTesting(danger, 2);
includeBackendTesting(danger, 2);

// Warn if a PR is larger than X amount of lines
warnIfLargePR(danger, 200)
```

## Changelog

See the GitHub [release history](https://github.com/Shopify/danger/releases).

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md).
npm package: @shopify/decorators
Description: A set of decorators to aid your JavaScript journey
Author: Shopify Inc.
Latest version: 4.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/decorators`

This package has been deprecated and removed. You should use `@shopify/function-enhancers` directly.
npm package: @shopify/deferred
Description: A new promise along with methods to change its state.
Author: Shopify Inc.
Latest version: 0.1.4
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/deferred`

A new promise along with methods to change its state.

## Installation

```bash
$ yarn add @shopify/deferred
```

## Usage

```tsx
import {Deferred} from '@shopify/deferred';

const deferred = new Deferred();
await deferred.promise;
```

Resolving with a value:

```tsx
import {Deferred} from '@shopify/deferred';

const deferred = new Deferred();
deferred.resolve(5);

const five = await deferred.promise;
```

## Promise vs. deferred

A deferred has a promise which functions as a proxy for the future result. While a promise is a value returned by an asynchronous function, a deferred can be resolved or rejected by it's caller which separates the promise from the resolver.
npm package: @shopify/dialog-logger
Description: [![Build Status](https://travis-ci.com/Shopify/chatops.svg?branch=master)](https://travis-ci.com/Shopify/chatops) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](../../LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2
Author: Shopify Inc.
Latest version: 0.0.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/dialog-logger`

[![Build Status](https://travis-ci.com/Shopify/chatops.svg?branch=master)](https://travis-ci.com/Shopify/chatops)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](../../LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Fdialog-logger.svg)](https://badge.fury.io/js/%40shopify%2Fdialog-logger.svg)

## Installation

```bash
$ yarn add @shopify/dialog-logger
```

## Usage

```ts
const logger = new Logger('my-app:some-component');

logger.log('hello world');
```
npm package: @shopify/enzyme-utilities
Description: Enzyme utilities for testing React components
Author: Shopify Inc.
Latest version: 4.0.0
Deprecated: This package is no longer supported and has been deprecated. We recommend the @shopify/react-testing library instead.

# `@shopify/enzyme-utilities`

## 🛑 Deprecated Package

This package is no longer supported and has been deprecated. We recommend the `@shopify/react-testing` library instead.
npm package: @shopify/eslint-plugin-hydrogen
Description: Eslint rules for hydrogen
Latest version: 1.0.0-1.0.0-alpha.16.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `eslint-plugin-hydrogen`

Hydrogen provides an ESLint plugin to enforce Shopify’s javascript best practices and catch common issues when using React Server components in Hydrogen apps.

| Rule                                                                                | Description                                                     | Configurations | Fixable |
| ----------------------------------------------------------------------------------- | --------------------------------------------------------------- | -------------- | ------- |
| [hydrogen/no-state-in-server-components](./src/rules/no-state-in-server-components) | Prevents `useState` and `useReducer` in React Server Components | `recommended`  |         |

## Installation

You'll first need to install [ESLint](http://eslint.org) in addition to this module.

```bash
yarn add --dev eslint eslint-plugin-hydrogen
```

## Usage

Hydrogen’s ESLint configurations come bundled in this package. In order to use them, you simply extend the relevant configuration in your project’s `.eslintrc.js`.

### Configurations

#### Recommended

This plugin exports a recommended configuration.

To enable this configuration use the `extends` property in your `.eslintrc.js`
config file:

```ts
{
  extends: 'plugin:hydrogen/recommended',
}
```
npm package: @shopify/extraction-test-browser
Description: A set of browser utilities for React projects at Shopify.
Author: Shopify Inc.
Latest version: 0.1.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# extraction-test-browser

A set of browser utilities for React projects at Shopify.

## Installation

```bash
yarn add @shopify/extraction-test-browser
```

## API

See the comments and TypeScript annotations in the code for details on the provided utilities.

## License

MIT, see [LICENSE.md](http://github.com/Shopify/browser/blob/master/LICENSE.md) for details.

<img src="https://cdn.shopify.com/shopify-marketing_assets/builds/19.0.0/shopify-full-color-black.svg" width="200" />
npm package: @shopify/extraction-test-javascript-utilities
Description: A set of utilities for JavaScript and TypeScript projects at Shopify.
Author: Shopify
Latest version: 0.1.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# extraction-test-javascript-utilities

A set of utilities for JavaScript and TypeScript projects at Shopify.

## Table of Contents

- [Installation](#installation)
- [API](#api-reference)
- [Contribute](#contribute)
- [License](#license)
- [Changelog](http://github.com/Shopify/javascript-utilities/blob/master/CHANGELOG.md)

## Installation

```bash
yarn add @shopify/extraction-test-javascript-utilities
```

## API Reference

See the comments and TypeScript annotations in the code for details on the provided utilities.

## Contribute

Check out our [Contributing Guidelines](http://github.com/Shopify/javascript-utilities/blob/master/CONTRIBUTING.md)

## License

MIT &copy; [Shopify](https://shopify.com/), see [LICENSE.md](http://github.com/Shopify/javascript-utilities/blob/master/LICENSE.md) for details.

<a href="http://www.shopify.com/"><img src="https://cdn.shopify.com/assets2/press/brand/shopify-logo-main-small-f029fcaf14649a054509f6790ce2ce94d1f1c037b4015b4f106c5a67ab033f5b.png" alt="Shopify" width="200" /></a>
npm package: @shopify/extraction-test-react-utilities
Description: A set of utilities for React projects at Shopify.
Author: Shopify Inc.
Latest version: 0.1.4
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# extraction-test-react-utilities

A set of utilities for React projects at Shopify.

## Installation

```bash
yarn add @shopify/react-utilities
```

## API

See the comments and TypeScript annotations in the code for details on the provided utilities.

## License

MIT, see [LICENSE.md](http://github.com/Shopify/react-utilities/blob/master/LICENSE.md) for details.

<img src="https://cdn.shopify.com/shopify-marketing_assets/builds/19.0.0/shopify-full-color-black.svg" width="200" />
npm package: @shopify/fail-on-unexpected-module-shaking-plugin
Description: Fails webpack builds when a module is unexpectedly tree-shaken
Author: Shopify Inc.
Latest version: 4.0.0
Deprecated: This

# `@shopify/fail-on-unexpected-module-shaking-plugin`

## 🛑 Deprecated Package

This package is no longer supported and has been deprecated.
npm package: @shopify/flipper-plugin-react-native-performance
Description: Flipper desktop plugin with tools for measuring lists performance, TTI, and more.
Latest version: 1.0.1

# flipper-plugin-react-native-performance

Desktop Flipper plugin for [@shopify/react-native-performance-lists-profiler](/packages/react-native-performance-lists-profiler).

## Usage & installation

Please refer to [documentation](https://shopify.github.io/react-native-performance/guides/react-native-performance-lists-profiler) to see more information and usage examples.