unpkg.ai - AI-powered ESM modules

AI-powered ESM module generation service that creates JavaScript modules on-demand using LLMs.

🎯 Zero friction: No signup • No API keys • No authentication required

Top-down vibe coding. Imagine any module you need. Perfect for systems with dynamic plugins.

📋 Quick Start

Example Request:

https://unpkg.ai/esm/formatCurrency(amount:number,currency%3F:string):string.js

Usage in your code:

import { formatCurrency } from 'https://unpkg.ai/esm/formatCurrency(amount:number,currency%3F:string):string.js';
console.log(formatCurrency(1234.56, 'EUR')); // "€1,234.56"

🔧 Parameters

📚 Interactive Examples

Parameter	Description	Example	Required
`model`	AI model to use	`gpt-4`, `claude-3`	No
`seed`	Random seed for deterministic output	`12345`	No

💱 Currency Formatter

import { formatCurrency } from 
  'https://unpkg.ai/esm/formatCurrency(amount:number,currency%3F:string):string.js';

const formatted = formatCurrency(1234.56, 'EUR');
console.log(formatted); // "€1,234.56"

💰 Tip Calculator with Bill Splitting

import { calculateTip } from 
  'https://unpkg.ai/esm/calculateTip(amount:number,percentage:number,people%3F:number):{tip:number,total:number,perPerson:number}.js';

const result = calculateTip(85.50, 18, 4);
console.log(result); // { tip: 15.39, total: 100.89, perPerson: 25.22 }

🔐 Secure Password Generator

import { generatePassword } from 
  'https://unpkg.ai/esm/generatePassword(options%3F:{length%3F:number,symbols%3F:boolean,numbers%3F:boolean,uppercase%3F:boolean,lowercase%3F:boolean}):{password:string,strength:number,feedback:string[]}.js';

const result = generatePassword({ length: 16, symbols: true });
console.log(result); // { password: 'K#9m$L2pQ!7vX8nR', strength: 95, feedback: ['Very strong'] }

🎨 Color Palette Generator

import { generatePalette } from 
  'https://unpkg.ai/esm/generatePalette(baseColor:string,count%3F:number,type%3F:"complementary"|"analogous"|"triadic"):{colors:{hex:string,rgb:string,hsl:string,name:string}[],scheme:string}.js';

const palette = generatePalette('#3B82F6', 5, 'complementary');
console.log(palette); // { colors: [{hex: '#3B82F6', name: 'Blue'}, ...], scheme: 'Complementary' }

💣 Complete Minesweeper Game

import { initMinesweeper } from 
  'https://unpkg.ai/esm/initMinesweeper(container:string,options%3F:{width%3F:number,height%3F:number,mines%3F:number}):{start:()=>void,reset:()=>void,getStats:()=>{games:number,wins:number,time:number}}.js';

// Create container for the game
const gameContainer = document.createElement('div');
gameContainer.id = 'game-container';
document.body.appendChild(gameContainer);

// Creates a complete playable minesweeper game with UI
const game = initMinesweeper('#game-container', { width: 10, height: 10, mines: 15 });
console.log('Game initialized:', game);
game.start(); // Full game with click handlers, animations, timer, score tracking

📝 Rich Text Editor

import { createRichEditor } from 
  'https://unpkg.ai/esm/createRichEditor(container:string):{getContent:()=>string,setContent:(content:string)=>void,insertText:(text:string)=>void}|Rich+text+editor+with+bold+italic+lists+links+features.js';

// Create container for the editor
const editorContainer = document.createElement('div');
editorContainer.id = 'editor';
editorContainer.style.cssText = 'border: 1px solid #e5e7eb; border-radius: 8px; min-height: 200px; background: white;';
document.body.appendChild(editorContainer);

const editor = createRichEditor('#editor');
console.log('Editor created:', editor);
editor.setContent('# Welcome\n\nStart typing...');

📊 Interactive Data Dashboard

import { createDashboard } from 
  'https://unpkg.ai/esm/createDashboard(containerSelector:string):{addChart:(id:string,type:string,data:{x:string,y:number}[])=>void,updateChart:(id:string,data:{x:string,y:number}[])=>void,addFilter:(name:string,callback:(data:{x:string,y:number}[])=>{x:string,y:number}[])=>void}|Interactive+dashboard+with+single+line+chart+and+filtering+that+preserves+data+order.js';

// Create container for the dashboard
const dashboardContainer = document.createElement('div');
dashboardContainer.id = 'dashboard';
dashboardContainer.style.cssText = 'border: 1px solid #e5e7eb; border-radius: 8px; min-height: 300px; background: white; padding: 1rem;';
document.body.appendChild(dashboardContainer);

const dashboard = createDashboard('#dashboard');

// Add interactive sales chart
dashboard.addChart('sales', 'line', [
  { x: 'Jan', y: 1000 }, { x: 'Feb', y: 1200 }, { x: 'Mar', y: 800 }, { x: 'Apr', y: 1500 }
]);

🚀 unpkg.ai