Integrate PicPulse Into Any Website

import React, { useEffect, useState } from 'react';

export default function PicPulseGallery() {
  const [images, setImages] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://picpulse.lushai.dev/api/v1/images?limit=8&sort=newest')
      .then(res => res.json())
      .then(res => {
        if (res.status === 'success') setImages(res.data);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

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

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '16px' }}>
      {images.map(img => (
        <div key={img.id} style={{ borderRadius: '8px', overflow: 'hidden', background: '#111' }}>
          <img src={img.urls.thumbnail_url} alt={img.title} style={{ width: '100%', height: '160px', objectFit: 'cover' }} loading="lazy" />
          <div style={{ padding: '8px 12px', fontSize: '13px', color: '#fff' }}>{img.title}</div>
        </div>
      ))}
    </div>
  );
}

<script setup>
import { ref, onMounted } from 'vue';

const images = ref([]);
const loading = ref(true);

onMounted(async () => {
  try {
    const res = await fetch('https://picpulse.lushai.dev/api/v1/images?limit=8');
    const data = await res.json();
    if (data.status === 'success') {
      images.value = data.data;
    }
  } finally {
    loading.value = false;
  }
});
</script>

<template>
  <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
    <div v-for="img in images" :key="img.id" class="rounded-lg overflow-hidden border border-zinc-800">
      <img :src="img.urls.thumbnail_url" :alt="img.title" class="w-full h-40 object-cover" loading="lazy" />
      <p class="p-2 text-xs font-semibold truncate">{{ img.title }}</p>
    </div>
  </div>
</template>

import requests

# Zero auth needed - fetch public picture catalog
url = "https://picpulse.lushai.dev/api/v1/images"
params = {"limit": 10, "category": "technology"}
response = requests.get(url, params=params).json()

if response.get("status") == "success":
    for image in response.get("data", []):
        print(f"Title: {image['title']}")
        print(f"Direct CDN URL: {image['urls']['direct_url']}\n")

<?php
// Fetch images from PicPulse without any API key
$apiUrl = 'https://picpulse.lushai.dev/api/v1/images?limit=8&sort=newest';
$response = file_get_contents($apiUrl);
$data = json_decode($response, true);

if ($data && ($data['status'] ?? '') === 'success') {
    foreach ($data['data'] as $img) {
        echo '<img src="' . htmlspecialchars($img['urls']['thumbnail_url']) . '" alt="' . htmlspecialchars($img['title']) . '" />';
    }
}
?>

async function getPicPulseAssets() {
  const res = await fetch('https://picpulse.lushai.dev/api/v1/images?limit=5');
  const json = await res.json();
  if (json.status === 'success') {
    console.log('PicPulse Assets:', json.data);
  }
}
getPicPulseAssets();