gen-ui-python

gen-ui-python

🧬🐍 Generative UI web application built with LangChain Python, AI SDK & Next.js

Stars: 86

Visit
 screenshot

This application provides a template for building generative UI applications with LangChain Python. It includes pre-built UI components using Shadcn. Users can play around with gen ui features and customize the UI. The application requires setting environment variables for LangSmith keys, OpenAI API key, GitHub PAT, and Geocode API key. Users can further develop the application by generating React components, building custom components with LLM and Shadcn, using multiple tools and components, updating LangGraph agent, and rendering UI dynamically in different areas on the screen.

README:

Generative UI with LangChain Python 🦜🔗

Generative UI with LangChain Python

Overview

This application aims to provide a template for building generative UI applications with LangChain Python. It comes pre-built with a few UI features which you can use to play about with gen ui. The UI components are built using Shadcn.

Getting Started

Installation

First, clone the repository and install dependencies:

git clone https://github.com/bracesproul/gen-ui-python.git

cd gen-ui-python

Install dependencies in the frontend and backend directories:

cd ./frontend

yarn install
cd ../backend

poetry install

Secrets

Next, if you plan on using the existing pre-built UI components, you'll need to set a few environment variables:

Copy the .env.example file to .env inside the backend directory.

LangSmith keys are optional, but highly recommended if you plan on developing this application further.

The OPENAI_API_KEY is required. Get your OpenAI API key from the OpenAI dashboard.

Sign up/in to LangSmith and get your API key.

Create a new GitHub PAT (Personal Access Token) with the repo scope.

Create a free Geocode account.

# ------------------LangSmith tracing------------------
LANGCHAIN_API_KEY=...
LANGCHAIN_CALLBACKS_BACKGROUND=true
LANGCHAIN_TRACING_V2=true
# -----------------------------------------------------

GITHUB_TOKEN=...
OPENAI_API_KEY=...
GEOCODE_API_KEY=...

Running the Application

cd ./frontend

yarn dev

This will start a development server on http://localhost:3000.

Then, in a new terminal window:

cd ../backend

poetry run start

Go further

If you're interested in ways to take this demo application further, I'd consider the following:

  • Generating entire React components to be rendered, instead of relying on pre-built components.
  • Using the LLM to build custom components using a UI library like Shadcn.
  • Multi-tool and component usage.
  • Update the LangGraph agent to call multiple tools, and appending multiple different UI components to the client rendered UI.
  • Generative UI outside of the chatbot window: Have the UI dynamically render in different areas on the screen. E.g a dashboard, where the components are dynamically rendered based on the LLMs output.

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for gen-ui-python

Similar Open Source Tools

For similar tasks

For similar jobs