Embedding the Web Component

📋 Planned

Documentation Under Construction

This page will show how to embed the <vanna-chat> web component in various frameworks including React, Vue, Svelte, and plain HTML.

Planned Content

  • ✓ Basic HTML embedding (simplest)
  • ✓ React integration with TypeScript
  • ✓ Vue.js integration
  • ✓ Svelte integration
  • ✓ Angular integration
  • ✓ Component props and configuration
  • ✓ Event handling and callbacks
  • ✓ Styling and customization basics

Want to contribute or suggest improvements? Open an issue on GitHub

Framework Examples

When complete, this will provide complete examples for:

Plain HTML

<!DOCTYPE html>
<html>
<head>
    <script src="https://img.vanna.ai/vanna-components.js"></script>
</head>
<body>
    <vanna-chat
        api-base="http://localhost:8000"
        sse-endpoint="/api/vanna/v2/chat_sse">
    </vanna-chat>
</body>
</html>

React

import { useEffect, useRef } from 'react';

export function VannaChat() {
    const chatRef = useRef<HTMLElement>(null);

    useEffect(() => {
        // Load web component
        // Configure props
    }, []);

    return <vanna-chat ref={chatRef} />;
}

Vue

<template>
    <vanna-chat
        :api-base="apiBase"
        :sse-endpoint="sseEndpoint">
    </vanna-chat>
</template>

Svelte

<script>
    import { onMount } from 'svelte';

    onMount(() => {
        // Load web component
    });
</script>

<vanna-chat
    api-base="http://localhost:8000"
    sse-endpoint="/api/vanna/v2/chat_sse">
</vanna-chat>

Component Props

Full documentation of all available props:

  • api-base: Base URL for API requests
  • sse-endpoint: Server-Sent Events endpoint
  • ws-endpoint: WebSocket endpoint (alternative to SSE)
  • poll-endpoint: Polling endpoint (fallback)
  • Custom styling props