React chatbot
The fastest way to build a React chatbot
Simplify your React chatbot development. With a chat API and pre-built UI, you can remove most of the frontend and backend work from the equation. So you can focus on perfecting the bot experience.
import OpenAI from "openai";
const openAISecretKey = "<OPENAI_SECRET_KEY>";
const openai = new OpenAI({ apiKey: openAISecretKey });
const messageHistory = [
{
role: "system",
content:
"You are a helpful assistant. Please provide short, concise answers.",
},
];
async function getCompletion() {
const completion = await openai.chat.completions.create({
messages: messageHistory,
model: "gpt-4o-mini",
});
const reply = completion.choices[0].message.content;
return reply;
}
Hello, how can I help you today?
10m ago
Hello, I'm looking to plan a trip to Japan. Can you help me with some information?
9m ago
Of course! I'd be delighted to assist you. What specific information do you need?
8m ago
I'm trying to decide the best time to visit. When's the weather most pleasant?
7m ago
Japan's cherry blossom season in spring (Mar to Apr) and the fall foliage season (Oct to Nov) are popular due to mild weather.
6m ago
Bring on the cherry blossom!
Hey, I’m having trouble accessing my account. It says my password is incorrect.
5m ago
Hi there! No problem — let’s get that sorted. Have you tried resetting your password using the 'Forgot password?' link?
4m ago
Yes, but I haven’t received the reset email yet.
3m ago
Thanks for confirming. I’ve just sent a new reset link to your email. Please check your inbox and spam folder.
2m ago
Is there anything else I can help you with?
just now
Got it — checking my inbox now!
Works great with React
Most of your TalkJS code will live in the frontend, and will work seamlessly with React or any other framework or programming language.
Easily connect to ChatGPT
TalkJS works seamlessly with ChatGPT and PaLM2. Use high-value first-party data and enhance the chatbot user experience.
Built-in notification system
Notify users on any channel so they never miss a message. TalkJS supports email, mobile, SMS, and browser notifications — out of the box.
React chatbot MVP you can ship in 10 minutes
Our JavaScript SDK comes with a pre-built chat UI that you can use right away. The UI is forward-compatible so it will keep working on future devices, new features, and future browser bugs. You can style it with TalkJS Themes or build custom elements like the chat header if needed.
function App() {
const me = {
id: "79302",
name: "Nina Caldwell",
email: "nina.caldwell@example.com", // for offline
};
const botUser = {
id: "bot",
name: "Helpful Bot",
};
const syncUser = useCallback(() => {
return new Talk.User(me);
}, []);
const syncConversation = useCallback((session) => {
// Add users to the conversation
const conversation = session.getOrCreateConversation(
Talk.oneOnOneId(me, botUser)
);
conversation.setParticipant(session.me);
conversation.setParticipant(new Talk.User(botUser));
return conversation;
}, []);
return (
<Session appId="<APP_ID>" syncUser={syncUser}>
<Chatbox syncConversation={syncConversation} className="chat-container" />
</Session>
);
}
Tune the look and feel of your UI
It's easy to customize anything you'd prefer to change from the default TalkJS theme. Our built-in theme editor lets you control the style, layout, and even what data is displayed.
All the APIs you need for deeper integration
When the default experience isn't enough, TalkJS has everything you need to build custom integrations. Get notified for each new message via webhooks, control your data with the REST API, or set up email notifications. And if you're having any trouble building that integration, you can instantly chat with a TalkJS developer on our support chat to get some help with your code.