TL;DR
AI is booming everywhere, as you can see. So the need for building AI-powered apps has grown in demand. React, being the first choice for building frontend today, needs AI integration to match the AI trends in software development.
As React developers are seeking practical tools and patterns to build AI-powered features. In this article, I am going to list some of the helpful tools that can be used to build AI-powered React Applications.
So, let’s get started.
Vercel AI SDK
From the creators of Next.js, the AI SDK is a free open-source library that gives you the tools you need to build AI-powered products.
Vercel has been in the talk since the launch of NextJS, which makes frontend development with React easy. They also provide an SDK that can be used to build an AI application since it is the same company that built Nextjs. thus making integration with NextJS and Vercel SDK seamless.
It is quite capable of building streaming chat and text generation UIs in React. Its simple, hook-based API makes it easy to handle streaming responses from models like GPT and Claude, creating the "live typing" effect seen in modern chatbots.
Some features of the Vercel AI SDK:
- Easy Integration with LLM Models: SDK’s unified API enables developers to switch between different LLM models by changing only a single line of code.
- Streaming UI Hooks: SDK provides React hooks such as
useChatanduseCompletionthat are built for AI interactions. - Structured Data: Using Zod or JSON schema, we can enable LLM to provide output in a particular structure. This can be used to directly render a React component, too.
LangChainJS
LangChain is a framework for developing applications powered by large language models (LLMs).
Langchain provides lots of tools that you can use to build any AI-powered application with any generative model. It can be used to build more complex AI applications as it provides creation of embedding, storing, and retrieving. This can be used to provide information based on a particular document or source.
Last year, I wrote an article using Lanchain to create your own ChatGPT to answer based on your document. You can read here, How to Build Your Own ChatGPT with Langchain, Supabase, and Node.js.
Some features of LangchainJS:
- Prompt Template: We can define a reusable prompt template to structure the prompt for better results.
- Embedding and Retriever: It has support for various databases for storing and retrieving embedding. It has support for supabase, MongoDB Atlas, MariaDB, Neon Postgres, etc. You can find the entire list here: https://js.langchain.com/docs/integrations/vectorstores/.
- Tools/Toolkits: Langchain offers prebuilt tools that can do web search, code execution, handle file systems, etc.
Hugging Face JS Libraries
The platform where the machine learning community collaborates on models, datasets, and applications.
While Vercel SDK and Langchain work on the LLM Providers, Hugging Face JS libraries have an open-source AI community and a vast repository for models. This library can be used to build both server-side and client-side architectural patterns.
Here are some of the libraries:
- @huggingface/inference: This is a lightweight library that can be used to make Hugging Face inference API calls. It allows making serverless API calls to open-source models for various tasks.
- transformers.js: This library is similar to the Python library
transformers. It provides developers with the ability to download and run Hugging Face models on the client side. - @huggingface/hub: A utility library for programmatically interacting with the Hugging Face Hub, enabling tasks like creating repositories and uploading or downloading files, which is essential for more advanced CI/CD workflows involving model management.
Assistant-UI
The library handles essential chat features such as auto-scrolling, accessibility, and real-time updates, while providing easy integration with LangGraph, AI SDK, and custom backends.
While the above libraries are primarily for core logic and handling calls to models, Assistant UI is made for building front-end user experience. It has tools that can help you build an interface to rival ChatGPT, Claude, or any other generative platform.
Here are some of the key features:
- UI Components: Assistance UI’s philosophy is inspired by Shadcn and Radix UI. It provides components such as
<Thread>,<Composer>, and<Message>. It gives developers more control over the UI. - Easy Integration: It can easily integrate with a backend that uses Vercel AI SDK, Langchain, and others.
- Chat Features: It has a built-in feature of a chat application such as real-time message streaming, auto-scrolling, markdown and code syntax highlighting, file attachments, message branching, and editing.
Replicate
Run and fine-tune models. Deploy custom models at scale. All with one line of code.
Replicate is a cloud platform that lets you run a variety of open-source ML models with a simple API call. It is best for adding features like image generation, audio transcription, video enhancement, or music creation in your React application.
Some features of Replicate:
- Diverse Models: TAccess and integrate thousands of public models for image generations, music creations, etc.
- Serverless: Replicate handles all the infrastructure and scales automatically. Due to a simple API call, you don’t need to handle the backend to integrate models.
Connect with Me🚀
Let's connect and stay informed on all things tech, innovation, and beyond!
Also, I am open to writing freelance articles if you are interested; then contact me via email or social media.
Conclusion
As we've seen, the React ecosystem is rapidly evolving to meet the demands of the AI revolution. Integrating powerful AI features into your applications has never been more accessible.
Whether you're building a sleek, streaming chat interface with the Vercel AI SDK and Assistant-UI, orchestrating complex backend logic with LangChainJS, or tapping into a vast universe of multi-modal models through Hugging Face and Replicate, the tools are ready and waiting.
I hope you will use one of these tools to build your next AI application. Thanks for reading the article. Happy coding!