@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 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

``bash
npm install @embedapi/react
`

$3

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

function App() {
return (
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

`bash
npm install @embedapi/react
`

That's it! All required dependencies are included.

Components

$3

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

`jsx
// 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
}}
/>
`

$3

The component supports comprehensive styling through the customStyles prop:

`jsx
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

$3

Build custom chat interfaces with our low-level hook:

`jsx
const {
messages, // Current chat messages
isLoading, // Loading state
error, // Error state
currentMessage, // Current message being processed
sendMessage, // Send a message without streaming
streamMessage, // Send a message with streaming
reset, // Reset the chat
clearCache, // Clear cached messages
messageCount // Number of messages currently stored
} = useChat({
agentId: 'agent_...',
enableCache: true,
messageLimit: 10, // Limit the number of cached messages
initialMessages: []
});
`

$3

The useChat hook includes built-in message caching with automatic limits:

- Messages are automatically cached in sessionStorage
- Conversations persist between page reloads
- Each agent has its own cache
- Cache can be disabled with enableCache: false
- Clear cache manually with clearCache()
- Limit the number of cached messages with messageLimit (default: 10)

$3

Build a custom chat interface using the useChat hook with caching:

`jsx
import React, { useState } from 'react';
import { useChat } from '@embedapi/react';

function CustomChat() {
const [input, setInput] = useState('');
const {
messages,
isLoading,
currentMessage,
streamMessage,
reset,
clearCache,
messageCount
} = useChat({
agentId: 'agent_...',
enableCache: true,
messageLimit: 20, // Custom message limit
initialMessages: [
{ role: 'assistant', content: 'How can I help you today?' }
]
});

const handleSend = async (e) => {
e.preventDefault();
if (!input.trim() || isLoading) return;

const message = input.trim();
setInput('');
await streamMessage(message);
};

const handleReset = () => {
reset(); // Reset conversation
clearCache(); // Clear cached messages
};

return (


export default CustomChat;
`

Customization

$3

The AgentChat component supports both light and dark themes:

`jsx

`

$3

Customize any part of the chat interface:

`jsx
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

- 📚 Documentation
- 🐛 Issue Tracker
- 💬 Discord Community