Web UI Overview

📋 Planned

Documentation Under Construction

This page will showcase the Vanna web UI with screenshots and explain how to embed the <vanna-chat> web component in your application.

Planned Content

  • ✓ Screenshots of the chat interface in action
  • ✓ Overview of the <vanna-chat> web component
  • ✓ Key UI features: rich data tables, charts, artifacts, streaming updates
  • ✓ How the dual output system works (LLM sees summaries, users see rich components)
  • ✓ Embedding in different frameworks (React, Vue, Svelte, plain HTML)
  • ✓ Links to customization and component reference pages

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

What You’ll Learn

When complete, this page will show:

  • Visual examples: What the UI actually looks like
  • Quick embed: The simplest way to add chat to your app
  • Component library: Tables, charts, status cards, progress bars, artifacts
  • Streaming: How components update in real-time as the agent works

The <vanna-chat> Component

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

Works in any framework or plain HTML!