🔌 Ecosystem ⚡ Zero Friction 📦 Production Ready

Integrations & Ecosystem

Select your stack from the control center below. Click any module to instantly update code orchestration arrays.

⚛️

React Next.js

▲

Next.js App Router

🟢

Vue.js Composition

⎔

Nuxt Vue Meta

🟠

Svelte SvelteKit

🚀

Astro Islands

🔴

Angular TypeScript

🔷

WordPress PHP Hooks

🌐

Webflow No-Code

🛍️

Shopify Liquid

🟨

Vanilla JS Static

🔮

Gatsby GraphQL

💿

Remix Edge

⚡

Laravel PHP

⚡

Vite Build Tool

React Lifecycle Engine

Asynchronous layout injection via standard React hooks framework.

import { useEffect } from 'react';

export default function NexusWidget() {
  useEffect(() => {
    window.NexusConfig = {
      apiKey: 'YOUR_NEXUS_API_KEY',
      model: 'meta-llama/llama-4-scout-17b-16e-instruct',
      theme: 'auto'
    };
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/nexus-web-assistant@3/dist/nexus-assistant.min.js';
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);
  }, []);

  return null;
}

Next.js App Router Integration

Client-side component with 'use client' directive for App Router.

'use client';

import { useEffect } from 'react';

export default function NexusWidget() {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      window.NexusConfig = {
        apiKey: 'YOUR_NEXUS_API_KEY',
        model: 'meta-llama/llama-4-scout-17b-16e-instruct',
        theme: 'auto'
      };
      const script = document.createElement('script');
      script.src = 'https://cdn.jsdelivr.net/npm/nexus-web-assistant@3/dist/nexus-assistant.min.js';
      script.async = true;
      script.defer = true;
      document.body.appendChild(script);
    }
  }, []);

  return null;
}

Vue.js Composition Setup

Lifecycle mounting within reactive composition components.

import { onMounted } from 'vue';

export default {
  name: 'NexusWidget',
  setup() {
    onMounted(() => {
      window.NexusConfig = {
        apiKey: 'YOUR_NEXUS_API_KEY',
        model: 'meta-llama/llama-4-scout-17b-16e-instruct',
        theme: 'auto'
      };
      const script = document.createElement('script');
      script.src = 'https://cdn.jsdelivr.net/npm/nexus-web-assistant@3/dist/nexus-assistant.min.js';
      script.async = true;
      document.body.appendChild(script);
    });
  }
}

Nuxt.js Plugin Module

Server-side safe mounting via Nuxt plugin architecture.

// plugins/nexus.client.js
export default defineNuxtPlugin(() => {
  if (process.client) {
    window.NexusConfig = {
      apiKey: 'YOUR_NEXUS_API_KEY',
      model: 'meta-llama/llama-4-scout-17b-16e-instruct',
      theme: 'auto'
    };
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/nexus-web-assistant@3/dist/nexus-assistant.min.js';
    script.async = true;
    document.body.appendChild(script);
  }
});

Svelte Component Mount

Reactive onMount lifecycle for Svelte applications.

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    window.NexusConfig = {
      apiKey: 'YOUR_NEXUS_API_KEY',
      model: 'meta-llama/llama-4-scout-17b-16e-instruct',
      theme: 'auto'
    };
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/nexus-web-assistant@3/dist/nexus-assistant.min.js';
    script.async = true;
    document.body.appendChild(script);
  });
</script>

<!-- No template needed, widget auto-mounts -->

Astro Component Islands

Client-side directive for Astro island architecture.

---
// src/components/NexusWidget.astro
---

<script>
  window.NexusConfig = {
    apiKey: 'YOUR_NEXUS_API_KEY',
    model: 'meta-llama/llama-4-scout-17b-16e-instruct',
    theme: 'auto'
  };
  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/nexus-web-assistant@3/dist/nexus-assistant.min.js';
  script.async = true;
  document.body.appendChild(script);
</script>

<!-- Use with client:load for hydration -->

Angular Component Strategy

Strict TypeScript type assignment mapping to global DOM interfaces.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-nexus-widget',
  template: ''
})
export class NexusWidgetComponent implements OnInit {
  ngOnInit() {
    (window as any).NexusConfig = {
      apiKey: 'YOUR_NEXUS_API_KEY',
      model: 'meta-llama/llama-4-scout-17b-16e-instruct',
      theme: 'auto'
    };
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/nexus-web-assistant@3/dist/nexus-assistant.min.js';
    script.async = true;
    document.body.appendChild(script);
  }
}

WordPress Core WP_HEAD Hook

Inject engine headers through action hook layers inside template files.

function add_nexus_ai_widget() {
    if (!is_admin()) {
        ?>
        <script>
        window.NexusConfig = {
            apiKey: 'YOUR_NEXUS_API_KEY',
            theme: 'auto'
        };
        </script>
        <script defer src="https://cdn.jsdelivr.net/npm/nexus-web-assistant@3/dist/nexus-assistant.min.js"></script>
        <?php
    }
}
add_action('wp_head', 'add_nexus_ai_widget');

Webflow Custom Code Injection

Place inside Site Settings → Custom Code → Footer section.

<!-- Go to Site Settings → Custom Code → Footer -->
<script>
window.NexusConfig = {
    apiKey: 'YOUR_NEXUS_API_KEY',
    model: 'meta-llama/llama-4-scout-17b-16e-instruct',
    theme: 'auto'
};
</script>
<script defer src="https://cdn.jsdelivr.net/npm/nexus-web-assistant@3/dist/nexus-assistant.min.js"></script>

<!-- For specific pages, add to Page Settings → Custom Code -->

Shopify Theme Liquid Injection

Add to theme.liquid or specific template files for global install.

<!-- Go to Online Store → Themes → Edit Code -->
<!-- Open theme.liquid and add before </body> -->

<script>
window.NexusConfig = {
    apiKey: 'YOUR_NEXUS_API_KEY',
    model: 'meta-llama/llama-4-scout-17b-16e-instruct',
    botName: 'Store Assistant',
    greeting: '🛍️ Hi! Ask me about our products.',
    theme: 'auto'
};
</script>
<script defer src="https://cdn.jsdelivr.net/npm/nexus-web-assistant@3/dist/nexus-assistant.min.js"></script>

Vanilla Production Script Placement

Native declarative parameters optimized for static layouts and HTML containers.

<script>
window.NexusConfig = {
    apiKey: 'YOUR_NEXUS_API_KEY',
    model: 'meta-llama/llama-4-scout-17b-16e-instruct',
    botName: 'Nexus AI',
    greeting: '👋 Hello! Ask me anything about this page.',
    theme: 'auto'
};
</script>
<script defer src="https://cdn.jsdelivr.net/npm/nexus-web-assistant@3/dist/nexus-assistant.min.js"></script>

Gatsby SSR/Client Wrapper

Safe mounting with Gatsby's browser API and SSR awareness.

// gatsby-browser.js
export const onClientEntry = () => {
  window.NexusConfig = {
    apiKey: 'YOUR_NEXUS_API_KEY',
    model: 'meta-llama/llama-4-scout-17b-16e-instruct',
    theme: 'auto'
  };
  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/nexus-web-assistant@3/dist/nexus-assistant.min.js';
  script.async = true;
  document.body.appendChild(script);
};

Remix Client-Only Mount

Safe hydration with Remix's client entry and loader context.

// app/entry.client.jsx
import { useEffect } from 'react';

export default function NexusWidget() {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      window.NexusConfig = {
        apiKey: 'YOUR_NEXUS_API_KEY',
        model: 'meta-llama/llama-4-scout-17b-16e-instruct',
        theme: 'auto'
      };
      const script = document.createElement('script');
      script.src = 'https://cdn.jsdelivr.net/npm/nexus-web-assistant@3/dist/nexus-assistant.min.js';
      script.async = true;
      document.body.appendChild(script);
    }
  }, []);
  return null;
}

Laravel Blade Directives

Embed directly inside Blade templates with PHP safety.

// resources/views/layouts/app.blade.php
@push('scripts')
<script>
window.NexusConfig = {
    apiKey: '{{ env('NEXUS_API_KEY') }}',
    model: 'meta-llama/llama-4-scout-17b-16e-instruct',
    theme: 'auto'
};
</script>
<script defer src="https://cdn.jsdelivr.net/npm/nexus-web-assistant@3/dist/nexus-assistant.min.js"></script>
@endpush

Vite Plugin Injection

Add to index.html or use Vite's transform hooks for module loading.

<!-- index.html -->
<script>
window.NexusConfig = {
    apiKey: 'YOUR_NEXUS_API_KEY',
    model: 'meta-llama/llama-4-scout-17b-16e-instruct',
    theme: 'auto'
};
</script>
<script defer src="https://cdn.jsdelivr.net/npm/nexus-web-assistant@3/dist/nexus-assistant.min.js"></script>

<!-- For React/Vue projects, use the framework-specific approach -->

Enterprise Configuration Setup

Need deep adjustments, custom reverse proxies, or dedicated context routing wrappers?

Request Support Read SDK Manual