langbaseinc / langui Goto Github PK

View Code? Open in Web Editor NEW

2.2K 18.0 108.0 12.29 MB

UI for your AI. Open Source Tailwind components tailored for your GPT, generative AI, and LLM projects.

Home Page: https://LangUI.dev

License: MIT License

JavaScript 17.93% HTML 79.99% MDX 1.34% CSS 0.61% Dockerfile 0.13%

chat-ui chatgpt chatgpt-ui gpt gpt-3 gpt-4 gpt-ui lang-chain lang-ui

langui's Introduction

The perfect UI for your AI — Build & Deploy your own ChatGPT

Trusted by some of the world's largest companies, developers, and investors, LangUI is a set of beautifully designed components that you can copy and paste to build your own ChatGPT. Free. Customizable. Open Source.

LangUI is powered by Tailwind CSS with free components tailored for your AI and GPT projects. It offers a collection of beautiful, ready-to-use components to enhance the user interface of your AI applications, allowing you to focus on building the next best project while leaving the UI to LangUI.

⭐️ LangUI is Open Source and its 60+ components are completely free. Please star it to show your support!

Documentation

For documentation and components, visit LangUI.dev.

Get Started

LangUI components are ready-to-use, meaning you don't need to install or configure anything.
Browse LangUI.dev and select a comopnent.
Copy the desired component's code in HTML or JSX from the LangUI documentation.
Paste the code into your project's HTML or React/Vue/Angular components. Done.
⌘ Deploy: You can deploy your own ChatGPT built with LangUI on Langbase.com by creating a chat pipe.

Docker deploy

You can directly run using the image I have already built.

docker run -d -t -p 3000:3000 --name langui --restart=always docker.io/wenyang0/langui:latest

Or, you can manually compile it yourself if you prefer.

#clone the code 
git clone https://github.com/ahmadbilaldev/langui.git

#docker build 
cd langui/
docker build -t langui:v1 .

#start server 
docker run -d -t -p 3000:3000 --name langui --restart=always langui:v1

Finally, open your browser and access the service's address at http://serverIP:3000

Features

Copy & Paste Integration: Zero installations or dependencies! Simply choose your desired component, copy, and paste it into your project.
Open Source & Free: LangUI is MIT licensed, making it suitable for both personal and commercial projects. Feel free to contribute and support us by starring LangUI on GitHub.
Dark & Light Modes: All LangUI components support light & dark modes and are carefully designed to look the best across both modes.
Fully Responsive: LangUI components are responsive, ensuring they look fantastic on any screen size or device.
Easy Customization: LangUI uses a two-color-only pallete. The two color pallete - slate and blue - allows for effortless customization into your brand's colors.

Screenshots

Request a component

Have an idea for a new component? We'd love to hear from you! Simply head over to our GitHub repository and submit your component request. Let's collaborate and cook up something spicy together!

Contributing

Contributions to LangUI are highly welcome! Whether it's bug fixes, new components, or improvements, we appreciate your support in making this library better for the AI community. Please read our contribution guidelines to get started.

License

LangUI is licensed under the MIT License.

Uses

Shades of Purple Theme by Ahmad Awais for syntax highlighting
Tabler Icons

Authored By

Originally authored by Ahmad Bilal – Founding Engineer at Langbase.

For questions, integrations, and other discussions, feel free to reach out.

Enjoy using LangUI to build stunning UIs for your AI and GPT projects.

🌟 If you find it helpful, don't forget to give it a star on GitHub! Stars are like little virtual hugs that keep us going! We appreciate every single one we receive.

For any queries or issues, feel free to open an issue on the repository.

Happy coding! 😊

langui's People

Contributors

Stargazers

Watchers

Forkers

kulsumsiddique tassawarr markthree phhien203 aksharahegde generativeai-consulting pramit-marattha mrasoahaingo mz0in georgerhewitt wuqiongren commerceless macgyverai apollohuang1 therakeshpurohit eiis daodaoliang pizchy-wachida surya-madhav mrm8488 king2022 hudson-amalembal sujeeths preacto dqmmpb prog-ape ai-chef tangconghe wurihan-neu lyhiving tummyyu rogervaas gerald9h efewijum key7men keyzf id-2 coinhubx naime-hossain skywalkingzulu1 qidouhai wenyang0 fastworldsite javaliker prasannakarki77 kori000 maxnice chatchatbio spaceblocks ml-algorhythms hany-girgis jfontestad wittech omairmir pradeep8577 bweiss415 mwakaambrose brunoscaglione jetqin eonsonicblue franko00007 stophobia maxli111 donaminos shahabyounas noptex-it-solution mvandermeulen lucianrotaru armbc gdanushka ptradellc djmsuman maxdata mounta11n apexilyes d0s0med3v quchenchen faizi-073 kalikex1 majiajue jesst3r ivan-meer waytoopeak smartlabsai nzmd infoaitek24 softwareescarlata lyuji282 aiprjcts dzakwanf webgrip chinpeerapat marcushy hendawyjr babybirdprd wdavidsideon fef-design easyro 596050 mu-l

langui's Issues

request for design files

any idea to provide figma files?

Component Request: Tabs Component

Example:

I believe we need more custom shadcn design for tabs components to meet overall design of these features.

Site down?

Hi, I just noticed the https://langui.dev seems to be down.

Prompt Container textarea and scrollbar design issues

The minimal prompt component's textarea seems to be resizable while the other types are not resizable.
I think instead of default design, it would be great if the scroll bar is customized to better suit the theme of the components. The send button overlaps the scroll bar slightly.
We can take reference from chat GPT's scroll bar and the prompt input. The max height of the prompt input can be same as 4 or 5 rows height and texts overflowing more than that can be scrolled.

minimal

other

I would like to contribute if possible.

Code examples in prompt containers dont update when toggled to bright mode

Was looking at the components here https://www.langui.dev/components/prompt-containers and the preview works fine when you toggle between light and dark mode.

However, the code does not change when toggled. The bright mode code shows the dark mode code instead

Any ChatGPT open application based on LangUI?

does it work with bootstrap 5 framework ?

Hello.
I would like to use components in an existing bootstrap 5 project . Since you mention it uses tailwind is there any collision with the bootstrap 5 css framework. will it work seamlessly ?

Component Request: Chat Widget Bubble

Hi, thanks for this awesome project.

A big use case in AI is chat assistants that live on websites. I think the prompt container gets us 95% of the way there, but the other UI component is the the little chat bubble you see (usually bottom right corner). Would love to have a few variants with some pretty hover states.

How do I use langui in my Vue project?

I have reviewed the langui documentation, but I'm still unsure how to use it in my Vue project. Could you please provide some guidance? Thank you.

Support for Themes?

What's the recommended way of integrating a certain theme like company colors or logos?

Base theme

Hi @ahmadbilaldev,
This is great project. Could you please help me with question what tailwind components theme can be used along with it to have visual similarity ?
(for example for navbar)

Regards,
Maciek

Does it work with streamlit?

Component doesn't has any styles when using

What I'm using:

Use Vue CLI to create a brand new project,
Setup WindiCSS & Configure tailwind.config.js
Follow the usage of the documentation, copy the code of "LangUI Prompt Container - Rounded",
The display of the component looks weired.

So my question is: I was following the instruction and not doing anything else. Why the style was missing? Is there anything I messed up?

my tailwind.config.js

import { defineConfig } from 'windicss/helpers'

const getSizeMap = (base: number) => {
  return new Array(base)
    .fill(0)
    .map((_, index) => index)
    .reduce<Record<string, string>>(
      (spacing, num) => ({
        ...spacing,
        [num]: `${num}px`,
      }),
      {},
    )
}

const colorMap = {
  transparent: 'transparent',
  white: '#fff',
  black: '#000',
  'light-black': '#333',
  gray: '#adadad',
  'light-gray': '#f1f3f6',
  'true-gray': '#6f6f6f',
  primary: '#20bba9',
  success: '#00b365',
  warning: '#ffc300',
  danger: '#f5483b',
}

export default defineConfig({
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  // 关闭 preflight
  preflight: false,
  // 覆盖默认值
  theme: {
    extend: {},
    // 使用 px 作为默认单位，而非 rem
    // @see https://tailwindcss.com/docs/customizing-spacing
    spacing: getSizeMap(1400),
    fontSize: getSizeMap(50),
    lineHeight: getSizeMap(50),
    borderRadius: getSizeMap(50),
    // 扩展 @see {@link https://windicss.org/utilities/backgrounds.html#customizing}
    backgroundColor: (theme) => ({
      ...theme('colors'),
      ...colorMap,
    }),
    textColor: (theme) => ({
      ...theme('colors'),
      ...colorMap,
    }),
    borderColor: (theme) => ({
      ...theme('colors'),
      ...colorMap,
    }),
  },
})

my index.css (use to configure tailwind components)

@tailwind base;
@tailwind components;
@tailwind utilities;

and my component container.vue (Copy via "copy" button on the website)

<template>
    <div class="prompt-container">
        <!-- Prompt Messages Container - Modify the height according to your need -->
<div class="flex h-[97vh] w-full flex-col">
  <!-- Prompt Messages -->
  <div
    class="flex-1 overflow-y-auto rounded-xl bg-slate-200 p-4 text-sm leading-6 text-slate-900 dark:bg-slate-800 dark:text-slate-300 sm:text-base sm:leading-7"
  >
    <div class="flex flex-row px-2 py-4 sm:px-4">
      <img
        class="mr-2 flex h-8 w-8 rounded-full sm:mr-4"
        src="https://dummyimage.com/256x256/363536/ffffff&text=U"
      />

      <div class="flex max-w-3xl items-center">
        <p>Explain quantum computing in simple terms</p>
      </div>
    </div>
    <div class="mb-2 flex w-full flex-row justify-end gap-x-2 text-slate-500">
      <button class="hover:text-blue-600">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"
          ></path>
        </svg>
      </button>
      <button class="hover:text-blue-600" type="button">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3"
          ></path>
        </svg>
      </button>
      <button class="hover:text-blue-600" type="button">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"
          ></path>
          <path
            d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"
          ></path>
        </svg>
      </button>
    </div>
    <div
      class="mb-4 flex rounded-xl bg-slate-50 px-2 py-6 dark:bg-slate-900 sm:px-4"
    >
      <img
        class="mr-2 flex h-8 w-8 rounded-full sm:mr-4"
        src="https://dummyimage.com/256x256/354ea1/ffffff&text=G"
      />

      <div class="flex max-w-3xl items-center rounded-xl">
        <p>
          Certainly! Quantum computing is a new type of computing that relies on
          the principles of quantum physics. Traditional computers, like the one
          you might be using right now, use bits to store and process
          information. These bits can represent either a 0 or a 1. In contrast,
          quantum computers use quantum bits, or qubits.<br /><br />
          Unlike bits, qubits can represent not only a 0 or a 1 but also a
          superposition of both states simultaneously. This means that a qubit
          can be in multiple states at once, which allows quantum computers to
          perform certain calculations much faster and more efficiently
        </p>
      </div>
    </div>
    <div class="flex px-2 py-4 sm:px-4">
      <img
        class="mr-2 flex h-8 w-8 rounded-full sm:mr-4"
        src="https://dummyimage.com/256x256/363536/ffffff&text=U"
      />

      <div class="flex max-w-3xl items-center">
        <p>What are three great applications of quantum computing?</p>
      </div>
    </div>
    <div class="mb-2 flex w-full flex-row justify-end gap-x-2 text-slate-500">
      <button class="hover:text-blue-600">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"
          ></path>
        </svg>
      </button>
      <button class="hover:text-blue-600" type="button">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3"
          ></path>
        </svg>
      </button>
      <button class="hover:text-blue-600" type="button">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"
          ></path>
          <path
            d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"
          ></path>
        </svg>
      </button>
    </div>
    <div
      class="mb-4 flex rounded-xl bg-slate-50 px-2 py-6 dark:bg-slate-900 sm:px-4"
    >
      <img
        class="mr-2 flex h-8 w-8 rounded-full sm:mr-4"
        src="https://dummyimage.com/256x256/354ea1/ffffff&text=G"
      />

      <div class="flex max-w-3xl items-center rounded-xl">
        <p>
          Three great applications of quantum computing are: Optimization of
          complex problems, Drug Discovery and Cryptography.
        </p>
      </div>
    </div>
  </div>
  <!-- Prompt suggestions -->
  <div
    class="mt-4 flex w-full gap-x-2 overflow-x-auto whitespace-nowrap text-xs text-slate-600 dark:text-slate-300 sm:text-sm"
  >
    <button
      class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
    >
      Regenerate response
    </button>
    <button
      class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
    >
      Use prompt suggestions
    </button>
    <button
      class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
    >
      Toggle web search
    </button>
    <button
      class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
    >
      Select a tone
    </button>
    <button
      class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
    >
      Improve
    </button>
    <button
      class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
    >
      Make longer
    </button>
    <button
      class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
    >
      Explain in simple words
    </button>
    <button
      class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
    >
      Summarize in three lines
    </button>
    <button
      class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
    >
      Translate content
    </button>
  </div>
  <!-- Prompt message input -->
  <form class="mt-2">
    <label for="chat-input" class="sr-only">Enter your prompt</label>
    <div class="relative">
      <button
        type="button"
        class="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-500 hover:text-blue-600 dark:text-slate-400 dark:hover:text-blue-600"
      >
        <svg
          aria-hidden="true"
          class="h-5 w-5"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M9 2m0 3a3 3 0 0 1 3 -3h0a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3h0a3 3 0 0 1 -3 -3z"
          ></path>
          <path d="M5 10a7 7 0 0 0 14 0"></path>
          <path d="M8 21l8 0"></path>
          <path d="M12 17l0 4"></path>
        </svg>
        <span class="sr-only">Use voice input</span>
      </button>
      <textarea
        id="chat-input"
        class="block w-full resize-none rounded-xl border-none bg-slate-200 p-4 pl-10 pr-20 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-800 dark:text-slate-200 dark:placeholder-slate-400 dark:focus:ring-blue-500 sm:text-base"
        placeholder="Enter your prompt"
        rows="1"
        required
      ></textarea>
      <button
        type="submit"
        class="absolute bottom-2 right-2.5 rounded-lg bg-blue-700 px-4 py-2 text-sm font-medium text-slate-200 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 sm:text-base"
      >
        Send <span class="sr-only">Send message</span>
      </button>
    </div>
  </form>
</div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "@vue/composition-api";
export default defineComponent({
    name: 'prompt-container',
    setup() {
        return {}
    }
});
</script>

<style lang="scss" scoped>
.prompt-container {
    width: 100%;
}
</style>

Display missing components.css during loading

Hi，Thank you for you code.
When I try to start this project. system report a error: ENOENT: no such file or directory, open '\src\data\categories\components.css.mdx'
The Component page, It really didn't work.
Can you please provide this file to solve this problem?
Thank you again!

Incorrect inline styling in JSX code example on documentation site

Hi, maintainers,

I wanted to report an issue I noticed with one of the code examples shown on your project documentation site.

In the JSX example on Prompt cards for images, the inline styling is incorrectly written. The inline styles should be written as an object, which could cause errors if developers copy the code directly.

For example, in the 'Prompt cards for images' code sample:

// jsx/tsx

<div
  className="h-64 w-full rounded-lg bg-slate-300 bg-cover bg-center shadow-md"
  style="
    background-image: url(https://mpost.io/wp-content/uploads/image-34-32.jpg);
  "
></div>

Should be:

// jsx/tsx

<div
  className="h-64 w-full rounded-lg bg-slate-300 bg-cover bg-center shadow-md"
  style={{
    backgroundImage: 'url(https://mpost.io/wp-content/uploads/image-34-32.jpg)'
  }}
></div>

Regards,
Kori

Component Request: Container for non-textual output

Greetings! What a lovely and simple project.

A lot of our use cases involve a canvas container for non-text responses , or text responses attended by non-text output (e.g. images, tabular data, interactive data visualizations, etc). This typically sits side by side with the prompt container.

It would be great to have a styled component designed to play well with the other components in langui that boxed off whatever we might want to display. Hope that makes sense / is potentially in scope.

Thanks!

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.