Chat

Cree interfaces de chat de IA con transmisión, razonamiento y llamadas de herramientas.

Nuxt UI proporciona un conjunto de componentes diseñados para construir interfaces de chat impulsadas por IA. Se integran perfectamente con el Vercel AI SDK para transmitir respuestas, razonamiento, llamadas a herramientas y más.

Echa un vistazo a las plantillas de Nuxt y Vue AI Chat en GitHub para implementaciones listas para la producción.

Componentes

Componente	Descripción
@@	Lista de mensajes desplazable con desplazamiento automático e indicador de carga.
@@	Burbuja de mensajes individual con avatar, acciones y ranuras.
@@	Textarea mejorada para enviar mensajes rápidos.
](/docs/components/chat-prompt-submit/docs/components/chat-prompt-submit)	Botón de envío con manejo automático de estado.
	Bloque plegable para el proceso de razonamiento/pensamiento de IA.
@@	Bloque plegable para el estado de invocación de la herramienta AI.
@@ph039@@@@ph040@@@ph041@@@ph042	Animación de shimmer de texto para estados de transmisión.
@@	Layout wrapper para incrustar chat en modales o cajones.

Instalación

Los componentes de Chat están diseñados para ser utilizados con la clase [Vercel AI SDKhttps://ai-sdk.dev/), específicamente la clase Chat para administrar el estado del chat y las respuestas de transmisión.

Instalar las dependencias necesarias:

Configuración del servidor

Cree un punto final de la API del servidor para manejar las solicitudes de chat utilizando . Puede usar el Vercel AI Gateway para acceder a los modelos de IA a través de un punto final centralizado:

server/api/chat.post.ts

import { streamText, convertToModelMessages, toUIMessageStream, createUIMessageStreamResponse } from 'ai'
import { gateway } from '@ai-sdk/gateway'

export default defineEventHandler(async (event) => {
  const { messages } = await readBody(event)

  const result = streamText({
    model: gateway('anthropic/claude-sonnet-5'),
    maxOutputTokens: 10000,
    instructions: 'You are a helpful assistant.',
    messages: await convertToModelMessages(messages)
  })

  const stream = toUIMessageStream({ stream: result.stream })
  return createUIMessageStreamResponse({ stream })
})

@156@Reasoning

Para habilitar reasoning, configure providerOptions para su proveedor.(Anthropic,Google,OpenAI)):

server/api/chat.post.ts

import { streamText, convertToModelMessages, toUIMessageStream, createUIMessageStreamResponse } from 'ai'
import { gateway } from '@ai-sdk/gateway'

export default defineEventHandler(async (event) => {
  const { messages } = await readBody(event)

  const result = streamText({
    model: gateway('anthropic/claude-sonnet-5'),
    maxOutputTokens: 10000,
    instructions: 'You are a helpful assistant.',
    messages: await convertToModelMessages(messages),
    providerOptions: {
      anthropic: {
        thinking: {
          type: 'adaptive'
        },
        effort: 'low'
      },
      google: {
        thinkingConfig: {
          includeThoughts: true,
          thinkingLevel: 'low'
        }
      },
      openai: {
        reasoningEffort: 'low',
        reasoningSummary: 'detailed'
      }
    }
  })

  const stream = toUIMessageStream({ stream: result.stream })
  return createUIMessageStreamResponse({ stream })
})

Búsqueda en la Web

Algunos proveedores ofrecen herramientas de búsqueda web integradas: Anthropic,,.

import { streamText, convertToModelMessages, toUIMessageStream, createUIMessageStreamResponse } from 'ai'
import { anthropic } from '@ai-sdk/anthropic'
import { gateway } from '@ai-sdk/gateway'

export default defineEventHandler(async (event) => {
  const { messages } = await readBody(event)

  const result = streamText({
    model: gateway('anthropic/claude-sonnet-5'),
    instructions: 'You are a helpful assistant.',
    messages: await convertToModelMessages(messages),
    tools: {
      web_search: anthropic.tools.webSearch_20260209({})
    }
  })

  const stream = toUIMessageStream({ stream: result.stream })
  return createUIMessageStreamResponse({ stream })
})

import { streamText, convertToModelMessages, toUIMessageStream, createUIMessageStreamResponse } from 'ai'
import { google } from '@ai-sdk/google'
import { gateway } from '@ai-sdk/gateway'

export default defineEventHandler(async (event) => {
  const { messages } = await readBody(event)

  const result = streamText({
    model: gateway('google/gemini-3-flash'),
    instructions: 'You are a helpful assistant.',
    messages: await convertToModelMessages(messages),
    tools: {
      google_search: google.tools.googleSearch({})
    }
  })

  const stream = toUIMessageStream({ stream: result.stream })
  return createUIMessageStreamResponse({ stream })
})

import { streamText, convertToModelMessages, toUIMessageStream, createUIMessageStreamResponse } from 'ai'
import { openai } from '@ai-sdk/openai'
import { gateway } from '@ai-sdk/gateway'

export default defineEventHandler(async (event) => {
  const { messages } = await readBody(event)

  const result = streamText({
    model: gateway('openai/gpt-5-nano'),
    instructions: 'You are a helpful assistant.',
    messages: await convertToModelMessages(messages),
    tools: {
      web_search: openai.tools.webSearch({})
    }
  })

  const stream = toUIMessageStream({ stream: result.stream })
  return createUIMessageStreamResponse({ stream })
})

MCP cliente

Capacite a su chatbot con funciones avanzadas de llamada de herramientas utilizando el de @ai-sdk/mcp. MCP permite que su IA realice acciones dinámicas, como buscar su documentación o ejecutar tareas personalizadas, para proporcionar respuestas más relevantes y precisas.

Para comenzar, instale el paquete MCP:

npm install @ai-sdk/mcp

pnpm add @ai-sdk/mcp

yarn add @ai-sdk/mcp

A continuación, configure el punto final del servidor para usar las herramientas MCP.

server/api/chat.post.ts

import { streamText, convertToModelMessages, isStepCount, toUIMessageStream, createUIMessageStreamResponse } from 'ai'
import { createMCPClient } from '@ai-sdk/mcp'
import { gateway } from '@ai-sdk/gateway'

export default defineEventHandler(async (event) => {
  const { messages } = await readBody(event)

  const httpClient = await createMCPClient({
    transport: { type: 'http', url: 'https://your-app.com/mcp' }
  })
  try {
    const tools = await httpClient.tools()

    const result = streamText({
      model: gateway('anthropic/claude-sonnet-5'),
      maxOutputTokens: 10000,
      instructions: 'You are a helpful assistant. Use your tools to search for relevant information before answering questions.',
      messages: await convertToModelMessages(messages),
      stopWhen: isStepCount(6),
      tools,
      onEnd: async () => {
        await httpClient.close()
      },
      onError: async (error) => {
        console.error(error)
        await httpClient.close()
      }
    })

    const stream = toUIMessageStream({ stream: result.stream })
    return createUIMessageStreamResponse({ stream })
  } catch (error) {
    // Close the MCP client if setup fails before streaming starts
    await httpClient.close()
    throw error
  }
})

Aprobación de la herramienta

Requerir una confirmación del usuario antes de que una herramienta se ejecute con la opción . La parte de la herramienta se detiene en el estado approval-requested hasta que el usuario responde:

server/api/chat.post.ts

import { streamText, convertToModelMessages, toUIMessageStream, createUIMessageStreamResponse, tool } from 'ai'
import { gateway } from '@ai-sdk/gateway'
import { z } from 'zod'

export default defineEventHandler(async (event) => {
  const { messages } = await readBody(event)

  const result = streamText({
    model: gateway('anthropic/claude-sonnet-5'),
    maxOutputTokens: 10000,
    instructions: 'You are a helpful assistant.',
    messages: await convertToModelMessages(messages),
    tools: {
      deleteFile: tool({
        description: 'Delete a file from the project',
        inputSchema: z.object({ path: z.string() }),
        execute: async ({ path }) => ({ deleted: path })
      })
    },
    toolApproval: {
      deleteFile: 'user-approval'
    }
  })

  const stream = toUIMessageStream({ stream: result.stream })
  return createUIMessageStreamResponse({ stream })
})

Configuración del cliente

Utilice el componente useChat de @ai-sdk/vue para administrar el estado del chat y conectarse a su punto final del servidor:

Para la configuración de Comark reutilizable (plugins, clases, etc.), utilice defineMarkdownComponent para crear un componente personalizado en lugar de pasar accesorios en línea cada vez.

Al utilizar el plugin shiki, agregue el siguiente CSS a su hoja de estilo para admitir el modo oscuro:

main.css

html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

Lea el tutorial completo Build an AI Chatbot para obtener una guía paso a paso.

DashboardToolbar

A toolbar to display under the navbar in a dashboard.

ChatMessage

Display a chat message with icon, avatar, and actions.