JSPM

@embedapi/react

1.0.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 26
  • Score
    100M100P100Q45778F
  • License MIT

🚀 Build stunning AI chat interfaces in minutes! Production-ready React components with real-time streaming, Material-UI design, and zero configuration required. Transform your app with powerful, customizable AI chat features.

Package Exports

  • @embedapi/react
  • @embedapi/react/dist/index.esm.js
  • @embedapi/react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@embedapi/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@embedapi/react

🚀 Build Production-Ready AI Chat Interfaces in Minutes!

Transform your React app with stunning AI chat interfaces powered by EmbedAPI. Get a fully customizable Material-UI chat component that works out of the box, or build your own with our powerful hooks.

Why Choose @embedapi/react?

✨ Zero Configuration Required

  • Drop in our <AgentChat /> component and you're ready to go
  • Beautiful Material-UI design works instantly

🎨 Fully Customizable

  • Light/Dark themes included
  • Style every component to match your brand
  • Build custom interfaces with our hooks

⚡ Built for Performance

  • Real-time streaming responses
  • Optimized for production
  • Built on modern React 18

🛠️ Developer Friendly

  • TypeScript definitions included
  • Extensive documentation
  • Active community support

Prerequisites

  1. Create a free account at EmbedAPI
  2. Create an AI agent in your dashboard
  3. Copy your agent ID (starts with agent_...)

Quick Start

npm install @embedapi/react

Basic Usage

import React from 'react';
import { AgentChat } from '@embedapi/react';

function App() {
  return (
    <AgentChat
      agentId="your-agent-id"
      theme="light"
      placeholder="Type a message..."
      customStyles={{
        container: {
          maxWidth: '800px',
          margin: '0 auto'
        }
      }}
    />
  );
}

export default App;

That's it! You now have a professional AI chat interface in your app. 🎉

View Demo | Read Docs | Join Discord

Features

  • 🤖 Pre-built AgentChat component with Material-UI interface
  • 🎣 useChat hook for custom chat implementations
  • 🔄 Real-time streaming support
  • ⚡ Easy integration with EmbedAPI services
  • 🎨 Fully customizable components

Installation

npm install @embedapi/react

That's it! All required dependencies are included.

Components

AgentChat

A fully-featured chat interface built with Material-UI, ready for production use.

<AgentChat
  // Required
  agentId="agent_..."              // Your EmbedAPI agent ID

  // Optional
  theme="light"                    // 'light' or 'dark'
  initialMessages={[               // Initial messages to display
    {
      role: 'assistant',
      content: 'How can I help?'
    }
  ]}
  placeholder="Type a message..."  // Input placeholder text
  className=""                     // Additional CSS class
  containerWidth="100%"           // Width of the chat container
  maxHeight="600px"               // Maximum height of message area
  onError={(error) => {}}         // Error handling callback
  style={{}}                      // Additional inline styles
  customStyles={{                 // Custom styling for components
    container: {},               // Container styles
    messageContainer: {},        // Message area styles
    userMessage: {},            // User message bubble styles
    assistantMessage: {},       // Assistant message bubble styles
    inputContainer: {}          // Input area styles
  }}
/>

Styling Guide

The component supports comprehensive styling through the customStyles prop:

<AgentChat
  customStyles={{
    container: {
      // Styles for the outer container
      maxWidth: '800px',
      margin: '0 auto'
    },
    messageContainer: {
      // Styles for the messages area
      padding: '20px',
      backgroundColor: '#f5f5f5'
    },
    userMessage: {
      // Styles for user message bubbles
      backgroundColor: '#e3f2fd',
      borderRadius: '10px'
    },
    assistantMessage: {
      // Styles for assistant message bubbles
      backgroundColor: '#fff',
      borderRadius: '10px'
    },
    inputContainer: {
      // Styles for the input area
      borderTop: '1px solid #eee',
      padding: '20px'
    }
  }}
  onError={(error) => {}}         // Optional error handling
/>

Hooks

useChat

Build custom chat interfaces with our low-level hook:

const {
  messages,        // Current chat messages
  isLoading,       // Loading state
  error,           // Error state
  currentMessage,  // Current message being processed
  streamMessage,   // Send a message with streaming
  reset            // Reset the chat
} = useChat({
  agentId: 'agent_...',
  initialMessages: [],
  onError: (error) => console.error(error)
});

Advanced Example

Build a custom chat interface using the useChat hook:

import React from 'react';
import { useChat } from '@embedapi/react';

function CustomChat() {
  const {
    messages,
    isLoading,
    currentMessage,
    streamMessage
  } = useChat({
    agentId: 'agent_...'
  });

  const handleSend = async (message) => {
    await streamMessage(message);
  };

  return (
    <div>
      {/* Your custom chat UI */}
      {messages.map((msg, i) => (
        <div key={i}>
          {msg.content}
        </div>
      ))}
      {isLoading && <div>Loading: {currentMessage.content}</div>}
    </div>
  );
}

export default CustomChat;

Customization

Themes

The AgentChat component supports both light and dark themes:

<AgentChat theme="dark" />

Custom Styling

Customize any part of the chat interface:

<AgentChat
  customStyles={{
    container: {
      boxShadow: '0 0 10px rgba(0,0,0,0.1)',
      borderRadius: '12px'
    },
    messageContainer: {
      padding: '20px'
    },
    userMessage: {
      background: '#e3f2fd'
    },
    assistantMessage: {
      background: '#f5f5f5'
    },
    inputContainer: {
      borderTop: '1px solid #eee'
    }
  }}
/>

Coming Soon

  • 📎 File attachments support
  • 🔍 Message search functionality
  • 💾 Message persistence
  • 🔄 Context management
  • 🎨 More UI components
  • 🛠️ Additional utility hooks

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT License - see LICENSE file for details.

Support