Code Components

Code blocks, terminals, artifacts, and dev tooling UI working together.

CodeBlock

server/api/chat.post.tstypescript

1import { streamText } from 'ai'
2import { openai } from '@ai-sdk/openai'
3
4const result = await streamText({
5  model: openai('gpt-4o'),
6  prompt: 'What is RAG?',
7  system: 'You are a helpful assistant.',
8})

Terminal

zsh

$pnpm add ai-elements-nuxt ai @ai-sdk/vue

Packages: +148

✓ Done in 2.1s

File Tree

Artifact

<script setup lang="ts">
const { aiMessages, input, handleSubmit, isStreaming } = useAiChat({ api: '/api/chat' })
</script>

<template>
  <AiMessage v-for="(msg, i) in aiMessages" :key="i" v-bind="msg">
    <template #content="{ content, isStreaming: streaming }">
      {{ content }}<AiStreamingCursor v-if="streaming" />
    </template>
  </AiMessage>
  <AiPromptInput v-model="input" :loading="isStreaming" @submit="handleSubmit" />
</template>

Snippet

types importimport type { AiMessageProps } from 'ai-elements-nuxt/types'

Commit

Msrc/runtime/types/index.ts+24-3

Msrc/runtime/composables/useAiChat.ts+18-5

Msrc/module.ts+8-2

MREADME.md+45-12

Env Vars

OPENAI_API_KEY••••••••

AI_MODELgpt-4o

MAX_TOKENS2048

ENABLE_STREAMINGtrue

Test Results

6 tests5 passed1 failed70ms

useAiChat

✓initializes without API key12ms

✓handles submit and clears input8ms

mapMessageParts

✓converts UIMessage to AiMessageProps5ms

AiMessage

✓renders content slot correctly18ms

useAiChatPersisted

✗restores persisted messages on mount24ms

Expected 3 messages, received 0

useAiMarkdown

✓sanitizes XSS in markdown output3ms

Stack Trace

toAiMessagePropssrc/runtime/utils/mapMessageParts.ts:42:12

computedsrc/runtime/composables/useAiChat.ts:87

Chat.messages.getnode_modules/@ai-sdk/vue/dist/index.js:234

Agent

RAG Agent

thought

Planning search strategy for the query…

action (searchKnowledgeBase)

searchKnowledgeBase("RAG definition")

observation

Found 3 relevant chunks with score > 0.85