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;
}
Most of your TalkJS code will live in the frontend, and will work seamlessly with React or any other framework or programming language.
TalkJS works seamlessly with ChatGPT and PaLM2. Use high-value first-party data and enhance the chatbot user experience.
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.