> ## Documentation Index
> Fetch the complete documentation index at: https://praison.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Template Catalog (TypeScript)

> TypeScript/JavaScript API for interacting with the PraisonAI template catalog

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

```mermaid theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
graph LR
    App([App]) --> Catalog[Template Catalog]
    Catalog --> Agent[Agent]

    classDef agent fill:#8B0000,stroke:#7C90A0,color:#fff
    classDef tool fill:#189AB4,stroke:#7C90A0,color:#fff

    class Agent agent
    class Catalog,App tool
    classDef agent fill:#8B0000,color:#fff
    classDef tool fill:#189AB4,color:#fff
```

## Quick Start

<Steps>
  <Step title="Simple Usage">
    ```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
    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`);
    ```
  </Step>

  <Step title="With Configuration">
    Search, filter, and run templates from your app — see sections below.
  </Step>
</Steps>

***

## Fetching Templates

Fetch the template catalog JSON from the deployed catalog site.

## Searching Templates

Search templates by name, description, or tags.

```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
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.

```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
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.

```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
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.

```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
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.

```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
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.

```tsx theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
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.

```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
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.

```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
#!/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);
```

## Related

<CardGroup cols={2}>
  <Card title="Template Catalog CLI" icon="terminal" href="/docs/js/template-catalog-cli">CLI reference</Card>
  <Card title="Workflows" icon="diagram-project" href="/docs/js/workflows">Workflow templates</Card>
</CardGroup>