Langbase

Building Products with Generative AI

In this workshop, you will learn how to build a simple AI Assistant using Langbase Pipes and Memory tools. We'll then convert this AI Assistant into a product — an AI chatbot that can be shipped to users.

Workshop Outline

  1. Introduction to Generative AI
    • What is Generative AI?
    • Use cases and applications
    • Langbase Pipes and Memory sets
  2. Building an AI Assistant with Pipes
    • Creating and deploying a simple AI Assistant
    • Few shot training the AI Assistant
  3. Converting the AI Assistant into a Product
    • Designing and building an open-source AI chatbot using [LangUI.dev]
    • Integrating the AI chatbot with Pipes and Memory
    • Shipping the AI chatbot to users

Prerequisites

Basic understanding of Web technologies (HTML, CSS, JavaScript, React, Next.js, APIs).

Build an AI Chatbot with Pipes — ⌘ Langbase

An AI Chatbot example to help you create chatbots for any use case. This chatbot is built by using an AI Pipe on Langbase, it works with 30+ LLMs (OpenAI, Gemini, Mistral, Llama, Gemma, etc), any Data (10M+ context with Memory sets), and any Framework (standard web API you can use with any software).

Check out the live demo here.

Features

  • 💬 AI Chatbot — Built with an AI Pipe on ⌘ Langbase
  • ⚡️ Streaming — Real-time chat experience with streamed responses
  • 🗣️ Q/A — Ask questions and get pre-defined answers with your preferred AI model and tone
  • 🔋 Responsive and open source — Works on all devices and platforms

Learn more

  1. Check the AI Chatbot Pipe on ⌘ Langbase
  2. Read the source code on GitHub for this example
  3. Go through Documentaion: Pipe Quick Start
  4. Learn more about Pipes & Memory features on ⌘ Langbase

Get started

Let's get started with the project:

To get started with Langbase, you'll need to create a free personal account on Langbase.com and verify your email address. Done? Cool, cool!

  1. Fork the AI Chatbot Pipe on ⌘ Langbase.
  2. Go to the API tab to copy the Pipe's API key (to be used on server-side only).
  3. Download the example project folder from here or clone the reppository.
  4. cd into the project directory and open it in your code editor.
  5. Duplicate the .env.example file in this project and rename it to .env.local.
  6. Add the following environment variables:
# Replace `PIPE_API_KEY` with the copied API key.
NEXT_LB_PIPE_API_KEY="PIPE_API_KEY"

# Install the dependencies using the following command:
npm install

# Run the project using the following command:
npm run dev

Your app template should now be running on localhost:3000.

NOTE: This is a Next.js project, so you can build and deploy it to any platform of your choice, like Vercel, Netlify, Cloudflare, etc.

Authors

This project is created by Langbase (@LangbaseInc) team members, with contributions from:

Built by ⌘ Langbase.com — Ship hyper-personalized AI assistants with memory!