@vertesia/create-plugin 0.79.3 → 0.79.4

package/templates/web/README.md

@@ -1,54 +1,156 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+# Vertesia Custom App Sample
+
+A sample project demonstrating how to build a custom app/plugin for the Vertesia platform using React, TypeScript, and Vite.
+
+## Overview
+
+This project serves as a template for building Vertesia plugins that can be integrated into the Vertesia platform. It includes:
+
+- React 19 with TypeScript for type-safe component development
+- Tailwind CSS for styling
+- Vite for fast development and optimized builds
+- Dual build modes: standalone app and plugin library
+
+## Project Structure
+
+```txt
+src/
+├── app.tsx          # Main app component with router
+├── plugin.tsx       # Plugin entry point for Vertesia integration
+├── routes.tsx       # Application route definitions
+├── pages.tsx        # Page components
+└── main.tsx         # Dev mode entry point
+```
+
+## Getting Started
+
+### Installation
+
+```bash
+pnpm install
+```
+
+### Development
+
+Run the app in development mode with hot module replacement:
+
+```bash
+pnpm dev
+```
+
+The app will be available at `https://localhost:5173`.
+
+### Building
+
+Build both standalone app and plugin library:
+
+```bash
+pnpm build
+```
+
+Or build individually:
+
+```bash
+# Build standalone app
+pnpm build:app
+
+# Build plugin library
+pnpm build:lib
+```
+
+The plugin library will be output to the `dist/lib/` directory.
+
+## Deployment
+
+Since this is a standard web application, you can deploy it to any static hosting provider (Vercel, Netlify, Cloudflare Pages, AWS S3, etc.).
+
+### Deploying to Vercel
+
+Vercel is a practical deployment option with a generous free tier. You can very simply deploy your standalone app using the Vercel CLI.
+
+#### Setup
+
+Install the Vercel CLI globally:
+
+```bash
+npm i -g vercel
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
+#### Deployment Steps
+
+1. **Login to Vercel**:
+
+    ```bash
+    vercel login
+    ```
+
+2. **Deploy to preview**:
+
+    ```bash
+    vercel
+    ```
+
+    This will create a preview deployment and provide you with a URL to test your app.
+
+3. **Deploy to production**:
+
+    ```bash
+    vercel --prod
+    ```
+
+For more information, visit the [Vercel CLI documentation](https://vercel.com/docs/cli).
+
+#### Update App Manifest with Deployment URL
+
+After deploying to Vercel, update your app manifest to point to the deployed URL using the vertesia CLI:
+
+```bash
+vertesia apps update <appId> --manifest '{
+  "name": "my-app",
+  "title": "My App",
+  "description": "A sample app",
+  "publisher": "your-org",
+  "private": true,
+  "status": "beta",
+  "ui": {
+    "src": "https://your-app.vercel.app/lib/plugin.js",
+    "isolation": "shadow"
+  }
+}'
 ```
+
+Replace `appId` by the actual ID and `https://your-app.vercel.app` with your actual Vercel deployment URL.
+
+## Key Features
+
+### Dual Build Modes
+
+- **App Mode**: Builds a standalone application for development and testing
+- **Library Mode**: Builds a plugin that can be integrated into the Vertesia platform
+
+### External Dependencies
+
+When building as a plugin, React and Vertesia dependencies are externalized to prevent duplication:
+
+- `react` / `react-dom`
+- `@vertesia/common`
+- `@vertesia/ui`
+
+## Tech Stack
+
+- **React 19** - UI framework
+- **TypeScript** - Type safety
+- **Vite** - Build tool and dev server
+- **Tailwind CSS 4** - Styling
+- **@vertesia/ui** - Vertesia UI components
+- **@vertesia/plugin-builder** - Plugin build utilities
+
+## Development Notes
+
+- The dev server uses HTTPS (via `@vitejs/plugin-basic-ssl`)
+- CSS can be inlined in the plugin bundle or kept separate (configured in [vite.config.ts](vite.config.ts))
+- For debugging Vertesia UI sources, set `VERTESIA_UI_PATH` in [vite.config.ts](vite.config.ts)
+
+## License
+
+See package.json for license information.

package/templates/web/eslint.config.js

@@ -3,8 +3,9 @@ import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
+import { defineConfig } from 'eslint/config';
 
-export default tseslint.config(
+export default defineConfig(
   { ignores: ['dist'] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],

package/templates/web/gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+lib
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/templates/web/index.html.tmpl

@@ -9,10 +9,10 @@
   <script type="importmap">
       {
         "imports": {
-          "react": "https://esm.sh/react@19.0.0",
-          "react-dom": "https://esm.sh/react-dom@19.0.0",
-          "react-dom/client": "https://esm.sh/react-dom@19.0.0/client",
-          "react/jsx-runtime": "https://esm.sh/react@19.0.0/jsx-runtime"
+          "react": "https://esm.sh/react@19.1.2",
+          "react-dom": "https://esm.sh/react-dom@19.1.2",
+          "react-dom/client": "https://esm.sh/react-dom@19.1.2/client",
+          "react/jsx-runtime": "https://esm.sh/react@19.1.2/jsx-runtime"
         }
       }
     </script>

package/templates/web/src/env.ts.tmpl

@@ -4,17 +4,11 @@ Env.init({
     name: "${plugin_title}",
     version: "1.0.0",
     isLocalDev: true,
-    isDocker: false,
+    isDocker: true,
     type: "development",
     endpoints: {
-        studio: "http://127.0.0.1:8091",
-        zeno: "http://127.0.0.1:8092",
-    },
-    firebase: {
-        apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
-        authDomain: window.location.host,
-        projectId: "dengenlabs",
-        appId: "1:265888598630:web:6e5e76c8ecde887e5afba7"
-    },
-    datadog: false,
+        studio: "https://api.vertesia.io",
+        zeno: "https://api.vertesia.io",
+        sts: "https://sts.vertesia.io",
+    }
 });

package/templates/web/vite.config.ts.tmpl

@@ -40,7 +40,7 @@ const inlineCss = ${ inlineCss };
  * Vite configuration to build the plugin as a library or as a standalone application or to run the application in dev mode.
  * Use `vite build --mode lib` to build a library (plugin)
  * Use `vite build` or `vite build --mode app`to build a standalone application
- * Use `vite dev` to run the applicaiton in dev mode.
+ * Use `vite dev` to run the application in dev mode.
  */
 export default defineConfig((env) => {
     if (env.mode === 'lib') {
@@ -83,7 +83,7 @@ function defineLibConfig({ command }: ConfigEnv): UserConfig {
 }
 
 /**
- * Vite configuration to run the applicaiton in dev mode
+ * Vite configuration to run the application in dev mode
  * or to build a standalone application.
  * @returns
  */
@@ -115,8 +115,10 @@ function defineAppConfig(): UserConfig {
         resolve: {
             // For debug support in vertesia ui sources - link to the vertesia/ui location
             alias: VERTESIA_UI_PATH ? {
-                "@vertesia/ui/*": resolve(`${VERTESIA_UI_PATH}/src/*/index.ts`)
-            } : undefined
+                "@vertesia/ui": resolve(`${VERTESIA_UI_PATH}/src`)
+            } : undefined,
+            // Deduplicate React to prevent multiple instances
+            dedupe: ['react', 'react-dom']
         }
     }
 }

package/templates/tool/src/tools/WeatherTool.ts

@@ -1,25 +0,0 @@
-import type { Tool, ToolFunctionParams } from "@vertesia/agent-sdk";
-
-interface WeatherToolParams {
-    location: string;
-}
-
-export const WeatherTool = {
-    name: "weather",
-    description: "Get the current weather for a given location.",
-    input_schema: {
-        type: "object",
-        properties: {
-            location: {
-                type: "string",
-                description: "The location to get the weather for, e.g., 'New York, NY'."
-            }
-        },
-        required: ["location"]
-    },
-    run: async (params: ToolFunctionParams<WeatherToolParams>) => {
-        const { location } = params.input;
-        // Simulate fetching weather data
-        return `The current weather in ${location} is sunny with a temperature of 75°F.`;
-    }
-} satisfies Tool<WeatherToolParams>;