Skip to main content

​
Overview

Add your Invent AI assistant to any Nuxt 3 application. Perfect for Vue.js applications with server-side rendering and static generation.

​
Installation

1

Create Assistant Component

<!-- components/InventAssistant.vue -->
<template>
  <div>
    <invent-assistant
      :assistant-id="assistantId"
      :theme-appearance="themeAppearance"
      :theme-button-background-color="themeButtonBackgroundColor"
      :theme-button-color="themeButtonColor"
      :user-id="userId"
      :user-name="userName"
      :user-hash="userHash"
      :user-avatar="userAvatar"
    />
    <script
      type="text/javascript"
      src="https://www.useinvent.com/button.js"
      async
      defer
    ></script>
  </div>
</template>

<script setup lang="ts">
interface Props {
  assistantId: string;
  themeAppearance?: 'auto' | 'light' | 'dark';
  themeButtonBackgroundColor?: string;
  themeButtonColor?: string;
  userId?: string;
  userName?: string;
  userHash?: string;
  userAvatar?: string;
}

withDefaults(defineProps<Props>(), {
  themeAppearance: 'auto',
});
</script>
2

Add to App Layout

<!-- app.vue or layouts/default.vue -->
<template>
  <div>
    <NuxtPage />
    <InventAssistant :assistant-id="config.public.inventAssistantId" />
  </div>
</template>

<script setup lang="ts">
const config = useRuntimeConfig();
</script>
3

Configure Environment

Add to nuxt.config.ts:
export default defineNuxtConfig({
  runtimeConfig: {
    inventSecretKey: process.env.INVENT_SECRET_KEY, // Private
    public: {
      inventAssistantId: process.env.NUXT_PUBLIC_INVENT_ASSISTANT_ID,
    },
  },
});
Add to .env:
NUXT_PUBLIC_INVENT_ASSISTANT_ID=ast_YOUR_ASSISTANT_ID
INVENT_SECRET_KEY=your_secret_key_here

​
User Authentication

Security Requirement: When using any user-* attributes (user-id, user-name, user-avatar), you must also provide user-hash. Both user-id and user-hash must be provided together, or neither should be provided. The user-hash must be generated on your backend using HMAC-SHA256 with your assistant’s secret key. Never expose the secret key to the client.

​
Server-Side Hash Generation

Use Nuxt server routes to generate the hash securely: 
// server/api/user-hash.get.ts
import crypto from 'crypto';

export default defineEventHandler(async (event) => {
  // Get user from your auth system
  const session = await getUserSession(event);

  if (!session?.user) {
    throw createError({
      statusCode: 401,
      message: 'Unauthorized',
    });
  }

  const config = useRuntimeConfig();
  const userId = session.user.id;

  const userHash = crypto
    .createHmac('sha256', config.inventSecretKey)
    .update(userId)
    .digest('hex');

  return {
    userId,
    userName: session.user.name,
    userAvatar: session.user.avatar,
    userHash,
  };
});

​
Using in Component

<!-- components/InventAssistant.vue -->
<template>
  <invent-assistant
    :assistant-id="config.public.inventAssistantId"
    :user-id="userData?.userId"
    :user-name="userData?.userName"
    :user-hash="userData?.userHash"
    :user-avatar="userData?.userAvatar"
  />
</template>

<script setup lang="ts">
const config = useRuntimeConfig();

const { data: userData } = await useFetch('/api/user-hash', {
  lazy: true,
  server: false,
});
</script>

​
Integration with Nuxt Auth

​
Using @sidebase/nuxt-auth

<!-- app.vue -->
<template>
  <div>
    <NuxtPage />
    <InventAssistant
      :assistant-id="config.public.inventAssistantId"
      v-bind="userAuthData"
    />
  </div>
</template>

<script setup lang="ts">
const config = useRuntimeConfig();
const { data: session } = useAuth();

const userAuthData = computed(() => {
  if (!session.value?.user) return {};

  return {
    userId: session.value.user.id,
    userName: session.value.user.name,
    userAvatar: session.value.user.image,
    // Note: userHash should be fetched from API route
  };
});
</script>

​
TypeScript Support

Add type declarations: 
// types/invent-assistant.d.ts
declare module 'vue' {
  export interface GlobalComponents {
    'invent-assistant': {
      'assistant-id': string;
      'theme-appearance'?: 'auto' | 'light' | 'dark';
      'theme-button-background-color'?: string;
      'theme-button-color'?: string;
      'user-id'?: string;
      'user-name'?: string;
      'user-hash'?: string;
      'user-avatar'?: string;
    };
  }
}

export {};

​
Composable for Authentication

Create a reusable composable: 
// composables/useInventAuth.ts
export const useInventAuth = () => {
  const userData = useState<{
    userId: string;
    userName: string;
    userAvatar?: string;
    userHash: string;
  } | null>('inventUserData', () => null);

  const fetchUserAuth = async () => {
    try {
      const data = await $fetch('/api/user-hash');
      userData.value = data;
    } catch (error) {
      userData.value = null;
    }
  };

  return {
    userData: readonly(userData),
    fetchUserAuth,
  };
};
Usage: 
<template>
  <InventAssistant
    :assistant-id="config.public.inventAssistantId"
    v-bind="userData"
  />
</template>

<script setup lang="ts">
const config = useRuntimeConfig();
const { userData, fetchUserAuth } = useInventAuth();

onMounted(() => {
  fetchUserAuth();
});
</script>

​
Tips for Nuxt

Server Routes

Use server routes for secure hash generation

Composables

Create reusable composables for auth logic

SSR Compatible

Works with SSR, SSG, and SPA modes

Type Safe

Full TypeScript support

​
Troubleshooting

Solutions:
  • Ensure plugin is client-side only (.client.ts)
  • Check that script loads after component mounts
  • Verify URL is correct
  • Check browser console for errors
Solutions:
  • Use ClientOnly component if needed
  • Ensure script loads client-side only
  • Check that user data is fetched client-side
Solutions:
  • Restart dev server after adding env variables
  • Check nuxt.config.ts runtimeConfig
  • Use NUXT_PUBLIC_ prefix for public variables
  • Keep secret key private (no prefix)

​
Best Practices

  • Use server routes for hash generation
  • Keep secret key in .env (never commit)
  • Use composables for reusable logic
  • Test in both SSR and SPA modes
  • Leverage Nuxt’s built-in security features