vanta-agent-embed-sdk

v1.1.1

Published

20 days ago

Vanta AI Agent Embed SDK for embedding AI agents into websites

0High
0Medium
0Low

The Vanta Agent Embed SDK offers a premium, Apple-inspired interface to bring context-aware AI agents to any web application. With a meticulously optimized footprint, aggressive CSS-in-JS removal, and Preact aliasing, it drops directly into your app without destroying your Lighthouse scores.

✨ Features (v1.1.0)

⚡ Micro-Footprint: Just ~13KB gzipped (~38KB parsed). Built with an internalized Preact engine.
🎨 Stunning Aesthetics: Glassmorphism, blurred backdrops, and native macOS-style traffic light window controls.
☁️ Cloud Synced: Design your agent on vanta-embed-agent.vercel.app, and the SDK will automatically map its name, avatar, and brand colors to the widget.
⚛️ Framework Agnostic: Works flawlessly as a React component or as a Vanilla JavaScript payload via CDN/Script tag.
💬 Streaming Responses: Real-time Server-Sent Events (SSE) chat token streaming for instant perceived performance.

🚀 Getting Started

First, head over to the Vanta Platform and create your AI agent. You will receive an Agent ID and an API Key.

Installation

npm install vanta-agent-embed-sdk
# or
pnpm add vanta-agent-embed-sdk
# or
yarn add vanta-agent-embed-sdk

💻 Usage

React Environments (Next.js, Vite, CRA)

The SDK automatically detects your framework's environment variables (NEXT_PUBLIC_VANTA_API_KEY, VITE_VANTA_API_KEY, etc.), allowing for zero-config setups!

import { VantaAgent } from 'vanta-agent-embed-sdk';

export default function MyPage() {
  return (
    <VantaAgent 
      agentId="your-vanta-agent-id" 
    />
  );
}

Vanilla HTML / Webflow / WordPress

You don't need React to use Vanta! Just drop the bundled script into your <body> and initialize it.

<script src="https://unpkg.com/vanta-agent-embed-sdk/dist/web/web.global.js"></script>
<script>
    if (window.Vanta) {
        window.Vanta.init({
            agentId: 'your-vanta-agent-id',
            apiKey: 'your-public-api-key', // Safely scoped to messaging
            type: 'floating',
            position: 'bottom-right'
        });
    }
</script>

⚙️ Configuration Properties

While the SDK automatically fetches your Agent's design (colors, name, avatar) from the cloud, you can optionally override specific behaviors via props/init parameters:

| Prop | Type | Default | Description | |------|------|---------|-------------| | agentId | string | Required | The ID of your agent from the Vanta Dashboard. | | apiKey | string | undefined | Required if no env variables trigger detection. | | type | 'floating' \| 'fullpage' | 'floating' | How the interface mounts to the DOM. | | position | 'bottom-right' \| 'bottom-left' ... | 'bottom-right' | Placement on the screen. | | triggerIcon | string | undefined | URL to a custom image to replace the floating chat bubble. | | apiBaseUrl | string | (Cloud API) | Override for self-hosted Vanta backends. | | theme | object | {} | Local overrides for primaryColor, backgroundColor, etc. |

🤝 Support

Need help or looking to report a bug? Please report it on the repository issues tab or reach out via the Vanta Platform.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme