Nuxt

Install the module with the Nuxt CLI:

npx nuxi module add vue-llm

Or add it yourself; vue-llm and vue-llm/nuxt both work:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['vue-llm/nuxt'],
  runtimeConfig: {
    vueLlm: {
      openaiApiKey: '', // NUXT_VUE_LLM_OPENAI_API_KEY
      anthropicApiKey: '', // NUXT_VUE_LLM_ANTHROPIC_API_KEY
    },
  },
})

The module:

• auto-imports useChat, useCompletion, useObject, usePrompt, createPrompt, createChatPrompt, defineTool;
• auto-imports the provider factories createOpenAI, createAnthropic, createGoogle, createOllama, createSSEProvider, createWebLLM and isWebGPUSupported;
• registers the <MessageParts> and <StreamMarkdown> components. A component of yours with the same name takes precedence;
• adds the components' stylesheet;
• in development, adds the LLM tab to Vue DevTools when @vue/devtools-api is installed. Turn it off with vueLlm: { devtools: false }.

Server route

// server/api/chat.post.ts
import { createLLMHandler } from 'vue-llm/server'
import { createOpenAI } from 'vue-llm/providers'

const config = useRuntimeConfig()

const handler = createLLMHandler({
  provider: createOpenAI({ apiKey: config.vueLlm.openaiApiKey }),
  model: 'gpt-4o',
})

export default defineEventHandler(event => handler(toWebRequest(event)))

Page

<script setup lang="ts">
import { createProxyProvider } from 'vue-llm/server'

const { messages, input, handleSubmit } = useChat({
  provider: createProxyProvider('/api/chat'),
  model: 'gpt-4o',
})
</script>