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 Customization

The Vanna web UI can be customized to match your brand and requirements.

Styling

The web UI is built with modern web technologies and can be styled using:

  • CSS/Tailwind - Customize colors, typography, spacing
  • Component overrides - Replace default component renderers
  • Themes - Light/dark mode support

Custom Component Renderers

You can override how specific component types are rendered in the frontend by providing custom renderers.

Example: Custom Chart Renderer

// CustomChartRenderer.svelte
<script>
  export let spec;
  export let title;
  
  // Your custom chart rendering logic
</script>

<div class="custom-chart">
  <h3>{title}</h3>
  <!-- Custom visualization -->
</div>

Configuration

The web UI behavior can be configured through the agent configuration:

from vanna.core.agent import AgentConfig, UiFeatures

config = AgentConfig(
    ui_features=UiFeatures(
        feature_group_access={
            'tool_names': ['admin'],
            'tool_arguments': ['admin'],
            'tool_error': ['admin', 'developer'],
        }
    )
)

See UI Feature Flags for complete configuration options.

Embedding in Your Application

The Vanna UI can be embedded in existing applications:

As an iframe

<iframe src="http://your-vanna-server:8000" width="100%" height="600"></iframe>

As a Web Component

<vanna-chat api-url="http://your-vanna-server:8000/api"></vanna-chat>

See Also