# App integration

App integration allows you to introduce new functionality directly into Struct PIM, opening up possibilities for extending the system to better fit your workflows.

This approach enhances the flexibility of the platform while maintaining a consistent and user-friendly experience. The setup between your custom apps and the PIM is designed to be simple and straightforward, enabling you to get started quickly, iterate efficiently, and explore new features with minimal technical overhead.

The streamlined process ensures that custom and native functionality coexist seamlessly within the same interface, helping you extend the platform without disrupting existing workflows. By combining custom and built-in features, you can enhance productivity while keeping the overall user experience intuitive and cohesive.

## What you can do with App Integration

* **Easily integrate custom apps** into the PIM through a user-friendly setup process, allowing you to connect new functionality directly into the system. Used to integrate custom app functionality into a singular tenant.
* **Set up extensions** for your custom app to embed its functionality into the PIM’s workflows, ensuring a smooth and consistent user experience across all features.
* **Enhance the user experience** by embedding custom functionality cohesively within the PIM interface, without interrupting existing workflows.

## Getting started

When working with app integration, it is important to understand the different types of apps and how they are used within Struct.

Apps can be created for different purposes and distributed in different ways depending on your needs.

* [**Custom apps**](/tutorials/guides/how-to-use-app-integration.md) are built to solve specific use cases or extend functionality within Struct PIM. They are typically tailored to a particular workflow or business need and are often used within a single tenant.
* [**Private apps**](/developer/app-store.md) are only available to tenants within your organization. They are used for internal functionality or integrations that are not intended for public distribution.
* [**Public apps**](/developer/app-store.md) are available to all tenants through the app store. These apps must go through a review and approval process before they can be published.

## Requirements

Before working with app integration, you need access to the following:

### **Extensions SDK package**

The [Struct extension SDK](https://www.npmjs.com/package/@structdk/extension-sdk) enables developers to create custom extensions for Struct PIM. These extensions operate as iframes embedded within the Struct PIM user interface.

<figure><img src="/files/qDVwSwveqo2OfYUO6lwV" alt=""><figcaption></figcaption></figure>

Once a connection has been established using the SDK package, it gives you the option to communicate between the custom app and the PIM through actions and events.

```ts
import { createStructSDK } from '@structdk/extension-sdk';
import type { TabContextPayload } from '@structdk/extension-sdk';

// 1. Create SDK instance (optionally lock to a specific origin)
const struct = createStructSDK({ hostOrigin: 'https://your-struct-instance.struct.com' });

// 2. Request context from the host
const ctx = await struct.actions.getContext<TabContextPayload>();
console.log('Entity:', ctx.entityType, ctx.entityId);
console.log('Slug:', ctx.slug);

// 3. Auto-resize the iframe to fit content
struct.actions.enableAutoResize({ maxHeight: 800 });

// 4. Register event listeners for ongoing changes
struct.events.onEntityChangedEvent((payload) => {
  console.log('Entity updated:', payload.entityId);
});

struct.events.onLanguageChangedEvent((payload) => {
  console.log('Language:', payload.currentLanguage);
});

// 5. Clean up when done
struct.destroy();
```

For more information, see:\
[How to use the Extensions SDK package](/developer/app-integration/how-to-use-the-extensions-sdk-package.md)

### Icon package

[Struct Icon](https://www.npmjs.com/package/@structdk/struct-icon) provides streamlined solutions for PIM and partner developers, prioritizing rapid deployment and easy integration with publish-ready sprites, raw SVGs, and versatile framework components.

<figure><img src="/files/lNMPCRZisPzK8TCPRkWJ" alt=""><figcaption></figcaption></figure>

Below are examples from the npm package page demonstrating its versatility.

{% tabs %}
{% tab title="React" %}

```javascript
// import Calendar24 from '@structdk/struct-icon/react/24/calendar';
<Calendar24 className='w-6 h-6 text-foreground' aria-label='Calendar' />;
```

{% endtab %}

{% tab title="Vue 3" %}

```vue
<script setup>
import Calendar24 from '@structdk/struct-icon/vue/24/calendar.vue';
</script>

<template>
  <Calendar24 class="w-6 h-6 text-foreground" aria-label="Calendar" />
</template>
```

{% endtab %}

{% tab title="Svelte" %}

```svelte
<script>
  import Calendar24 from '@structdk/struct-icon/svelte/24/calendar.svelte';
</script>

<Calendar24 class="w-6 h-6 text-foreground" ariaLabel="Calendar" />
```

{% endtab %}
{% endtabs %}

For more information, see:\
[How to use Icon package](/developer/app-integration/how-to-use-icon-package.md)

### UI package

[Struct UI](https://www.npmjs.com/package/@structdk/ui) provides a ready-to-use CSS file (`struct-ui.css` / `struct-ui.min.css`), featuring a curated collection of components and layout primitives compatible with any tech stack.

<figure><img src="/files/8Ebeu20BpmmGGSvS6Kme" alt=""><figcaption></figcaption></figure>

The UI components are easy to use and require only the CSS file to be imported. Below is an example from the npm package page.

```typescript
// main.jsx / main.tsx
import '@structdk/ui/dist/struct-ui.css';

export function PrimaryButton({ children }) {
  return <button className='btn btn-primary'>{children}</button>;
}
```

For more information, see:\
[How to use UI package](/developer/app-integration/how-to-use-ui-package.md)

## Related articles

* [Quickstart](/developer/app-integration/quickstart.md)
* [Best practices](/developer/api-integration/best-practices.md)
* [App store](/developer/app-store.md)
* [Example projects](/developer/app-integration/example-projects.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.struct.com/developer/app-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.