Integrate Blocklet Studio

Developers of ArcBlocklet should all be familiar with this diagram, which shows how AIGNE utilizes Blocklet Studio and Blocklet Store to form a flywheel effect. AIGNE users can create many applications and publish them to the Store, thereby feeding back into AIGNE's ecosystem. In fact, any developer of a Blocklet can create their own flywheel effect by integrating Blocklet Studio and Blocklet Store.

What types of Blocklets are suitable for integration with Blocklet Studio?

Most Blocklets do not need to integrate with Blocklet Studio. All Blocklet administrators can use Blocklet Studio by default, but if you want Blocklet users to also use Blocklet Studio, you need to integrate the Blocklet with Blocklet Studio.

A typical scenario for integrating a Blocklet is when your Blocklet needs to provide users with the ability to create Blocklets and distribute them through the Blocklet Store.

Here are some examples of cases where integrating Blocklet Studio is suitable:

Seamlessly Integrate Blocklet Studio in Blocklet

Integrating Blocklet Studio in Blocklet is very simple, just declare it using React components:

import { BlockletStudio } from '@blocklet/ui-react';

<BlockletStudio

mode="dialog"

tenantScope={project.id}

componentDid={MY_COMPONENT_DID}

open={open}

setOpen={() => setOpen()}

onOpened={() => onOpened?.()}
/>

Customizing Default Parameters and Optional Resources

Each project has unique requirements, so users can customize the default parameters and optional resources of the Blocklet Studio creation process. Users can set common parameters and resources in advance according to the specific situation of the project, saving publishing steps. Here is a more complete parameter example:

import { BlockletStudio } from '@blocklet/ui-react';

<BlockletStudio

...

// Information for creating the application

title={project.name || ''}

description={project.description || ''}

note=""

introduction=""

logo={logo}

componentDid={MY_COMPONENT_DID}

// Parameters to pass through to get blocklet resource

resourcesParams={{ projectId: project.id }}

// Whether the user can edit dependent components

dependentComponentsMode="readonly"

// Default selected resources

resources={{

[MY_COMPONENT_DID]: [],

}}
/>

Complete component parameters:

interface BlockletStudioProps {
  open: boolean;
  setOpen: (open: boolean) => void;
  onOpened?: () => void;
  componentDid: string;
  tenantScope?: string;
  resourcesParams?: Record<string, any>;
  mode?: string;
  title?: string;
  logo?: string;
  description?: string;
  introduction?: string;
  note?: string;
  onUploaded?: (data: unknown) => void; // Callback function after upload
  onReleased?: (data: unknown) => void; // Callback function after releasing a new release
  onConnected?: (data: unknown) => void; // Callback function after connection
  components?: Record<string, unknown>[]; // Default components list
  resources?: Record<string, unknown>; // Default resources
  componentsTitle?: string;
  resourcesTitle?: string;
  style?: React.CSSProperties;
  zIndex?: number;
  dependentComponentsMode?: 'auto' | 'readonly'; // Disable component selection
}

Integrated Effect Demonstration

By above method, the integrated Blocklet Studio effect of AIGNE internally is as follows:

Multi-tenant mode and Single-tenant mode

To meet the needs of different users, the new version distinguishes in detail between multi-tenant mode and single-tenant mode. In multi-tenant mode, each user can only manage the Blocklet they created themselves. In Dahboard, we can modify the tenant mode of Blocklet, and Blocklet Studio will follow this configuration, without the need for additional development for different tenant modes.