Tutorial

Building a family-safe image picker with SafeSearch

Use safesearch=strict, server-side proxies, and FamilyFriendly in the response to ship image search in education and consumer apps.

May 5, 202611 min readMungfali Team

Image search in education, social, or kids products carries real moderation risk. Mungfali exposes safesearch on every request and returns FamilyFriendly on each result so your UI can double-check before showing thumbnails.

Defense in depth

  1. Always call the API from your server, never from the browser with a live API key
  2. Default to safesearch=strict for anonymous or student accounts
  3. Filter client-side: hide items where FamilyFriendly is false if your policy requires it
  4. Log queries and blocklists for repeat abuse patterns

Strict SafeSearch request

bash
curl -s "https://mungfali.net/v1/search?q=classroom+science&safesearch=strict&count=30" \
  -H "X-API-Key: $MUNGFALI_API_KEY"

Values are passed through to the upstream image provider. Use strict for the strictest filtering; moderate for general consumer apps; omit or off only when your product and legal review explicitly allow it.

Next.js API route proxy

javascript
// app/api/images/route.js
export async function GET(request) {
  const q = request.nextUrl.searchParams.get('q');
  if (!q) return Response.json({ error: 'Missing q' }, { status: 400 });

  const upstream = await fetch(
    `https://mungfali.net/v1/search?q=${encodeURIComponent(q)}&safesearch=strict&count=24`,
    { headers: { 'X-API-Key': process.env.MUNGFALI_API_KEY } }
  );
  const data = await upstream.json();
  if (!upstream.ok) return Response.json(data, { status: upstream.status });

  const safe = data.value.filter((img) => img.FamilyFriendly !== false);
  return Response.json({ name: data.name, value: safe });
}

Picker UI pattern

Present a search box, debounce input (300–500ms), then render a keyboard-navigable grid. Store selected imageUrl and hostUrl for attribution. Link to hostUrl when your terms require crediting the source page.

Combine with domain allowlists

For maximum control, add site=pexels.com or site=unsplash.com (or rotate allowed domains from your config) so results only come from sources you have reviewed. Pair with safesearch=strict rather than relying on domain alone.

Transparent PNGs in kid UIs

Transparent clipart can look broken on colored backgrounds. Add transparent=true to exclude alpha PNGs when building sticker or worksheet tools — see API Reference for all filter parameters.

Testing before launch

  • Run a fixed list of edge-case queries through staging and review thumbnails manually
  • Verify 401/429 handling does not leak raw upstream errors to end users
  • Confirm quota alerts fire before a classroom session hits the monthly cap

Ready to prototype? Sign up free — 250 searches/month on the Free plan — and follow the dashboard docs for interactive examples.