feat: update template for composite app

templates/plugin-template/src/tool-server/config.ts

@@ -5,6 +5,7 @@ import { skills } from "./skills/index.js";
 import { tools } from "./tools/index.js";
 import { types } from "./types/index.js";
 import settingsSchema from "./settings.js";
+import uiNavItems from "./ui-nav-items.js";
 
 const CONFIG__SERVER_TITLE = "Tool Server Template";
 export const ServerConfig = {
@@ -18,7 +19,9 @@ export const ServerConfig = {
     mcpProviders,
     uiConfig: {
         isolation: "shadow",
-        src: "/lib//plugin.js",
+        src: "/lib/plugin.js",
+        available_in: ["app_portal", "composite_app"],
+        navigation: uiNavItems, // optional navigation configuration for the Composite App sidebar
     },
     settings: settingsSchema, // change this to point to your settings JSON schema
 } satisfies ToolServerConfig;

templates/plugin-template/src/tool-server/ui-nav-items.ts

@@ -0,0 +1,14 @@
+import { AppUINavItem } from "@vertesia/common";
+
+/**
+ * Optional App UI Navigation configuration
+ * Used to configure the optional navigation subitems that you want to display within the Composite App sidebar
+ * Icons can be any of the icons from https://lucide.dev/icons, or an SVG element as a string
+ * Route is the subpath to navigate to when the item is clicked, relative to the plugin's base URL
+ * If your plugin does not have a UI, or you do not want to add additional navigation items, you can set this to an empty array
+ * Note: this does not create the actual UI routes -- it is a map of existing routes you wish to expose as subitems in the Composite App.
+ */
+export default [
+    { label: "Home Page", icon: "Star", route: "/" },
+    { label: "Next Page", icon: "Square", route: "/next" },
+] satisfies AppUINavItem[];

templates/plugin-template/src/ui/plugin.tsx

@@ -5,7 +5,10 @@ import { App } from "./app";
  * Export the plugin component.
  */
 export default function TEMPLATE__PluginComponentName({ slot }: { slot: string }) {
-    if (slot === "page") {
+    // Render the plugin component based on the slot.
+    // Slot "page" is used in the App Portal
+    // Slot "content" is used in the Composite App
+    if (slot === "page" || slot === "content") {
         return (
             <PortalContainerProvider>
                 <App />

templates/ui-plugin-template/src/plugin.tsx

@@ -5,7 +5,10 @@ import { App } from "./app";
  * Export the plugin component.
  */
 export default function TEMPLATE__PluginComponentName({ slot }: { slot: string }) {
-    if (slot === "page") {
+    // Render the plugin component based on the slot.
+    // Slot "page" is used in the App Portal
+    // Slot "content" is used in the Composite App
+    if (slot === "page" || slot === "content") {
         return (
             <PortalContainerProvider>
                 <App />