Skip to main content

Build your first Add-on (Hello World)

Welcome to the BCMLogic Next developer ecosystem. This guide will walk you through creating, configuring, and deploying a simple "Hello World" module that integrates directly into the platform's main navigation.

1. Register Your App​

Before coding, you need to register your intent in the Developer Portal.

  1. Go to developer.bcmlogic.com.
  2. Navigate to Apps > Create New App.
  3. Set the Name: Hello-BCM-Plugin.
  4. Store your generated Client ID and App Secret securely.

2. The Manifest File​

The manifest.json is the core of your plugin. It defines how BCMLogic Next should "plug" your code into the interface.

Create a file named manifest.json:

{
  "pluginId": "com.developer.helloworld",
  "version": "1.0.0",
  "name": "Hello BCM World",
  "description": "My first integrated navigation plugin",
  "author": "Your Name/Company",
  "entryPoint": "http://localhost:3000/main.js", 
  "navigation": [
    {
      "id": "hello-world-menu",
      "label": "My Plugin",
      "parent": "main_sidebar",
      "icon": "v-icon-hand-wave",
      "route": "/hello-plugin"
    }
  ],
  "scopes": ["identity.read", "storage.basic"]
}

3. Frontend Development (Vue 3)​

To ensure a seamless user experience, plugins must use our standard UI components. This ensures your module looks and feels like a native part of the platform.

Install the BCMLogic UI Kit:

Bash npm install @bcmlogic/ui-kit Create your main component (App.vue):

Fragment kodu

<template>
  <BCM-Page-Header title="Welcome to BCMLogic Next!" />
  
  <BCM-Card shadow="hover">
    <p>This content is rendered from an external developer plugin via the BCMLogic Bridge.</p>
    <BCM-Button @click="sayHello" type="primary">Click Me</BCM-Button>
  </BCM-Card>
</template>

<script setup>
import { BCMButton, BCMCard, BCMPageHeader } from '@bcmlogic/ui-kit';

const sayHello = () => {
  alert('Plugin is up and running inside BCMLogic Next!');
};
</script>

4. Local Testing (Sideloading)​

BCMLogic Next allows you to test plugins locally before they are published to the Marketplace.

Start your local development server (e.g., Vite/Webpack on http://localhost:3000).

Log in to your BCMLogic Next Sandbox instance.

Navigate to User Settings > Developer Tools > Local Sideloading.

Paste the URL pointing to your local manifest.json.

Click "Install Local Plugin".

5. Verification​

Refresh the BCMLogic Next dashboard.

You should now see the "My Plugin" entry in the left-hand navigation sidebar.

Click the menu item. If the page renders with the header and button, your integration is successful!

Next Steps

Ready to do more? Check out our API Documentation to learn how to interact with real GRC data, Risks, and Assets.