Apps (plugins): get started in 10 minutes

In the Deplao interface, plugins are shown as Apps (Ứng dụng), under Tools → Apps, API & Webhook (Công cụ → Ứng dụng, API & Webhook). The docs and source code keep the word plugin: the deplao-plugin.json file, the @deplao/plugin-sdk package, the deplao-plugin command, the /api/v1/plugins endpoint.

A plugin is any app that runs right inside Deplao: internal tools, connectors to your own systems, industry-specific workflows… built with whatever UI and web technology you like. A plugin can add its own pages, panels in the chat screen, buttons in the message composer, workflow nodes, API routes and schedules. Everything a plugin does with data goes through deplao.*: the same API v1, with the same permission checks as external apps.

#1. Create a plugin

node packages/plugin-cli/bin/deplao-plugin.js create my-shop --runtime web --id vn.acme.myshop --name "My Shop"

#2. Try it right in the app

Tools → Apps, API & Webhook (navigation bar) → Develop apps button (Phát triển ứng dụng) → Add development folder (Thêm thư mục đang phát triển) → pick the folder → approve the permissions. The plugin shows up as a tile in the Installed apps (Ứng dụng đã cài) list; click Open (Mở) to go to the plugin's page, or click the tile to see its details, settings and log. When you edit files in backend/ the plugin reloads automatically; after UI changes, click the reload button at the top of the plugin page.

#3. Call Deplao from the UI

<script src="/__deplao/sdk.js"></script>
<script src="app.js" defer></script>

deplao.ready(async () => {
  const accounts = await deplao.accounts.listAccounts();
  const convs = await deplao.chat.listConversations({ accountId: accounts[0].id, limit: 10 });
  await deplao.chat.sendMessage({ accountId: accounts[0].id, threadId: convs[0].thread_id, text: 'Hello' });
  deplao.events.on('message.received', (ev) => console.log(ev.data.message.text));
});

• Function name = the endpoint's operationId (see the endpoint list on this site). Parameters are flat: path + query (GET/DELETE) or body (POST/PUT/PATCH).
• Inline scripts are blocked by the CSP: put your code in a separate .js file.
• Any UI stack works: plain CSS, Tailwind, React, Vue, Svelte… built into static files in the UI folder (scripts/CSS/fonts from a CDN are blocked by the CSP: bundle them with the plugin).
• Matching Deplao's light/dark theme (optional): read deplao.ui.theme() / deplao.ui.onTheme(), or use the CSS variables --dp-bg, --dp-surface, --dp-text, --dp-text-muted, --dp-accent, --dp-border… that the SDK sets on the page.

#4. Package and install

node packages/plugin-cli/bin/deplao-plugin.js validate my-shop
node packages/plugin-cli/bin/deplao-plugin.js pack my-shop

Tools → Apps, API & Webhook → Install app (Cài ứng dụng) (choose the .zip file). To update, install a zip with a higher version; new permissions must be approved again.

Sample plugins: examples/plugins/hello-world (web), spa-booking (local, uses nearly every extension point), order-sync-remote (remote).