Add env vars, clean up ux, and set-up automated npm publishing (#2)

* Add env vars and clean up ux

* Bump package and add gh action

* Address comments

Author: juecd

.github/workflows/publish.yml

@@ -0,0 +1,47 @@
+name: Publish Package
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0  # Required for version bumping
+      
+      - name: Setup Git
+        run: |
+          git config --global user.name 'GitHub Actions'
+          git config --global user.email '[email protected]'
+      
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+      
+      - name: Install dependencies
+        run: bun install
+      
+      - name: Run linting
+        run: bun run lint
+      
+      - name: Build
+        run: bun run build
+      
+      - name: Bump version and push
+        run: |
+          git remote set-url origin https://x-access-token:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
+          npm version patch -m "chore: bump version to %s [skip ci]"
+          git push origin HEAD:main --tags
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      
+      - name: Publish to NPM
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 

README.md

@@ -41,17 +41,17 @@ create-kernel-app [app-name] [options]
 
 Create a TypeScript application with a sample app:
 ```bash
-npx create-kernel-app my-app --language typescript --template sample-app
+npx @onkernel/create-kernel-app my-app --language typescript --template sample-app
 ```
 
 Create a Python application with a sample app:
 ```bash
-npx create-kernel-app my-app --language python --template sample-app
+npx @onkernel/create-kernel-app my-app --language python --template sample-app
 ```
 
 Create a Python application with Browser Use template:
 ```bash
-npx create-kernel-app my-app --language python --template browser-use
+npx @onkernel/create-kernel-app my-app --language python --template browser-use
 ```
 
 ## Next Steps

index.ts

@@ -45,9 +45,9 @@ const TEMPLATES: Record<TemplateKey, TemplateInfo> = {
 };
 
 const INVOKE_SAMPLES: Record<string, string> = {
-  'ts-basic': 'kernel invoke ts-basic get-page-title --payload \'{"url": "https://www.google.com"}\'',
-  'python-basic': 'kernel invoke python-basic get-page-title --payload \'{"url": "https://www.google.com"}\'',
-  'python-bu': 'kernel invoke python-bu bu-task --payload \'{"task": "Compare the price of gpt-4o and DeepSeek-V3", "openai_api_key": "XXX"}\''
+  'typescript-sample-app': 'kernel invoke ts-basic get-page-title --payload \'{"url": "https://www.google.com"}\'',
+  'python-sample-app': 'kernel invoke python-basic get-page-title --payload \'{"url": "https://www.google.com"}\'',
+  'python-browser-use': 'kernel invoke python-bu bu-task --payload \'{"task": "Compare the price of gpt-4o and DeepSeek-V3"}\''
 };
 
 const CONFIG = {
@@ -227,52 +227,24 @@ async function setupDependencies(appPath: string, language: LanguageKey): Promis
 // Print success message with next steps
 function printNextSteps(appName: string, language: LanguageKey, template: TemplateKey): void {
   // Determine which sample command to show based on language and template
-  let sampleCommand = '';
-  if (language === LANGUAGE_TYPESCRIPT) {
-    sampleCommand = INVOKE_SAMPLES['ts-basic'];
-  } else if (language === LANGUAGE_PYTHON) {
-    sampleCommand = template === TEMPLATE_SAMPLE_APP 
-      ? INVOKE_SAMPLES['python-basic'] 
-      : INVOKE_SAMPLES['python-bu'];
-  }
+  const deployCommand = language === LANGUAGE_TYPESCRIPT ? 'kernel deploy index.ts'
+  : language === LANGUAGE_PYTHON && template === TEMPLATE_SAMPLE_APP ? 'kernel deploy main.py'
+  : language === LANGUAGE_PYTHON && template === TEMPLATE_BROWSER_USE ? 'kernel deploy main.py --env OPENAI_API_KEY=XXX'
+  : '';
 
+
   console.log(chalk.green(`
 🎉 Kernel app created successfully!
 
 Next steps:
   cd ${appName}
-  ${language === LANGUAGE_PYTHON ? 'uv venv && source .venv/bin/activate && uv sync' : ''}
   export KERNEL_API_KEY=<YOUR_API_KEY>
-  kernel deploy ${language === LANGUAGE_TYPESCRIPT ? 'index.ts' : 'main.py'}
-  kernel invoke ${sampleCommand}
+  ${language === LANGUAGE_PYTHON ? 'uv venv && source .venv/bin/activate && uv sync' : ''}
+  ${deployCommand}
+  ${INVOKE_SAMPLES[`${language}-${template}`]}
   `));
 }
 
-// Validate language and template combination only when both are explicitly provided
-function validateLanguageTemplateCombination(language: LanguageKey | null, template: TemplateKey | null): { isValid: boolean; errorMessage?: string } {
-  // If either is not provided, consider it valid (will be prompted later)
-  if (!language || !template) {
-    return { isValid: true };
-  }
-  
-  if (!TEMPLATES[template as TemplateKey]) {
-    return { 
-      isValid: false, 
-      errorMessage: `Invalid template '${template}'. Available templates: ${Object.keys(TEMPLATES).join(', ')}` 
-    };
-  }
-  
-  if (!isTemplateValidForLanguage(template, language)) {
-    return { 
-      isValid: false, 
-      errorMessage: `Template '${template}' is not available for ${LANGUAGES[language].name}. ` +
-        `This template is only available for: ${TEMPLATES[template as TemplateKey].languages.map(l => LANGUAGES[l].name).join(', ')}` 
-    };
-  }
-  
-  return { isValid: true };
-}
-
 // Main program
 const program = new Command();
 
@@ -285,22 +257,44 @@ program
   .option('-t, --template <template>', `Template type (${TEMPLATE_SAMPLE_APP}, ${TEMPLATE_BROWSER_USE})`)
   .action(async (appName: string, options: { language?: string; template?: string }) => {
     try {
-      // Only validate if both language and template are provided
-      if (options.language?.toLowerCase() && options.template?.toLowerCase()) {
-        const normalizedLanguage = normalizeLanguage(options.language);
-        const validation = validateLanguageTemplateCombination(normalizedLanguage, options.template as TemplateKey);
-        
-        if (!validation.isValid) {
-          console.error(chalk.red('Error:'), validation.errorMessage);
-          console.log(chalk.yellow('\nPlease try again with a valid combination.'));
-          process.exit(1);
+      let normalizedLanguage: LanguageKey | null = null;
+      let normalizedTemplate: TemplateKey | null = null;
+      
+      // Try to normalize and validate language if provided
+      if (options.language?.toLowerCase()) {
+        normalizedLanguage = normalizeLanguage(options.language);
+        if (!normalizedLanguage) {
+          console.log(chalk.yellow(`\nInvalid language '${options.language}'. Please select a valid language.`));
+        }
+      }
+      
+      // Try to normalize and validate template if provided
+      if (options.template?.toLowerCase()) {
+        normalizedTemplate = options.template as TemplateKey;
+        if (!TEMPLATES[normalizedTemplate]) {
+          console.log(chalk.yellow(`\nInvalid template '${options.template}'. Please select a valid template.`));
+          normalizedTemplate = null;
+        }
+      }
+      
+      // If both are provided, validate the combination
+      if (normalizedLanguage && normalizedTemplate) {
+        console.log(normalizedLanguage, normalizedTemplate);
+        const isValid = isTemplateValidForLanguage(normalizedTemplate, normalizedLanguage);
+        if (!isValid) {
+          const errorMessage =  `Template '${normalizedTemplate}' is not available for ${LANGUAGES[normalizedLanguage].name}. ` +
+            `This template is only available for: ${TEMPLATES[normalizedTemplate as TemplateKey].languages.map(l => LANGUAGES[l].name).join(', ')}` 
+          console.log(chalk.yellow(`\n${errorMessage}`));
+          // Reset both to force prompting
+          normalizedLanguage = null;
+          normalizedTemplate = null;
         }
       }
 
       // Get user inputs (with prompts if needed)
       const finalAppName = await promptForAppName(appName);
-      const language = await promptForLanguage(options.language);
-      const template = await promptForTemplate(language, options.template);
+      const language = await promptForLanguage(normalizedLanguage || undefined);
+      const template = await promptForTemplate(language, normalizedTemplate || undefined);
 
       const appPath = path.resolve(finalAppName);
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onkernel/create-kernel-app",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Create Kernel sample applications",
   "main": "dist/index.js",
   "type": "module",

templates/python/browser-use/README.md

@@ -2,10 +2,4 @@
 
 This is a simple Kernel application that implements the Browser Use SDK.
 
-To set up your Python environment, run:
-
-```bash
-python -m venv venv && source venv/bin/activate && pip install -r requirements.txt
-```
-
 See the [docs](https://docs.onkernel.com/build/browser-frameworks) for information.

templates/python/browser-use/main.py

@@ -12,6 +12,10 @@
 class TaskInput(TypedDict):
     task: str
     openai_api_key: str
+    
+# LLM API Keys are set in the environment during `kernel deploy <filename> --env OPENAI_API_KEY=XXX`
+# See https://docs.onkernel.com/launch/deploy#environment-variables
+llm = ChatOpenAI(model="gpt-4o")
 
 @app.action("bu-task")
 async def bu_task(ctx: kernel.KernelContext, input_data: TaskInput):
@@ -25,9 +29,6 @@ async def bu_task(ctx: kernel.KernelContext, input_data: TaskInput):
     Returns:
         An object with final_result and errors properties
     """
-    os.environ["OPENAI_API_KEY"] = input_data["openai_api_key"]
-    
-    llm = ChatOpenAI(model="gpt-4o")
 
     kernel_browser = client.browsers.create(invocation_id=ctx.invocation_id)
     print("Kernel browser live view url: ", kernel_browser.browser_live_view_url)

templates/typescript/sample-app/package.json

@@ -7,7 +7,7 @@
       "typescript": "^5"
     },
     "dependencies": {
-      "@onkernel/sdk": "0.1.0-alpha.11",
+      "@onkernel/sdk": "0.1.0-alpha.12",
       "playwright": "^1.52.0"
     }
   }