Add MCP crypto data plainly video example

.github/workflows/ci.yml

@@ -2,7 +2,7 @@ name: Continuous integration
 
 on:
   push:
-    branches: [ main, master ]
+    branches: [main, master]
   pull_request:
 
 jobs:
@@ -15,15 +15,15 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: 20
           cache: pnpm
@@ -32,11 +32,50 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Biome check (lint + format)
-        run: pnpm exec biome check --reporter=github .
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+        with:
+          working-dir: plainly-render-and-webhook
+
+      - name: Run Biome
+        run: biome ci .
+
+      - name: Build
+        run: pnpm build
+
+  build-mcp-ai-crypto-video-agent:
+    name: Build mcp-ai-crypto-video-agent
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: mcp-ai-crypto-video-agent
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: 20
+          cache: pnpm
+          cache-dependency-path: mcp-ai-crypto-video-agent/pnpm-lock.yaml
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+        with:
+          working-dir: mcp-ai-crypto-video-agent
 
-      - name: Biome format verification
-        run: pnpm exec biome format .
+      - name: Run Biome
+        run: biome ci .
 
       - name: Build
         run: pnpm build

.gitignore

@@ -0,0 +1 @@
+.DS_Store

README.md

@@ -33,6 +33,14 @@ Simply choose an example that matches your use case and follow `README.md` file
       - User interface for managing video generation requests.
    * **Tech Stack**: Next.js, PostgreSQL, Prisma, TypeScript, Tailwind CSS
 
+2. **[MCP AI Crypto Video Agent](mcp-ai-crypto-video-agent/)**
+   * **Purpose**: Showcases an AI-powered video generation agent that creates cryptocurrency-related videos.
+   * **What it shows**:
+      - Integrating with AI services to generate video content dynamically.
+      - Using Plainly's API to render videos based on AI-generated scripts and assets.
+      - Automating the entire video creation process from content generation to rendering.
+   * **Tech Stack**: Node.js, TypeScript
+
 ## Contributing
 
 Found an issue or want to contribute a new example? We welcome contributions! Please feel free to:

mcp-ai-crypto-video-agent/.env.example

@@ -0,0 +1,11 @@
+# Environment Variables
+# Copy this file to .env.local and fill in your API keys
+
+# Smithery API Key - Get it from https://smithery.ai/account/api-keys
+SMITHERY_API_KEY=
+
+# Plainly API Key - Get it from https://app.plainlyvideos.com/dashboard/user/settings/general
+PLAINLY_API_KEY=
+
+# OpenAI API Key - Get it from https://platform.openai.com
+OPENAI_API_KEY=

mcp-ai-crypto-video-agent/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.env
+.env.local
+dist
+.DS_Store

mcp-ai-crypto-video-agent/README.md

@@ -0,0 +1,94 @@
+# MCP AI Crypto Video Agent
+
+Generate a short crypto performance video using a real OpenAI agent that
+discovers and orchestrates MCP tools for data fetching and rendering.
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/) 18+ (or newer)
+- [pnpm](https://pnpm.io/) package manager
+- OpenAI API key
+- Smithery API key (Free Crypto Coin Data)
+- Plainly API key
+
+## Getting started
+
+1. Clone the repository:
+
+    ```bash
+    git clone https://github.com/plainly-videos/examples.git
+    cd examples/mcp-ai-crypto-video-agent
+    ```
+
+2. Install dependencies:
+   - `pnpm install --frozen-lockfile`
+3. Upload the After Effects project used in this example to Plainly:
+    - Download the example project from [here](./after-effects/Crypto%202025.zip).
+    - Go to [Upload form](https://app.plainlyvideos.com/dashboard/projects/create) and upload the project.
+    - Once the upload is done, auto-generate a template with prefix option:
+       - Set the prefixes to `edit`, which will include all compositions starting with `edit` and their parameters.
+        - Click on "Generate".
+        - This will generate a template with few parameters from layers.
+
+    <p align="center">
+      <img src=".assets/auto-generate-template.png" alt="Plainly auto-generate template" width="500" />
+    </p>
+
+4. Set up environment variables:
+
+   ```bash
+    cp .env.example .env.local
+    ```
+
+    Update `.env.local` with your OpenAI API key, Smithery API key from [Smithery account settings](https://smithery.ai/account/api-keys), and Plainly API key from [Plainly settings](https://app.plainlyvideos.com/dashboard/user/settings/general).
+
+    ```properties
+    # Smithery API Key
+    SMITHERY_API_KEY=your_smithery_api_key
+
+    # Plainly API Key
+    PLAINLY_API_KEY=your_plainly_api_key
+
+    # OpenAI API Key
+    OPENAI_API_KEY=your_openai_api_key
+    ```
+
+## Usage
+
+- Default coin (bitcoin):
+  - `pnpm start`
+- Specify a coin:
+  - `pnpm start -- --coin ethereum`
+
+For this example, only `bitcoin` and `ethereum` are supported because the
+template uses a static logo mapping for `editImage`.
+
+## How it works
+
+- The OpenAI agent connects to the MCP servers (crypto data + Plainly).
+- Fetches current price plus 24h/7d change for the coin.
+- Finds the Plainly project named "Crypto 2025".
+- Uses the first template variant and maps data into parameters.
+- Submits a render and polls until completion.
+
+## Template parameters
+
+The example maps these fields for the "Crypto 2025" template:
+
+- `editName`
+- `editSymbol`
+- `editPrice`
+- `editChange24h`
+- `editChange7d`
+- `editImage`
+- `editDate`
+
+If your template uses different parameter names, update the mapping in
+`src/index.ts`.
+
+## Scripts
+
+- `pnpm start` - run the agent
+- `pnpm build` - typecheck with TypeScript
+- `pnpm biome` - lint and format check
+- `pnpm biome:fix` - auto-fix lint issues

mcp-ai-crypto-video-agent/biome.json

@@ -0,0 +1,38 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
+	"vcs": {
+		"enabled": false,
+		"clientKind": "git",
+		"useIgnoreFile": false
+	},
+	"files": {
+		"ignoreUnknown": false,
+		"includes": ["**", "!node_modules", "!dist"]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab"
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"suspicious": {
+				"noExplicitAny": "off"
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "double"
+		}
+	},
+	"assist": {
+		"enabled": true,
+		"actions": {
+			"source": {
+				"organizeImports": "on"
+			}
+		}
+	}
+}

mcp-ai-crypto-video-agent/package.json

@@ -0,0 +1,27 @@
+{
+	"name": "mcp-ai-crypto-video-agent",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"clean": "rm -rf dist",
+		"start": "tsx src/index.ts",
+		"build": "pnpm clean && pnpm tsc",
+		"biome": "biome check .",
+		"biome:fix": "biome check . --write"
+	},
+	"license": "ISC",
+	"packageManager": "pnpm@10.26.2",
+	"devDependencies": {
+		"@biomejs/biome": "2.3.11",
+		"@types/node": "^25.0.3",
+		"tsx": "^4.21.0",
+		"typescript": "^5.9.3"
+	},
+	"dependencies": {
+		"@openai/agents": "^0.3.7",
+		"chalk": "^5.6.2",
+		"commander": "^14.0.2",
+		"dotenv": "^17.2.3",
+		"zod": "^3.25.76"
+	}
+}