AIUL API Documentation

Quick Start

Option 1: JavaScript Widget (Easiest)

Add this script to your HTML and use simple data attributes:

<!-- Recommended: Use jsDelivr CDN for faster global loading -->
<script src="https://cdn.jsdelivr.net/gh/dmd-program/aiul@main/assets/js/aiul-widget.js"></script>
<div class="aiul-badge" data-license="NA"></div>
<div class="aiul-badge" data-license="CD" data-modifier="3D"></div>

<!-- Alternative: Direct from GitHub Pages -->
<script src="https://dmd-program.github.io/aiul/assets/js/aiul-widget.js"></script>

View live widget examples →

Option 2: Direct API Access

Fetch JSON data directly from the API endpoints:

fetch('https://dmd-program.github.io/aiul/api/licenses.json')
  .then(response => response.json())
  .then(data => console.log(data));

API Endpoints

Usage Examples

Display License Badge

async function displayLicenseBadge(licenseCode) {
  const response = await fetch('https://dmd-program.github.io/aiul/api/licenses.json');
  const data = await response.json();
  const license = data.data.find(l => l.code === licenseCode);
  
  if (license) {
    document.body.innerHTML += `
      <a href="${license.url}" target="_blank">
        <img src="${license.image}" alt="${license.title}" />
      </a>
    `;
  }
}

displayLicenseBadge('NA');

Display Combination Badge

async function displayCombination(licenseCode, modifierCode) {
  const response = await fetch('https://dmd-program.github.io/aiul/api/combinations.json');
  const data = await response.json();
  const code = `${licenseCode}-${modifierCode}`;
  const combination = data.data.find(c => c.code === code);
  
  if (combination) {
    document.body.innerHTML += `
      <a href="${combination.url}" target="_blank">
        <img src="${combination.image}" 
             alt="${combination.code}"
             title="${combination.license.title} - ${combination.modifier.title}" />
      </a>
    `;
  }
}

displayCombination('CD', '3D');

React Component

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

function AIULBadge({ licenseCode, modifierCode = null }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    const endpoint = modifierCode 
      ? 'https://dmd-program.github.io/aiul/api/combinations.json'
      : 'https://dmd-program.github.io/aiul/api/licenses.json';

    fetch(endpoint)
      .then(res => res.json())
      .then(result => {
        let item;
        if (modifierCode) {
          const code = `${licenseCode}-${modifierCode}`;
          item = result.data.find(c => c.code === code);
        } else {
          item = result.data.find(l => l.code === licenseCode);
        }
        setData(item);
      });
  }, [licenseCode, modifierCode]);

  if (!data) return <div>Loading...</div>;

  return (
    <a href={data.url} target="_blank" rel="noopener noreferrer">
      <img src={data.image} alt={data.code || data.title} />
    </a>
  );
}

export default AIULBadge;

Nuxt 4 / Vue 3 Component

<template>
  <a 
    v-if="badge" 
    :href="badge.url" 
    target="_blank" 
    rel="noopener noreferrer"
    class="aiul-badge-link"
  >
    <img 
      :src="badge.image" 
      :alt="badge.code || badge.title"
      :title="badgeTitle"
      :style="{ height: height, width: 'auto' }"
    />
  </a>
  <div v-else-if="loading">Loading...</div>
  <div v-else-if="error" class="error"></div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

interface Props {
  licenseCode: string
  modifierCode?: string
  height?: string
}

const props = withDefaults(defineProps<Props>(), {
  modifierCode: undefined,
  height: '28px'
})

const badge = ref(null)
const loading = ref(true)
const error = ref('')

const badgeTitle = computed(() => {
  if (!badge.value) return ''
  if (props.modifierCode) {
    return `${badge.value.license.title} - ${badge.value.modifier.title}`
  }
  return `${badge.value.title} - ${badge.value.fullName}`
})

const loadBadge = async () => {
  try {
    const endpoint = props.modifierCode
      ? 'https://dmd-program.github.io/aiul/api/combinations.json'
      : 'https://dmd-program.github.io/aiul/api/licenses.json'

    const response = await fetch(endpoint)
    if (!response.ok) throw new Error('Failed to fetch badge data')
    
    const data = await response.json()
    
    if (props.modifierCode) {
      const code = `${props.licenseCode}-${props.modifierCode}`
      badge.value = data.data.find((c: any) => c.code === code)
      if (!badge.value) {
        error.value = `Combination not found: ${code}`
      }
    } else {
      badge.value = data.data.find((l: any) => l.code === props.licenseCode)
      if (!badge.value) {
        error.value = `License not found: ${props.licenseCode}`
      }
    }
  } catch (e) {
    error.value = e instanceof Error ? e.message : 'Failed to load badge'
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadBadge()
})
</script>

<style scoped>
.aiul-badge-link {
  display: inline-block;
  text-decoration: none;
}

.error {
  color: #dc3545;
  font-size: 0.9em;
}
</style>

Usage in Nuxt 4:

<!-- components/AIULBadge.vue (save the component above) -->

<!-- In your page or component -->
<template>
  <div>
    <AIULBadge license-code="NA" />
    <AIULBadge license-code="CD" modifier-code="3D" />
    <AIULBadge license-code="IU" modifier-code="WR" height="70px" />
  </div>
</template>

With Composable (for reusability):

// composables/useAIULBadge.ts
export const useAIULBadge = () => {
  const fetchBadge = async (licenseCode: string, modifierCode?: string) => {
    const endpoint = modifierCode
      ? 'https://dmd-program.github.io/aiul/api/combinations.json'
      : 'https://dmd-program.github.io/aiul/api/licenses.json'

    const { data } = await useFetch(endpoint)
    
    if (!data.value) throw new Error('Failed to fetch badge data')

    if (modifierCode) {
      const code = `${licenseCode}-${modifierCode}`
      return data.value.data.find((c: any) => c.code === code)
    }
    
    return data.value.data.find((l: any) => l.code === licenseCode)
  }

  return {
    fetchBadge
  }
}

// Usage in component
<script setup>
const { fetchBadge } = useAIULBadge()
const badge = await fetchBadge('CD', '3D')
</script>

Response Format

License Object

{
  "id": "na",
  "code": "NA",
  "title": "AIUL-NA",
  "fullName": "Not Allowed",
  "version": "1.0.0",
  "url": "https://dmd-program.github.io/aiul/licenses/na/1.0.0/",
  "image": "https://dmd-program.github.io/aiul/assets/images/licenses/aiul-na.png",
  "released": "2025-12-09"
}

Combination Object

{
  "id": "na-3d",
  "code": "NA-3D",
  "license": {
    "id": "na",
    "code": "NA",
    "title": "AIUL-NA"
  },
  "modifier": {
    "id": "3d",
    "code": "3D",
    "title": "3D Design"
  },
  "url": "https://dmd-program.github.io/aiul/combinations/na-3d.html",
  "image": "https://dmd-program.github.io/aiul/assets/images/licenses/aiul-na-3d.png"
}

CORS & Usage

All API endpoints support CORS and can be accessed from any domain. There are no rate limits, but please cache responses appropriately.

The API data is regenerated on every site build. Check the generated timestamp in responses to see when data was last updated.

Additional Resources

• Interactive Widget Examples
• Complete API Documentation (Markdown)
• AIUL Usage Guide
• GitHub Repository