AI-Generated Placeholder Documentation

This documentation page has been automatically generated by a Large Language Model (LLM) and serves as placeholder content. The information provided here may be incomplete, inaccurate, or subject to change.

For accurate and complete information, please refer to the Vanna source code on GitHub.

Web UI

Vanna 2.0 provides a ready-to-use web component that you can embed in your own applications to create chat interfaces for your agents.

Adding the Web Component to Your App

The Vanna chat interface is packaged as a standard web component that works with any HTML page or web framework.

Basic Integration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Vanna Agent</title>
    
    <!-- Load the Vanna web component -->
    <script type="module" src="https://img.vanna.ai/vanna-components.js"></script>
    
    <style>
        vanna-chat {
            width: 100%;
            height: 600px;
            display: block;
        }
    </style>
</head>
<body>
    <h1>Chat with Your Data</h1>
    
    <!-- Add the chat component -->
    <vanna-chat
        api-base="http://localhost:8000"
        sse-endpoint="http://localhost:8000/api/vanna/v2/chat_sse"
        ws-endpoint="http://localhost:8000/api/vanna/v2/chat_websocket"
        poll-endpoint="http://localhost:8000/api/vanna/v2/chat_poll">
    </vanna-chat>
</body>
</html>

Component Attributes

The <vanna-chat> component accepts these attributes:

  • api-base - Base URL for your Vanna server
  • sse-endpoint - Server-Sent Events endpoint for streaming responses
  • ws-endpoint - WebSocket endpoint for real-time chat
  • poll-endpoint - HTTP polling endpoint (fallback)

Loading from CDN (Production)

For production, load the component from the CDN:

<script type="module" src="https://img.vanna.ai/vanna-components.js"></script>

Loading Locally (Development)

For development, serve the component from your local server:

<script type="module" src="/static/vanna-components.js"></script>

Full Page Example

Here’s a complete example with authentication and styling:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vanna Chat</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script type="module" src="https://img.vanna.ai/vanna-components.js"></script>
    
    <style>
        body {
            background: linear-gradient(to bottom, #e7e1cf, #ffffff);
            min-height: 100vh;
        }
        vanna-chat {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <div class="max-w-6xl mx-auto p-5">
        <h1 class="text-4xl font-bold text-center mb-8">My Data Agent</h1>
        
        <div class="bg-white rounded-xl shadow-lg h-[600px] overflow-hidden">
            <vanna-chat
                api-base=""
                sse-endpoint="/api/vanna/v2/chat_sse"
                ws-endpoint="/api/vanna/v2/chat_websocket"
                poll-endpoint="/api/vanna/v2/chat_poll">
            </vanna-chat>
        </div>
    </div>
    
    <script>
        // The component automatically includes authentication cookies
        // in all API requests
    </script>
</body>
</html>

Handling Artifacts

The web component emits events when artifacts (charts, tables, etc.) are opened. You can listen to these events to control how they’re displayed:

document.addEventListener('DOMContentLoaded', () => {
    const vannaChat = document.querySelector('vanna-chat');
    
    vannaChat.addEventListener('artifact-opened', (event) => {
        const { artifactId, type, title } = event.detail;
        
        // Open artifact in a new window
        const newWindow = window.open('', '_blank', 'width=900,height=700');
        newWindow.document.write(event.detail.getStandaloneHTML());
        newWindow.document.close();
        
        // Prevent default in-chat rendering
        event.detail.preventDefault();
    });
});

Framework Integration

React

import { useEffect, useRef } from 'react';

function VannaChat() {
    useEffect(() => {
        // Load the web component script
        const script = document.createElement('script');
        script.type = 'module';
        script.src = 'https://img.vanna.ai/vanna-components.js';
        document.head.appendChild(script);
    }, []);
    
    return (
        <vanna-chat
            api-base="http://localhost:8000"
            sse-endpoint="http://localhost:8000/api/vanna/v2/chat_sse"
            ws-endpoint="http://localhost:8000/api/vanna/v2/chat_websocket"
            poll-endpoint="http://localhost:8000/api/vanna/v2/chat_poll"
            style={{ width: '100%', height: '600px', display: 'block' }}
        />
    );
}

Vue

<template>
    <vanna-chat
        api-base="http://localhost:8000"
        sse-endpoint="http://localhost:8000/api/vanna/v2/chat_sse"
        ws-endpoint="http://localhost:8000/api/vanna/v2/chat_websocket"
        poll-endpoint="http://localhost:8000/api/vanna/v2/chat_poll"
        style="width: 100%; height: 600px; display: block;"
    />
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
    const script = document.createElement('script');
    script.type = 'module';
    script.src = 'https://img.vanna.ai/vanna-components.js';
    document.head.appendChild(script);
});
</script>

Svelte

<script>
    import { onMount } from 'svelte';
    
    onMount(() => {
        const script = document.createElement('script');
        script.type = 'module';
        script.src = 'https://img.vanna.ai/vanna-components.js';
        document.head.appendChild(script);
    });
</script>

<vanna-chat
    api-base="http://localhost:8000"
    sse-endpoint="http://localhost:8000/api/vanna/v2/chat_sse"
    ws-endpoint="http://localhost:8000/api/vanna/v2/chat_websocket"
    poll-endpoint="http://localhost:8000/api/vanna/v2/chat_poll"
    style="width: 100%; height: 600px; display: block;"
/>

Styling the Component

The web component uses Tailwind CSS internally and respects the Vanna brand colors:

/* You can style the container */
vanna-chat {
    width: 100%;
    height: 600px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* The component adapts to your page's color scheme */

Deploying with the Built-in UI

When you create a FastAPI or Flask server with Vanna, it automatically serves the web component UI:

from vanna import Agent
from vanna.servers.fastapi import VannaFastAPIServer

agent = Agent(...)
server = VannaFastAPIServer(agent)
server.run()

# The UI is automatically available at http://localhost:8000

Component Architecture for Tools

Tools return UiComponent objects that contain both rich and simple representations:

from vanna.core.tool import ToolResult
from vanna.components import UiComponent, DataFrameComponent, SimpleTextComponent

result = ToolResult(
    success=True,
    result_for_llm="Query returned 42 rows",
    ui_component=UiComponent(
        rich_component=DataFrameComponent(...),  # For web UIs
        simple_component=SimpleTextComponent(text="...")  # For messaging apps
    )
)

The dual-component architecture ensures compatibility:

  • Web UIs render rich components with full interactivity
  • Simpler messaging apps like WhatsApp use simple text/image components
  • API consumers can choose which representation to use

See Also