Application Development

February 29 , 2024 by Nick Ma

Create The Best Chat Experience For Your Users 

We recently launched Vectara Chat, which provides developers with APIs for building chat experiences on top of Vectara’s retrieval-augmented generation (RAG) platform. But even with highly-accurate responses, if your chat application’s UI isn’t intuitive and accessible then users won’t be able to get full value out of it.

Unfortunately, UI development is hard! It takes time and expertise to build a great user experience. So we built some tools to make things easier. Now, regardless of your experience with front-end development, you can choose between using Create-UI or React-Chatbot to connect your Vectara data to a simple, powerful chat User Interface (UI) in minutes. We designed each tool to not only be easy for you to use as a developer, but also easy for your end users to use and understand.

Create-UI Or React-Chatbot – How To Choose?

To choose the right tool for you, ask yourself what kind of UX you want to provide for your users. Create-UI offers a template for building a full-screen chat application. If you want to take up less screen space with your chat experience, you can embed React-Chatbot into your React app to provide your users with an unobtrusive chatbot widget.

Create-UI Chat App Template

We built Create-UI to help developers generate React codebases for a broad variety of user experiences. When you run Create-UI in your command line, you can now select the chat app template option to generate a codebase that produces a UI like this:

To experience this first-hand, try out the demo chat app.

Generate this UI with this command:

npx @vectara/create-ui

Choose “Chat” when asked what kind of codebase you want to generate. You need to have Node and NPM installed.

Learn more about this project by visiting the Create-UI GitHub repository.

React-Chatbot Widget 

We’ve seen our embeddable React-Search widget help a lot of developers, so we’re continuing this approach with React-Chatbot. 

After you install the NPM dependency, you can embed it in your React app like this (Learn more about this project by visiting the React-Chatbot GitHub repository)

import { ReactChatbot } from "@vectara/react-chatbot";
/* snip */
<ReactChatbot
  customerId="CUSTOMER_ID"
  corpusId="CORPUS_ID"
  apiKey="API_KEY"
  title="My Chatbot"
  placeholder="Chat with your AI assistant"
  inputSize="large"
  emptyStateDisplay={<MyEmptyStateDisplayComponent />}
  isInitiallyOpen={false}
/>;

With a few lines of code above, you can add this widget to your React app:

Try it out yourself by visiting the demo page.

Give Us Your Feedback

As always, we’d love to hear your feedback! Connect with us on our forums or on our Discord.

Sign up for a free account to see how Vectara can help you easily leverage retrieval-augmented generation in your GenAI apps.