create-bubblelab-app 0.1.0 → 0.1.2

package/bin/cli.js

@@ -33,6 +33,11 @@ async function main() {
           value: 'basic',
           description: 'AI agent that researches weather using web search',
         },
+        {
+          title: 'Reddit News Scraper',
+          value: 'reddit-scraper',
+          description: 'AI agent that scrapes Reddit and summarizes news',
+        },
       ],
       initial: 0,
     },
@@ -47,6 +52,18 @@ async function main() {
       ],
       initial: 0,
     },
+    {
+      type: 'password',
+      name: 'googleApiKey',
+      message: 'Enter your Google API key (required for AI models):',
+      validate: (value) =>
+        value.length > 0 ? true : 'Google API key is required',
+    },
+    {
+      type: 'password',
+      name: 'firecrawlApiKey',
+      message: 'Enter your Firecrawl API key (optional, press Enter to skip):',
+    },
   ]);
 
   if (!response.projectName) {
@@ -54,7 +71,13 @@ async function main() {
     process.exit(1);
   }
 
-  const { projectName, template, packageManager } = response;
+  const {
+    projectName,
+    template,
+    packageManager,
+    googleApiKey,
+    firecrawlApiKey,
+  } = response;
   const targetDir = path.join(process.cwd(), projectName);
 
   // Check if directory exists
@@ -77,6 +100,24 @@ async function main() {
   packageJson.name = projectName;
   fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
 
+  // Create .env file with API keys
+  console.log(pc.cyan('🔑 Creating .env file...\n'));
+  const envContent = [
+    '# BubbleLab Configuration',
+    '# Google API Key (required for AI models)',
+    `GOOGLE_API_KEY=${googleApiKey}`,
+    '',
+    '# Firecrawl API Key (optional, for advanced web scraping)',
+    firecrawlApiKey
+      ? `FIRECRAWL_API_KEY=${firecrawlApiKey}`
+      : '# FIRECRAWL_API_KEY=your_firecrawl_api_key_here',
+    '',
+    '# Other optional configurations',
+    '# CITY=New York',
+    '',
+  ].join('\n');
+  fs.writeFileSync(path.join(targetDir, '.env'), envContent);
+
   // Install dependencies
   console.log(pc.cyan('📦 Installing dependencies...\n'));
   try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bubblelab-app",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "license": "Apache-2.0",
   "description": "Create BubbleLab AI agent applications with one command",

package/templates/basic/package.json

@@ -3,14 +3,16 @@
   "version": "0.1.0",
   "type": "module",
   "private": true,
+  "description": "BubbleLab AI agent application",
   "scripts": {
     "dev": "tsx src/index.ts",
     "build": "tsc",
-    "start": "node dist/index.js"
+    "start": "node dist/index.js",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@bubblelab/bubble-core": "^0.1.0",
-    "@bubblelab/bubble-runtime": "^0.1.0"
+    "@bubblelab/bubble-core": "^0.1.1",
+    "@bubblelab/bubble-runtime": "^0.1.4"
   },
   "devDependencies": {
     "@types/node": "^20.12.12",

package/templates/basic/src/index.ts

@@ -11,7 +11,16 @@
 
 import { BubbleRunner } from '@bubblelab/bubble-runtime';
 import { BubbleFactory } from '@bubblelab/bubble-core';
-import { WeatherFlow } from './weather-flow.js';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { config } from 'dotenv';
+import { CredentialType } from '@bubblelab/shared-schemas';
+
+// Load environment variables from .env file
+config();
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
 
 async function main() {
   console.log('🫧 BubbleLab Weather Agent\n');
@@ -21,11 +30,13 @@ async function main() {
   await bubbleFactory.registerDefaults();
   console.log('✅ BubbleFactory initialized\n');
 
-  // Step 2: Create a BubbleRunner with your flow
-  const runner = new BubbleRunner(WeatherFlow, bubbleFactory);
-  console.log('✅ BubbleRunner created\n');
+  // Step 2: Read the flow code as a string
+  const flowCode = readFileSync(join(__dirname, 'weather-flow.ts'), 'utf-8');
 
-  // Step 3: (Optional) Modify bubble parameters dynamically
+  // Step 3: Create a BubbleRunner with your flow code
+  const runner = new BubbleRunner(flowCode, bubbleFactory);
+
+  // Step 4: (Optional) Modify bubble parameters dynamically
   const bubbles = runner.getParsedBubbles();
   const bubbleIds = Object.keys(bubbles).map(Number);
 
@@ -39,12 +50,17 @@ async function main() {
       `What is the current weather in ${city}? Find information from the web and provide a detailed report.`
     );
   }
+  // Inject the credentials
+  runner.injector.injectCredentials(bubbles, [], {
+    [CredentialType.GOOGLE_GEMINI_CRED]: process.env.GOOGLE_GEMINI_CRED,
+    [CredentialType.FIRECRAWL_API_KEY]: process.env.FIRECRAWL_API_KEY,
+  });
 
-  // Step 4: Execute the flow
+  // Step 5: Execute the flow
   console.log('🤖 Running AI agent...\n');
   const result = await runner.runAll();
 
-  // Step 5: Display results
+  // Step 6: Display results
   console.log('📊 Results:');
   console.log('─'.repeat(50));
   console.log(JSON.stringify(result, null, 2));
@@ -63,6 +79,9 @@ async function main() {
     console.log('\n📈 Execution Summary:');
     console.log(summary);
   }
+
+  // Force exit to close any lingering connections (AI model HTTP clients, etc.)
+  process.exit(0);
 }
 
 // Run the example

package/templates/reddit-scraper/.env.example

@@ -0,0 +1,10 @@
+# Google Gemini API Key (required for AI agent)
+# Get your key at: https://aistudio.google.com/app/apikey
+GOOGLE_API_KEY=your_google_api_key_here
+
+# Optional: Specify subreddit to scrape (default: worldnews)
+SUBREDDIT=worldnews
+
+# Optional: Number of posts to scrape (default: 10)
+POST_LIMIT=10
+

package/templates/reddit-scraper/.tmp/bubble-script-1759870622580-qdld7i.ts

@@ -0,0 +1,103 @@
+/**
+ * Reddit News Scraper Flow
+ *
+ * This is a simple BubbleFlow that scrapes Reddit and summarizes news posts.
+ */
+import {
+  BubbleFlow,
+  RedditScrapeTool,
+  AIAgentBubble,
+  type WebhookEvent,
+} from '@bubblelab/bubble-core';
+import { CredentialType } from '@bubblelab/shared-schemas';
+import { config } from 'dotenv';
+
+// Load environment variables from .env file
+config();
+
+/**
+ * Payload interface for the Reddit news flow
+ */
+interface RedditNewsPayload extends WebhookEvent {
+  subreddit: string;
+  limit: number;
+}
+
+/**
+ * RedditNewsFlow - Scrapes Reddit and summarizes news
+ *
+ * This flow demonstrates:
+ * - Using RedditScrapeTool to scrape subreddit posts
+ * - Using AIAgentBubble to analyze and summarize content
+ * - Simple 2-step workflow
+ */
+export class RedditNewsFlow extends BubbleFlow<'webhook/http'> {
+  async handle(payload: RedditNewsPayload) {
+    const subreddit = payload.subreddit || 'worldnews';
+    this.logger?.logLine(36, 'Statement: VariableDeclaration');
+    const limit = payload.limit || 10;
+    this.logger?.logLine(37, 'Statement: VariableDeclaration');
+
+    // Step 1: Scrape Reddit for posts
+    const scrapeResult = await new RedditScrapeTool({
+    subreddit: subreddit,
+    sort: 'hot',
+    limit: limit
+  }, {logger: this.logger, variableId: 417, dependencyGraph: {"name":"reddit-scrape-tool","uniqueId":"417","variableId":417,"variableName":"scrapeResult","nodeType":"tool","dependencies":[]}, currentUniqueId: "417"}).action();
+    this.logger?.logLine(44, 'Statement: VariableDeclaration');
+
+    if (!scrapeResult.success || !scrapeResult.data?.posts) {
+      throw new Error('Failed to scrape Reddit or no posts found.');
+    this.logger?.logLine(47, 'Statement: ThrowStatement');
+    }
+    this.logger?.logLine(48, 'Statement: IfStatement');
+
+    const posts = scrapeResult.data.posts;
+    this.logger?.logLine(50, 'Statement: VariableDeclaration');
+
+    // Format posts for AI
+    const postsText = posts
+      .map(
+        (
+          post: {
+            title: string;
+            score: number;
+            selftext: string;
+            postUrl: string;
+          },
+          i: number
+        ) =>
+          `${i + 1}. "${post.title}" (${post.score} upvotes)\n   ${post.selftext || 'No description'}\n   URL: ${post.postUrl}`
+      )
+      .join('\n\n');
+    this.logger?.logLine(66, 'Statement: VariableDeclaration');
+
+    // Step 2: Summarize the news using AI
+    const summaryResult = await new AIAgentBubble({
+    message: `Here are the top ${posts.length} posts from r/${subreddit}:
+
+${postsText}
+
+Please provide:
+1. A summary of the top 5 most important/popular news items
+2. Key themes or trends you notice
+3. A one-paragraph executive summary
+
+Format the response in a clear, readable way.`,
+    model: {
+        model: 'google/gemini-2.5-flash',
+      },
+    tools: []
+  }, {logger: this.logger, variableId: 422, dependencyGraph: {"name":"ai-agent","uniqueId":"422","variableId":422,"variableName":"summaryResult","nodeType":"service","dependencies":[]}, currentUniqueId: "422"}).action();
+    this.logger?.logLine(84, 'Statement: VariableDeclaration');
+
+    return {
+      subreddit,
+      postsScraped: posts.length,
+      summary: summaryResult.data?.response,
+      timestamp: new Date().toISOString(),
+      status: 'success',
+    };
+    this.logger?.logLine(92, 'Statement: ReturnStatement');
+  }
+}

package/templates/reddit-scraper/README.md

@@ -0,0 +1,254 @@
+# BubbleLab Reddit News Scraper
+
+Welcome to your BubbleLab Reddit scraper! This template demonstrates how to build AI agents that scrape and analyze Reddit content using BubbleLab's workflow engine.
+
+## 🎯 What This Does
+
+This example creates an AI agent that:
+
+- Scrapes posts from any Reddit subreddit
+- Uses Google Gemini AI to analyze and summarize content
+- Identifies key themes and trends in the posts
+- Exports results to a JSON file
+
+## 🚀 Quick Start
+
+### 1. Set Up Environment Variables
+
+Your `.env` file was created during setup. You can modify it to customize the scraper:
+
+```env
+GOOGLE_API_KEY=your_google_api_key_here
+
+# Optional: Specify subreddit to scrape (default: worldnews)
+SUBREDDIT=worldnews
+
+# Optional: Number of posts to scrape (default: 10)
+POST_LIMIT=10
+```
+
+#### Get API Keys
+
+- **Google Gemini API**: https://aistudio.google.com/app/apikey (Free tier available)
+
+### 2. Run the Example
+
+```bash
+npm run dev
+```
+
+or
+
+```bash
+pnpm dev
+```
+
+You should see output like:
+
+```
+🫧 BubbleLab Reddit News Scraper
+
+✅ BubbleFactory initialized
+
+📊 Configuration:
+  Subreddit: r/worldnews
+  Post Limit: 10
+
+🤖 Running Reddit scraper...
+
+📊 Results:
+──────────────────────────────────────────────────────────────────────
+
+📝 NEWS SUMMARY:
+
+[AI-generated summary of Reddit posts]
+
+──────────────────────────────────────────────────────────────────────
+
+✅ Scraped 10 posts from r/worldnews
+💾 Results exported to: reddit-news-worldnews-1234567890.json
+```
+
+## 📚 Project Structure
+
+```
+my-bubblelab-app/
+├── src/
+│   ├── index.ts              # Main entry point
+│   └── reddit-news-flow.ts   # Reddit scraper flow definition
+├── package.json
+├── tsconfig.json
+├── .env
+└── README.md
+```
+
+## 🧩 Understanding the Code
+
+### The Flow (reddit-news-flow.ts)
+
+This is a simple 2-step workflow:
+
+```typescript
+export class RedditNewsFlow extends BubbleFlow<'webhook/http'> {
+  async handle(payload: RedditNewsPayload) {
+    // Step 1: Scrape Reddit for posts
+    const scrapeResult = await new RedditScrapeTool({
+      subreddit: 'worldnews',
+      sort: 'hot',
+      limit: 10,
+    }).action();
+
+    // Step 2: Summarize the news using AI
+    const summaryResult = await new AIAgentBubble({
+      message: `Summarize these Reddit posts...`,
+      model: { model: 'google/gemini-2.5-flash' },
+    }).action();
+
+    return { summary: summaryResult.data?.response };
+  }
+}
+```
+
+**Key components:**
+
+1. **RedditScrapeTool** - Scrapes posts from Reddit
+   - `subreddit`: Which subreddit to scrape
+   - `sort`: Sorting method ('hot', 'new', 'top')
+   - `limit`: Number of posts to fetch
+
+2. **AIAgentBubble** - AI-powered analysis
+   - `message`: The task/prompt for the AI
+   - `model`: Which AI model to use
+
+### Running the Flow (index.ts)
+
+The `index.ts` file shows how to execute the flow:
+
+```typescript
+const runner = new BubbleRunner(flowCode, bubbleFactory);
+const result = await runner.runAll({ subreddit, limit });
+```
+
+## 🎨 Customization
+
+### Change the Subreddit
+
+Set the `SUBREDDIT` environment variable:
+
+```bash
+SUBREDDIT="technology" npm run dev
+```
+
+Or modify `.env`:
+
+```env
+SUBREDDIT=technology
+```
+
+### Scrape More Posts
+
+Change the `POST_LIMIT`:
+
+```bash
+POST_LIMIT=20 npm run dev
+```
+
+### Change Sort Order
+
+Edit `src/reddit-news-flow.ts`:
+
+```typescript
+const scrapeResult = await new RedditScrapeTool({
+  subreddit: subreddit,
+  sort: 'new', // Options: 'hot', 'new', 'top', 'rising'
+  limit: limit,
+}).action();
+```
+
+### Customize AI Analysis
+
+Modify the AI prompt in `src/reddit-news-flow.ts`:
+
+```typescript
+const summaryResult = await new AIAgentBubble({
+  message: `Analyze these posts and focus on technology trends...`,
+  model: { model: 'google/gemini-2.5-flash' },
+}).action();
+```
+
+## 🔧 Development
+
+### Build for Production
+
+```bash
+npm run build
+npm start
+```
+
+### Project Scripts
+
+- `npm run dev` - Run with hot reload (tsx)
+- `npm run build` - Compile TypeScript to JavaScript
+- `npm start` - Run compiled JavaScript
+- `npm run typecheck` - Check TypeScript types
+
+## 📖 Next Steps
+
+### Use Cases
+
+This template can be extended for:
+
+- **Lead generation** - Find potential customers discussing pain points
+- **Market research** - Analyze trends and sentiment in specific communities
+- **Content curation** - Collect and summarize relevant discussions
+- **Competitive intelligence** - Monitor what people say about competitors
+- **Community management** - Track important discussions in your community
+
+### Example: Lead Finder
+
+Extend the flow to find frustrated users:
+
+```typescript
+const agentResult = await new AIAgentBubble({
+  systemPrompt: `Identify users who are frustrated with their current solution.`,
+  message: `Analyze this post: "${post.title}" - ${post.selftext}`,
+  model: {
+    model: 'google/gemini-2.5-flash',
+    jsonMode: true,
+  },
+}).action();
+```
+
+### Learn More
+
+- [BubbleLab Documentation](https://github.com/bubblelabai/BubbleLab)
+- [Examples & Tutorials](https://github.com/bubblelabai/BubbleLab/tree/main/examples)
+
+## 🐛 Troubleshooting
+
+### Error: API Key Not Found
+
+Make sure `.env` file exists and contains a valid `GOOGLE_API_KEY`.
+
+### Error: Module Not Found
+
+Run `npm install` to install dependencies.
+
+### No Posts Found
+
+- Check that the subreddit name is spelled correctly
+- Try increasing the `limit` parameter
+- Verify you have internet connection
+
+## 💬 Support
+
+- **Issues**: [GitHub Issues](https://github.com/bubblelabai/BubbleLab/issues)
+- **Discussions**: [GitHub Discussions](https://github.com/bubblelabai/BubbleLab/discussions)
+
+## 📄 License
+
+Apache-2.0 © Bubble Lab, Inc.
+
+---
+
+**Happy Scraping! 🫧**

package/templates/reddit-scraper/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "my-bubblelab-app",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "description": "BubbleLab AI agent application",
+  "scripts": {
+    "dev": "tsx src/index.ts",
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@bubblelab/bubble-core": "^0.1.1",
+    "@bubblelab/bubble-runtime": "^0.1.4",
+    "dotenv": "^16.4.5"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.12",
+    "tsx": "^4.20.3",
+    "typescript": "^5.4.5"
+  }
+}

package/templates/reddit-scraper/src/index.ts

@@ -0,0 +1,58 @@
+import { BubbleRunner } from '@bubblelab/bubble-runtime';
+import { BubbleFactory } from '@bubblelab/bubble-core';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { CredentialType } from '@bubblelab/shared-schemas';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+async function main() {
+  // Step 1: Create a BubbleFactory and register defaults
+  const bubbleFactory = new BubbleFactory();
+  await bubbleFactory.registerDefaults();
+
+  // Step 2: Read the flow code as a string
+  const flowCode = readFileSync(
+    join(__dirname, 'reddit-news-flow.ts'),
+    'utf-8'
+  );
+
+  // Step 3: Create a BubbleRunner with your flow code
+  const runner = new BubbleRunner(flowCode, bubbleFactory);
+  // Step 4: (Optional) Modify bubble parameters dynamically
+  const subreddit = 'worldnews';
+  const limit = 10;
+
+  // Step 5: Set the credentials
+  runner.injector.injectCredentials(runner.getParsedBubbles(), [], {
+    [CredentialType.GOOGLE_GEMINI_CRED]: process.env.GOOGLE_API_KEY,
+  });
+
+  const result = await runner.runAll({
+    subreddit,
+    limit,
+  });
+
+  if (result.error) {
+    console.error('❌ Error:', result.error);
+    process.exit(1);
+  } else {
+    console.log('✅ Reddit scraper executed successfully');
+    console.log(JSON.stringify(result.data, null, 2));
+  }
+
+  const summary = runner.getLogger()?.getExecutionSummary();
+  if (summary) {
+    console.log(summary);
+  }
+
+  // Force exit to close any lingering connections (AI model HTTP clients, etc.)
+  process.exit(0);
+}
+
+// Run the example
+main().catch((error) => {
+  console.error('❌ Error:', error);
+  process.exit(1);
+});

package/templates/reddit-scraper/src/reddit-news-flow.ts

@@ -0,0 +1,93 @@
+/**
+ * Reddit News Scraper Flow
+ *
+ * This is a simple BubbleFlow that scrapes Reddit and summarizes news posts.
+ */
+import {
+  BubbleFlow,
+  RedditScrapeTool,
+  AIAgentBubble,
+  type WebhookEvent,
+} from '@bubblelab/bubble-core';
+import { config } from 'dotenv';
+
+// Load environment variables from .env file
+config();
+
+/**
+ * Payload interface for the Reddit news flow
+ */
+interface RedditNewsPayload extends WebhookEvent {
+  subreddit: string;
+  limit: number;
+}
+
+/**
+ * RedditNewsFlow - Scrapes Reddit and summarizes news
+ *
+ * This flow demonstrates:
+ * - Using RedditScrapeTool to scrape subreddit posts
+ * - Using AIAgentBubble to analyze and summarize content
+ * - Simple 2-step workflow
+ */
+export class RedditNewsFlow extends BubbleFlow<'webhook/http'> {
+  async handle(payload: RedditNewsPayload) {
+    const subreddit = payload.subreddit || 'worldnews';
+    const limit = payload.limit || 10;
+
+    // Step 1: Scrape Reddit for posts
+    const scrapeResult = await new RedditScrapeTool({
+      subreddit: subreddit,
+      sort: 'hot',
+      limit: limit,
+    }).action();
+
+    if (!scrapeResult.success || !scrapeResult.data?.posts) {
+      throw new Error('Failed to scrape Reddit or no posts found.');
+    }
+
+    const posts = scrapeResult.data.posts;
+
+    // Format posts for AI
+    const postsText = posts
+      .map(
+        (
+          post: {
+            title: string;
+            score: number;
+            selftext: string;
+            postUrl: string;
+          },
+          i: number
+        ) =>
+          `${i + 1}. "${post.title}" (${post.score} upvotes)\n   ${post.selftext || 'No description'}\n   URL: ${post.postUrl}`
+      )
+      .join('\n\n');
+
+    // Step 2: Summarize the news using AI
+    const summaryResult = await new AIAgentBubble({
+      message: `Here are the top ${posts.length} posts from r/${subreddit}:
+
+${postsText}
+
+Please provide:
+1. A summary of the top 5 most important/popular news items
+2. Key themes or trends you notice
+3. A one-paragraph executive summary
+
+Format the response in a clear, readable way.`,
+      model: {
+        model: 'google/gemini-2.5-flash',
+      },
+      tools: [],
+    }).action();
+
+    return {
+      subreddit,
+      postsScraped: posts.length,
+      summary: summaryResult.data?.response,
+      timestamp: new Date().toISOString(),
+      status: 'success',
+    };
+  }
+}

package/templates/reddit-scraper/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022"],
+    "moduleResolution": "node",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}