Application Development

January 25 , 2024 by Deryk DeGuzman & CJ Cenizal

Build user interfaces at warp speed

Application builders invest enormous effort into building their applications, but none of that effort converts into value until they’ve built the user interface. This is the critical “last mile” that they must cross in order to unlock the return on their investment.

But what’s the right UI for your users? How will you implement it? How will you connect it to Vectara and surface your data to your users? User interfaces are hard to get right.

Introducing the open-source Create-UI React code generator. With this tool, you can select from a variety of GenAI user interfaces and generate Vectara-powered sample codebases in seconds. Each of these React codebases consists of:

• A polished user interface demonstrating semantic search, summarization, or a question-and-answer paradigm.
• HTTP request logic for retrieving data and generated responses through Vectara APIs.
• Logic for converting this data into a user-friendly format.

This codebase runs in your browser out-of-the-box, so you can experience the user interface first-hand and decide if it suits your needs. You can ship it directly to your users, edit the code and adjust it for your needs, or copy and paste it into another codebase.

Please note that at this time, this is an open-source project intended as a technology demonstration of how to use Vectara in React.

Choose the right UI for your users

For builders, the user is everything. You want to choose a UI based on the needs of your users, so Create-UI provides a range of UIs that you can choose from. We plan to add more in the future.

To interact with one of these UIs, try out the demo site.

Semantic Search UI

This is a typical search UI, with a search box followed by a list of search results.

Who it’s for: Users who want to scan the list for relevant results and dig deeper into any results that look interesting. They expect to try variations on a query until they’ve exhausted all possible useful search results.

Summarized Semantic Search UI

This is like the Semantic Search UI, but preceded by a summary of the most relevant results.

Who it’s for: Perfect for users who want to scan an overview before digging deeper into interesting search results.

Question and Answer UI

This UI provides users with a question input and a condensed answer based upon the most relevant search results, with citations.

Who it’s for: This UI is ideal for users who want to ask a question and get a concise answer.

Create code in seconds

Generate one of these UIs with this command:

npx @vectara/create-ui

When you run this command, it will ask you a few questions and then generate a codebase based on your answers. You need to have Node and NPM installed.

Tell us what you think

If you have suggestions on how we can improve this or if you find a bug, please let us know at the Create-UI GitHub repo. This project is open-source, so you’re also welcome to contribute changes.

Already have an app?

If you don’t need a full codebase, we can still help! We just released our React-Search component that lets you add a semantic search experience to your application in a few lines of code.