Template Catalog (TypeScript)

Use TypeScript/JavaScript to interact with the PraisonAI template catalog - fetch templates, search, filter, and integrate with your applications.

Fetching Templates

Fetch the template catalog JSON from the deployed catalog site.

const CATALOG_URL = "https://mervinpraison.github.io/praisonai-template-catalog/data/templates.json";

interface Template {
  name: string;
  version: string;
  description: string;
  author?: string;
  license?: string;
  tags?: string[];
  category?: string;
  difficulty?: "beginner" | "intermediate" | "advanced";
  requires?: {
    tools?: string[];
    packages?: string[];
    env?: string[];
    external?: Array<{ name: string; check?: string; install_hint?: string }>;
  };
  config?: Record<string, any>;
  cli?: {
    command?: string;
    examples?: string[];
  };
}

interface Catalog {
  version: string;
  generated_at: string;
  count: number;
  templates: Template[];
}

async function fetchCatalog(): Promise<Catalog> {
  const response = await fetch(CATALOG_URL);
  return response.json();
}

// Usage
const catalog = await fetchCatalog();
console.log(`Found ${catalog.count} templates`);

Searching Templates

Search templates by name, description, or tags.

function searchTemplates(templates: Template[], query: string): Template[] {
  const q = query.toLowerCase();
  return templates.filter(t => 
    t.name.toLowerCase().includes(q) ||
    t.description?.toLowerCase().includes(q) ||
    t.tags?.some(tag => tag.toLowerCase().includes(q))
  );
}

// Search for video templates
const videoTemplates = searchTemplates(catalog.templates, "video");
console.log(`Found ${videoTemplates.length} video templates`);
videoTemplates.forEach(t => {
  console.log(`- ${t.name}: ${t.description?.slice(0, 50)}...`);
});

Filtering by Tags

Filter templates by specific tags.

function filterByTags(templates: Template[], tags: string[]): Template[] {
  return templates.filter(t => 
    tags.every(tag => t.tags?.includes(tag))
  );
}

// Find templates with both 'video' and 'editing' tags
const editingTemplates = filterByTags(catalog.templates, ["video", "editing"]);
editingTemplates.forEach(t => {
  console.log(`${t.name}: ${t.tags?.join(", ")}`);
});

Filtering by Requirements

Filter templates by their tool or package requirements.

function filterByTool(templates: Template[], toolName: string): Template[] {
  return templates.filter(t => 
    t.requires?.tools?.includes(toolName)
  );
}

function filterByPackage(templates: Template[], packageName: string): Template[] {
  return templates.filter(t => 
    t.requires?.packages?.includes(packageName)
  );
}

// Find templates using shell_tool
const shellTemplates = filterByTool(catalog.templates, "shell_tool");
console.log("Templates using shell_tool:", shellTemplates.map(t => t.name));

// Find templates requiring moviepy
const moviepyTemplates = filterByPackage(catalog.templates, "moviepy");
console.log("Templates requiring moviepy:", moviepyTemplates.map(t => t.name));

Getting Template Details

Get detailed information about a specific template.

function getTemplate(templates: Template[], name: string): Template | undefined {
  return templates.find(t => t.name === name);
}

// Get ai-video-editor details
const template = getTemplate(catalog.templates, "ai-video-editor");
if (template) {
  console.log(`Name: ${template.name}`);
  console.log(`Version: ${template.version}`);
  console.log(`Description: ${template.description}`);
  console.log(`Author: ${template.author ?? "Unknown"}`);
  console.log(`Tags: ${template.tags?.join(", ")}`);
  console.log(`Required tools: ${template.requires?.tools?.join(", ")}`);
  console.log(`Required packages: ${template.requires?.packages?.join(", ")}`);
}

Generating CLI Commands

Generate CLI commands for templates.

interface CLICommands {
  run: string;
  info: string;
  init: string;
}

function generateCLICommands(template: Template): CLICommands {
  return {
    run: `praisonai templates run ${template.name}`,
    info: `praisonai templates info ${template.name}`,
    init: `praisonai templates init my-project --template ${template.name}`,
  };
}

// Generate commands for a template
const commands = generateCLICommands(template!);
console.log("CLI Commands:");
Object.entries(commands).forEach(([type, cmd]) => {
  console.log(`  ${type}: ${cmd}`);
});

React Component Example

A React component for displaying templates.

import { useState, useEffect } from 'react';

interface Template {
  name: string;
  version: string;
  description: string;
  tags?: string[];
}

function TemplateCatalog() {
  const [templates, setTemplates] = useState<Template[]>([]);
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://mervinpraison.github.io/praisonai-template-catalog/data/templates.json')
      .then(res => res.json())
      .then(data => {
        setTemplates(data.templates);
        setLoading(false);
      });
  }, []);

  const filtered = templates.filter(t =>
    t.name.toLowerCase().includes(search.toLowerCase()) ||
    t.description?.toLowerCase().includes(search.toLowerCase())
  );

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      <input
        type="text"
        placeholder="Search templates..."
        value={search}
        onChange={e => setSearch(e.target.value)}
      />
      <ul>
        {filtered.map(t => (
          <li key={t.name}>
            <strong>{t.name}</strong> (v{t.version})
            <p>{t.description}</p>
            <code>praisonai templates run {t.name}</code>
          </li>
        ))}
      </ul>
    </div>
  );
}

Node.js Example

Fetch and process templates in Node.js.

import https from 'https';

const CATALOG_URL = 'https://mervinpraison.github.io/praisonai-template-catalog/data/templates.json';

async function fetchTemplates(): Promise<any> {
  return new Promise((resolve, reject) => {
    https.get(CATALOG_URL, (res) => {
      let data = '';
      res.on('data', chunk => data += chunk);
      res.on('end', () => resolve(JSON.parse(data)));
    }).on('error', reject);
  });
}

async function main() {
  const catalog = await fetchTemplates();
  console.log(`Catalog version: ${catalog.version}`);
  console.log(`Total templates: ${catalog.count}`);
  
  // List all templates
  catalog.templates.forEach((t: any) => {
    console.log(`- ${t.name} (v${t.version})`);
  });
}

main();

Complete Example

A complete TypeScript example with all features.

#!/usr/bin/env npx ts-node
/**
 * Example: Fetch and search PraisonAI templates
 */

const CATALOG_URL = "https://mervinpraison.github.io/praisonai-template-catalog/data/templates.json";

interface Template {
  name: string;
  version: string;
  description: string;
  author?: string;
  tags?: string[];
  requires?: {
    tools?: string[];
    packages?: string[];
    env?: string[];
  };
}

interface Catalog {
  version: string;
  count: number;
  templates: Template[];
}

async function main() {
  // Fetch catalog
  console.log("Fetching template catalog...");
  const response = await fetch(CATALOG_URL);
  const catalog: Catalog = await response.json();
  
  console.log(`Catalog version: ${catalog.version}`);
  console.log(`Total templates: ${catalog.count}`);
  
  // Search for video templates
  console.log("\nSearching for 'video' templates...");
  const query = "video";
  const results = catalog.templates.filter(t =>
    t.name.includes(query) ||
    t.description?.includes(query) ||
    t.tags?.some(tag => tag.includes(query))
  );
  
  for (const t of results) {
    console.log(`\n${t.name} (v${t.version})`);
    console.log(`  ${t.description?.slice(0, 80)}...`);
    console.log(`  Tags: ${t.tags?.join(", ")}`);
    console.log(`  Run: praisonai templates run ${t.name}`);
  }
}

main().catch(console.error);

JavaScript

​Template Catalog (TypeScript)

​Fetching Templates

​Searching Templates

​Filtering by Tags

​Filtering by Requirements

​Getting Template Details

​Generating CLI Commands

​React Component Example

​Node.js Example

​Complete Example