# Marketplace with Custom UI Elements

In this video we query Prismatic's API for a list of available marketplace integrations and present the data using custom native UI elements. This approach allows you to have complete control over the UI elements and user experience of your embedded marketplace, while still leveraging Prismatic's API and config wizard experience to power your integration marketplace.

## GraphQL query and TypeScript type used[​](#graphql-query-and-typescript-type-used "Direct link to GraphQL query and TypeScript type used")

This is the GraphQL query and corresponding TypeScript type definition used in the video:

Query for available marketplace integrations

```graphql
query getMarketplaceIntegrations {
  marketplaceIntegrations(
    includeActiveIntegrations: true
    sortBy: [
      { field: CATEGORY, direction: ASC }
      { field: NAME, direction: ASC }
    ]
  ) {
    nodes {
      id
      name
      allowMultipleMarketplaceInstances
      avatarUrl
      category
      description
      isCustomerDeployable
      marketplaceConfiguration
      overview
      documentation
      versionNumber
      instances {
        nodes {
          id
          name
          enabled
          deployedVersion
        }
      }
      deployedInstances
      deploymentStatus
    }
  }
}

```

TypeScript types for marketplace integrations query

```typescript
export interface MarketplaceIntegrationsResponse {
  marketplaceIntegrations: {
    nodes: MarketplaceIntegration[];
  };
}

export interface MarketplaceIntegration {
  id: string;
  name: string;
  allowMultipleMarketplaceInstances: boolean;
  avatarUrl?: string;
  category: string;
  description: string;
  isCustomerDeployable: boolean;
  marketplaceConfiguration: string;
  overview: string;
  documentation: string;
  versionNumber: number;
  instances: { nodes: Instance[] };
  deployedInstances: "ZERO" | "ONE" | "MULTIPLE";
  deploymentStatus: "ACTIVATED" | "PAUSED" | "UNCONFIGURED" | null;
}

export interface Instance {
  id: string;
  name: string;
  enabled: boolean;
  deployedVersion: number;
}

```

**See Also**:

* [Custom marketplace UI](https://prismatic.io/docs/embed/custom-marketplace-ui.md)
* [Prismatic's GraphQL API](https://prismatic.io/docs/api.md)