{
  "id": "currency-converter",
  "name": "Currency Converter",
  "category": "finance",
  "tags": ["currency", "converter", "exchange", "money", "finance", "rates"],
  "description": "Convert between currencies with live exchange rates from a public API.",
  "triggers": ["currency converter", "exchange rate", "convert money", "USD to EUR", "currency", "forex"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function CurrencyConverter() {\n  const [amount, setAmount] = React.useState(100);\n  const [from, setFrom] = React.useState('REPLACE_WITH_FROM_CURRENCY');\n  const [to, setTo] = React.useState('REPLACE_WITH_TO_CURRENCY');\n  const [rate, setRate] = React.useState(null);\n  const [loading, setLoading] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!from || !to) return;\n    setLoading(true);\n    fetch(`https://api.exchangerate-api.com/v4/latest/${from}`)\n      .then(r=>r.json())\n      .then(d=>{setRate(d.rates?.[to]);setLoading(false);})\n      .catch(()=>setLoading(false));\n  }, [from,to]);\n\n  const result = rate ? (amount * rate).toFixed(2) : '---';\n  const currencies = ['USD','EUR','GBP','JPY','AUD','CAD','CHF','CNY','SEK','NZD'];\n\n  return (\n    <div style={{padding:20,fontFamily:'system-ui',height:'100%',display:'flex',flexDirection:'column',justifyContent:'center'}}>\n      <div style={{fontSize:18,fontWeight:700,marginBottom:16,textAlign:'center'}}>Currency Converter</div>\n      <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:16}}>\n        <input type=\"number\" value={amount} onChange={e=>setAmount(Number(e.target.value))}\n          style={{flex:1,padding:'10px 12px',borderRadius:8,border:'1px solid #ccc',fontSize:16}}/>\n        <select value={from} onChange={e=>setFrom(e.target.value)}\n          style={{padding:'10px',borderRadius:8,border:'1px solid #ccc',fontSize:16}}>\n          {currencies.map(c=><option key={c} value={c}>{c}</option>)}\n        </select>\n      </div>\n      <div style={{textAlign:'center',fontSize:24,margin:'8px 0'}}>↓</div>\n      <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:16}}>\n        <div style={{flex:1,padding:'10px 12px',borderRadius:8,background:'#f5f5f5',fontSize:16,fontWeight:600}}>\n          {loading?'Loading…':result}\n        </div>\n        <select value={to} onChange={e=>setTo(e.target.value)}\n          style={{padding:'10px',borderRadius:8,border:'1px solid #ccc',fontSize:16}}>\n          {currencies.map(c=><option key={c} value={c}>{c}</option>)}\n        </select>\n      </div>\n      {rate && <div style={{textAlign:'center',fontSize:13,color:'#888'}}>\n        1 {from} = {rate.toFixed(4)} {to}\n      </div>}\n    </div>\n  );\n}\nrender(<CurrencyConverter/>);",
  "placeholders": [
    { "name": "REPLACE_WITH_FROM_CURRENCY", "description": "Source currency code", "default": "USD" },
    { "name": "REPLACE_WITH_TO_CURRENCY", "description": "Target currency code", "default": "EUR" }
  ]
}