@elevo-ai/create-plugin 0.1.5

package/bin/create-plugin.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import "../src/index.js";

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@elevo-ai/create-plugin",
+  "version": "0.1.5",
+  "description": "A CLI tool to create Elevo plugins",
+  "type": "module",
+  "bin": {
+    "create-plugin": "bin/create-plugin.js"
+  },
+  "files": [
+    "bin",
+    "src"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "author": "Elevo Team",
+  "license": "MIT",
+  "dependencies": {
+    "minimist": "^1.2.8",
+    "plop": "^4.0.5"
+  }
+}

package/src/index.js

@@ -0,0 +1,30 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import minimist from "minimist";
+import { Plop, run } from "plop";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const args = process.argv.slice(2);
+const argv = minimist(args);
+
+Plop.prepare(
+  {
+    cwd: argv.cwd,
+    configPath: path.join(__dirname, "plopfile.js"),
+    preload: argv.preload || [],
+    completion: argv.completion,
+  },
+  (env) =>
+    Plop.execute(env, (options) =>
+      run(
+        {
+          ...options,
+          // this will make the destination path to be based on the cwd when calling the wrapper
+          dest: process.cwd(),
+        },
+        undefined,
+        true
+      )
+    )
+);

package/src/plopfile.js

@@ -0,0 +1,160 @@
+// @ts-check
+const validPluginId = /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/;
+
+/** @type {import('plop').ActionType[]} */
+const commonFiles = [
+  {
+    type: "addMany",
+    destination: "{{pluginId}}",
+    base: "templates/common",
+    templateFiles: "templates/common/**/*",
+    globOptions: {
+      dot: true,
+    },
+  },
+];
+
+export default function (
+  /** @type {import('plop').NodePlopAPI} */
+  plop
+) {
+  plop.setPartial(
+    "pluginIdPascalCase",
+    "{{pascalCase pluginId}}"
+  );
+  plop.setPartial(
+    "pluginIdTitleCase",
+    "{{titleCase pluginId}}"
+  );
+
+  // create your generators here
+  plop.setGenerator("basics", {
+    prompts: [
+      {
+        type: "list",
+        name: "type",
+        message: "What type of plugin you want to create?",
+        choices: [
+          {
+            name: "Full App + AI Plugin",
+            value: "app-plus",
+          },
+          {
+            name: "UI Extension + AI Plugin",
+            value: "extension-plus",
+          },
+          {
+            name: "AI Plugin",
+            value: "plugin",
+          },
+          {
+            name: "Full App",
+            value: "app",
+          },
+          {
+            name: "UI Extension",
+            value: "extension",
+          },
+        ],
+      },
+      {
+        type: "input",
+        name: "pluginId",
+        message: "Your plugin id:",
+        validate(value) {
+          if (!validPluginId.test(value)) {
+            return "Please enter a lower-kebab-case plugin id.";
+          }
+          return true;
+        },
+      },
+    ],
+    actions(data) {
+      if (data?.type === "plugin") {
+        return [
+          ...commonFiles,
+          {
+            type: "addMany",
+            destination: "{{pluginId}}",
+            base: "templates/plugin",
+            templateFiles: "templates/plugin/**/*",
+            globOptions: {
+              dot: true,
+            },
+          },
+        ];
+      }
+
+      if (data?.type === "app" || data?.type === "extension") {
+        return [
+          ...commonFiles,
+          {
+            type: "addMany",
+            destination: "{{pluginId}}",
+            base: `templates/${data.type}`,
+            templateFiles: `templates/${data.type}/**/*`,
+            globOptions: {
+              dot: true,
+            },
+          },
+          {
+            type: "addMany",
+            destination: "{{pluginId}}/ui",
+            base: "templates/ui",
+            templateFiles: "templates/ui/**/*",
+            globOptions: {
+              dot: true,
+            },
+          },
+        ]
+      }
+
+      if (data?.type === "app-plus" || data?.type === "extension-plus") {
+        const mainType = data.type === "app-plus" ? "app" : "extension";
+        return [
+          ...commonFiles,
+          {
+            type: "addMany",
+            destination: "{{pluginId}}",
+            base: "templates/plugin",
+            templateFiles: "templates/plugin/**/*",
+            globOptions: {
+              dot: true,
+            },
+          },
+          {
+            type: "addMany",
+            destination: "{{pluginId}}",
+            base: `templates/${mainType}`,
+            templateFiles: `templates/${mainType}/**/*`,
+            force: true, // override the files from mainType if exists
+            globOptions: {
+              dot: true,
+            },
+          },
+          {
+            type: "addMany",
+            destination: "{{pluginId}}",
+            base: `templates/${data.type}`,
+            templateFiles: `templates/${data.type}/**/*`,
+            force: true, // override the files from mainType if exists
+            globOptions: {
+              dot: true,
+            },
+          },
+          {
+            type: "addMany",
+            destination: "{{pluginId}}/ui",
+            base: "templates/ui",
+            templateFiles: "templates/ui/**/*",
+            globOptions: {
+              dot: true,
+            },
+          },
+        ];
+      }
+
+      return [];
+    },
+  });
+}

package/src/templates/app/elevo.plugin.json

@@ -0,0 +1,29 @@
+{
+  "name": "{{pluginId}}",
+  "version": "1.0.0",
+  "display_name": "{{>pluginIdTitleCase}}",
+  "description": "Please provide a description for your plugin.",
+  "type": "app",
+  "category": "extensions",
+  "author": {
+    "name": "Elevo Team",
+    "email": "dev@elevo.vip"
+  },
+  "keywords": [],
+
+  "capabilities": {
+    "ui": {
+      "has_interface": true,
+      "entry": "{{>pluginIdPascalCase}}",
+      "mode": "full",
+      "bundle": "ui/dist/app.umd.js"
+    }
+  },
+
+  "permissions": [
+    "workspace:read",
+    "workspace:write",
+    "conversation:read",
+    "conversation:write"
+  ]
+}

package/src/templates/app/ui/src/App.tsx.hbs

@@ -0,0 +1,18 @@
+import { useInjectCSS, usePluginSDK } from '@elevo-ai/plugin-sdk';
+import { useTranslation } from 'react-i18next';
+import './i18n';
+import cssText from './globals.css?inline';
+
+export function {{>pluginIdPascalCase}}() {
+  useInjectCSS(cssText);
+  const sdk = usePluginSDK();
+  const { t } = useTranslation('{{pluginId}}');
+
+  return (
+    <div id="{{pluginId}}">
+      <p>{t('{{pluginId}}')}</p>
+    </div>
+  );
+}
+
+export default {{>pluginIdPascalCase}};

package/src/templates/app-plus/elevo.plugin.json

@@ -0,0 +1,38 @@
+{
+  "name": "{{pluginId}}",
+  "version": "1.0.0",
+  "display_name": "{{>pluginIdTitleCase}}",
+  "description": "Please provide a description for your plugin.",
+  "type": "app",
+  "category": "extensions",
+  "author": {
+    "name": "Elevo Team",
+    "email": "dev@elevo.vip"
+  },
+  "keywords": [],
+
+  "capabilities": {
+    "ui": {
+      "has_interface": true,
+      "entry": "{{>pluginIdPascalCase}}",
+      "mode": "full",
+      "bundle": "ui/dist/app.umd.js"
+    },
+    "prompts": {
+      "skills": [
+        "my-plugin-skill"
+      ],
+      "commands": [
+        "my-plugin-command"
+      ],
+      "agents": ["my-plugin-agent"]
+    }
+  },
+
+  "permissions": [
+    "workspace:read",
+    "workspace:write",
+    "conversation:read",
+    "conversation:write"
+  ]
+}

package/src/templates/common/README.md

@@ -0,0 +1,55 @@
+# {{>pluginIdTitleCase}}
+
+Please provide a description for your plugin.
+
+## 准备工作
+
+配置 npm registry，将 `@elevo-ai/*` 指向内部的 npm 仓库：
+
+```bash
+npm config set @elevo:registry http://registry.npm.easyops.local
+```
+
+## 插件打包
+
+在插件根目录执行如下命令：
+
+```bash
+npx @elevo-ai/plugin-bundle -y
+```
+
+打好的包在 `dist` 目录下。
+
+## UI 开发
+
+仅针对 Full App 和 UI Extension 类型的插件，才会包含 UI 相关的代码。
+
+首先，进入 ui 目录安装依赖：
+
+```bash
+cd ui
+npm install
+```
+
+打开两个终端，均进入 ui 目录，并分别启动开发构建和本地预览：
+
+```bash
+# 1
+cd ui
+npm run dev
+
+# 2
+cd ui
+npm run serve
+```
+
+然后即可打开浏览器访问 `http://localhost:3000`。
+
+命令一用于启动 Vite 开发服务器，监听文件变动并实时构建插件 UI 代码，构建产物会输出到 `ui/dist` 目录；命令二用于启动一个本地服务器，监听 `http://localhost:3000`，用于预览插件在远端主应用中的效果，所有非插件的请求均会透传到远端公共服务器上。
+
+默认的远端公共服务器为 `https://172.30.0.188.nip.io`，可以按需修改，例如：
+
+```bash
+# 启动插件开发服务器，指定远端主应用地址
+npm run serve -- --server=https://my-elevo-instance.com
+``` 

package/src/templates/extension/elevo.plugin.json

@@ -0,0 +1,29 @@
+{
+  "name": "{{pluginId}}",
+  "version": "1.0.0",
+  "display_name": "{{>pluginIdTitleCase}}",
+  "description": "Please provide a description for your plugin.",
+  "type": "app",
+  "category": "extensions",
+  "author": {
+    "name": "Elevo Team",
+    "email": "dev@elevo.vip"
+  },
+  "keywords": [],
+
+  "capabilities": {
+    "ui": {
+      "has_interface": true,
+      "entry": "{{>pluginIdPascalCase}}",
+      "mode": "extension",
+      "bundle": "ui/dist/app.umd.js"
+    }
+  },
+
+  "permissions": [
+    "workspace:read",
+    "workspace:write",
+    "conversation:read",
+    "conversation:write"
+  ]
+}

package/src/templates/extension/ui/src/App.tsx.hbs

@@ -0,0 +1,38 @@
+import { Gauge } from 'lucide-react';
+import { useInjectCSS, usePluginSDK, type ElevoPluginContributes } from '@elevo-ai/plugin-sdk';
+import { useTranslation } from 'react-i18next';
+import './i18n';
+import cssText from './globals.css?inline';
+
+export function {{>pluginIdPascalCase}}() {
+  // This function will not be called
+  return null;
+}
+
+function MyPluginView() {
+  useInjectCSS(cssText);
+  const sdk = usePluginSDK();
+  const { t } = useTranslation('{{pluginId}}');
+
+  return (
+    <div id="{{pluginId}}">
+      <p>{t('{{pluginId}}')}</p>
+    </div>
+  );
+}
+
+const contributes: ElevoPluginContributes = {
+  sidebar: {
+    menuItems: [
+      {
+        id: "{{pluginId}}-view",
+        labelKey: "{{pluginId}}.sidebar.view",
+        defaultLabel: "Dashboard",
+        icon: Gauge,
+        view: MyPluginView,
+      },
+    ],
+  },
+};
+
+export default {{>pluginIdPascalCase}};

package/src/templates/extension-plus/elevo.plugin.json

@@ -0,0 +1,38 @@
+{
+  "name": "{{pluginId}}",
+  "version": "1.0.0",
+  "display_name": "{{>pluginIdTitleCase}}",
+  "description": "Please provide a description for your plugin.",
+  "type": "app",
+  "category": "extensions",
+  "author": {
+    "name": "Elevo Team",
+    "email": "dev@elevo.vip"
+  },
+  "keywords": [],
+
+  "capabilities": {
+    "ui": {
+      "has_interface": true,
+      "entry": "{{>pluginIdPascalCase}}",
+      "mode": "extension",
+      "bundle": "ui/dist/app.umd.js"
+    },
+    "prompts": {
+      "skills": [
+        "my-plugin-skill"
+      ],
+      "commands": [
+        "my-plugin-command"
+      ],
+      "agents": ["my-plugin-agent"]
+    }
+  },
+
+  "permissions": [
+    "workspace:read",
+    "workspace:write",
+    "conversation:read",
+    "conversation:write"
+  ]
+}

package/src/templates/plugin/.claude-plugin/plugin.json

@@ -0,0 +1,9 @@
+{
+  "name": "{{pluginId}}",
+  "version": "1.0.0",
+  "description": "Please provide a description for your plugin.",
+  "author": {
+    "name": "Elevo Team",
+    "email": "dev@elevo.vip"
+  }
+}

package/src/templates/plugin/agents/my-plugin-agent.md

@@ -0,0 +1,9 @@
+---
+name: my-plugin-agent
+description: Please enter a description for My Plugin Agent
+color: purple
+---
+
+# My Plugin Agent
+
+You are a helpful assistant.