converse-ai-support-library

Converse AI Support Library

A React component library that provides Voice Call and Text Chat functionality using Vapi AI.

🚀 Features

• Voice Call Component: Full-featured voice calling with Vapi AI
• Text Chat Component: Interactive chatbot interface
• TypeScript Support: Full type safety and IntelliSense
• Container Responsive: Adapts to parent container size
• Customizable Styling: Support for custom styles and CSS classes

📦 Installation

npm install converse-ai-support-library

🎨 Import Styles

Important: Import the CSS file in your main application file to enable styling:

// In your main App.js or index.js file
import "converse-ai-support-library/dist/index.css";

🔧 Usage

Call Component

import React from "react";
import { Call } from "converse-ai-support-library";
import "converse-ai-support-library/dist/index.css"; // Don't forget this!

function App() {
  return (
    <div style={{ height: "600px", width: "800px" }}>
      <Call
        apiKey="your-vapi-api-key"
        assistantId="your-vapi-assistant-id"
        personName="John Doe"
        personRole="Sales Agent"
        personImage="https://example.com/agent-photo.jpg"
      />
    </div>
  );
}

export default App;

Call Component Props

Prop	Type	Required	Default	Description
apiKey	string	✅	-	Your Vapi AI API key
assistantId	string	✅	-	Your Vapi AI assistant ID
personName	string	❌	"James Doe"	Name to display
personRole	string	❌	"SALES PERSON"	Role/title to display
personImage	string	❌	Default avatar	Image URL for the person
config	object	❌	{}	Additional Vapi configuration
className	string	❌	""	CSS class for inner content
style	React.CSSProperties	❌	{}	Inline styles for content
containerClassName	string	❌	""	CSS class for container
containerStyle	React.CSSProperties	❌	{}	Inline styles for container

Chatbot Component

import React from "react";
import { Chatbot } from "converse-ai-support-library";
import "converse-ai-support-library/dist/index.css"; // Don't forget this!

function App() {
  return (
    <div style={{ height: "500px", width: "400px" }}>
      <Chatbot />
    </div>
  );
}

export default App;

Custom Styling Examples

// Custom sizing and styling
<Call
  apiKey="your-api-key"
  assistantId="your-assistant-id"
  containerStyle={{
    height: "100vh",
    background: "linear-gradient(to bottom, #667eea 0%, #764ba2 100%)",
  }}
  className="custom-call-content"
  style={{ borderRadius: "20px", border: "2px solid white" }}
/>

📋 Requirements

• React 18+
• Vapi AI account and API keys

🔑 Getting Vapi AI Credentials

• Sign up at Vapi AI
• Create an assistant
• Get your API key and assistant ID from the dashboard

📄 License

MIT