breezeflow-sdk

v0.2.8

Published

9 months ago

A powerful React SDK for integrating Breezeflow's AI chat functionality into your web applications. This SDK provides a customizable chat interface that enables real-time communication with AI agents.

0High
0Medium
0Low

daviduche03

Breezeflow SDK

Features

🎨 Fully customizable UI with dark/light theme support
🔄 Real-time streaming responses
📱 Responsive design
⚡ Built with React and TypeScript
🎭 Smooth animations powered by Framer Motion
📝 Markdown support for rich text messages
🎯 Easy integration with minimal setup

Installation

npm install breezeflow-sdk
# or
yarn add breezeflow-sdk
# or
pnpm add breezeflow-sdk

Usage

import { BreezeflowChat } from 'breezeflow-sdk';
import 'breezeflow-sdk/style.css';

const MyComponent = () => {
  const agent = {
    orientation: "right",
    color: "#0d3033",
    logoURL: "path/to/your/logo.svg",
    headline: "Chat with our AI",
    description: "Ask me anything, and I'll do my best to answer!",
    initialMessage: "Hello 👋 How can I help you today?",
    placeholder: "Type your message here...",
    newChatButtonText: "Start a new chat"
  };

  return (
    <BreezeflowChat 
      agent={agent}
      agentId="your-agent-id"
      styles={{
        theme: 'light', // or 'dark'
        colors: {
          primary: '#0051FF',
          darkBg: '#1a1d21',
          lightBg: '#ffffff',
          messageBgDark: '#1e2227',
          messageBgLight: '#f7f7f7',
          inputBgDark: '#2a2e33',
          inputBgLight: '#f2f2f2'
        }
      }}
    />
  );
};

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script async type="text/javascript" src="https://cdn.jsdelivr.net/npm/breezeflow-sdk@latest/chat.js"></script>

    <title>Basic HTML Snippet</title>
</head>
<body>
    <bf-chat 
    chatbotID="YOUR-CHATBOT-ID"
    theme="dark"
    orientation="right"
    color="#0d3033"
    logoURL="https://mintlify.s3-us-west-1.amazonaws.com/breezeflow/images/hero-dark.svg"
    headline="Chat with our AI"
    description="Ask me anything, and I'll do my best to answer!"
    initialMessage="Hello 👋 How can I help you today?"
    placeholder="Type your message here..."
    newChatButtonText="Start a new chat">
</bf-chat>
</body>
</html>

Configuration

Agent Props

| Prop | Type | Description | |------|------|-------------| | orientation | "left" | "right" | Chat window position | | color | string | Primary color for the chat interface | | logoURL | string | URL for the agent's avatar image | | headline | string | Chat window title | | description | string | Subtitle text below the headline | | initialMessage | string | First message from the AI | | initialMessagePopupDelay | string | Delay before showing initial message | | placeholder | string | Input field placeholder text | | newChatButtonText | string | Text for the new chat button |

Style Props

| Prop | Type | Description | |------|------|-------------| | theme | "light" | "dark" | UI theme | | colors | object | Custom color configuration | | container | object | Container size and position | | borderRadius | object | Border radius for UI elements | | button | object | Chat button configuration |

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

License

MIT

Support

For support, please visit Breezeflow's documentation or contact our support team.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme