Repository: CommandCodeAI/langui Branch: main Commit: c7d6ee88d3cd Files: 191 Total size: 574.0 KB Directory structure: gitextract_rjyvzjwn/ ├── .eslintrc.json ├── .gitignore ├── CONTRIBUTING.md ├── Dockerfile ├── LICENSE ├── README.md ├── app/ │ ├── [category]/ │ │ ├── [collection]/ │ │ │ └── page.jsx │ │ └── page.jsx │ ├── api/ │ │ └── search/ │ │ └── route.js │ ├── layout.jsx │ └── page.jsx ├── jsconfig.json ├── next-env.d.js ├── next.config.js ├── package.json ├── postcss.config.js ├── prettier.config.js ├── public/ │ ├── components/ │ │ ├── components-alerts/ │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ └── 2.html │ │ ├── components-badges/ │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ ├── 4.html │ │ │ ├── 5-dark.html │ │ │ └── 5.html │ │ ├── components-buttons/ │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ └── 4.html │ │ ├── components-cards/ │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ └── 2.html │ │ ├── components-copy/ │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ └── 3.html │ │ ├── components-pricing/ │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ └── 4.html │ │ ├── components-prompt-containers/ │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ └── 4.html │ │ ├── components-prompt-history-panels/ │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ └── 3.html │ │ ├── components-prompt-inputs/ │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ ├── 4.html │ │ │ ├── 5-dark.html │ │ │ ├── 5.html │ │ │ ├── 6-dark.html │ │ │ └── 6.html │ │ ├── components-prompt-message-inputs/ │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ ├── 4.html │ │ │ ├── 5-dark.html │ │ │ ├── 5.html │ │ │ ├── 6-dark.html │ │ │ ├── 6.html │ │ │ ├── 7-dark.html │ │ │ └── 7.html │ │ ├── components-prompt-messages/ │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ └── 3.html │ │ ├── components-prompt-suggestions/ │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ └── 3.html │ │ ├── components-prompts-cards/ │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ └── 4.html │ │ ├── components-sidebars/ │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ └── 4.html │ │ └── components-toggles/ │ │ ├── 1-dark.html │ │ ├── 1.html │ │ ├── 2-dark.html │ │ └── 2.html │ └── iframe.js ├── sitemap.config.js └── src/ ├── components/ │ ├── Analytics.jsx │ ├── Banner.jsx │ ├── BrandLogo.jsx │ ├── ButtonGithubStars.jsx │ ├── ButtonStyle.jsx │ ├── CollectionCard.jsx │ ├── CollectionGrid.jsx │ ├── CollectionIcons.jsx │ ├── CollectionLinks.jsx │ ├── ComponentPreview.jsx │ ├── ComponentsList.jsx │ ├── Container.jsx │ ├── Footer.jsx │ ├── Header.jsx │ ├── HeaderMenu.jsx │ ├── HeaderMenuLinks.jsx │ ├── HeaderSearch.jsx │ ├── HeroBadge.jsx │ ├── HeroBanner.jsx │ ├── HeroComponentsPreview.jsx │ ├── HeroFeatures.jsx │ ├── HeroGradient.jsx │ ├── HeroPattern.jsx │ ├── IconClose.jsx │ ├── IconGithub.jsx │ ├── IconMenu.jsx │ ├── IconTwitter.jsx │ ├── MdxRemoteRender.jsx │ ├── PreviewBreakpoints.jsx │ ├── PreviewCode.jsx │ ├── PreviewCopy.jsx │ ├── PreviewDark.jsx │ ├── PreviewIframe.jsx │ ├── PreviewInteractive.jsx │ ├── PreviewTitle.jsx │ └── PreviewView.jsx ├── data/ │ ├── categories/ │ │ └── components.mdx │ └── components/ │ ├── components-alerts.mdx │ ├── components-badges.mdx │ ├── components-buttons.mdx │ ├── components-cards.mdx │ ├── components-copy.mdx │ ├── components-pricing.mdx │ ├── components-prompt-containers.mdx │ ├── components-prompt-history-panels.mdx │ ├── components-prompt-inputs.mdx │ ├── components-prompt-message-inputs.mdx │ ├── components-prompt-messages.mdx │ ├── components-prompt-suggestions.mdx │ ├── components-prompts-cards.mdx │ ├── components-sidebars.mdx │ └── components-toggles.mdx ├── styles/ │ ├── components.css │ ├── prism.css │ ├── site.css │ └── tailwind/ │ ├── components.config.js │ ├── extend.preset.js │ └── site.config.js └── utils/ ├── analyticsHelper.js └── transformers.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .eslintrc.json ================================================ { "extends": "next/core-web-vitals" } ================================================ FILE: .gitignore ================================================ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.js # testing /coverage # next.js /.next/ /out/ # production /build public/components.css public/blogs.css # misc .DS_Store *.pem # debug npm-debug.log* yarn-debug.log* yarn-error.log* # local env files .env.local .env.development.local .env.test.local .env.production.local # vercel .vercel # seo public/sitemap.xml public/robots.txt ================================================ FILE: CONTRIBUTING.md ================================================ # Contributing to LangUI Thank you for considering contributing to LangUI! We appreciate your support in making this open-source Tailwind UI library even better for the AI community. Whether you want to fix a bug, add new components, or improve the documentation, your contributions are valuable to us. To contribute to LangUI, please follow these guidelines: ## Getting Started 1. **Fork the Repository**: Start by forking the LangUI repository to your GitHub account. This will create a copy of the repository under your account, allowing you to make changes. 2. **Clone the Repository**: Clone the forked repository to your local machine using Git. Use the following command: ```bash git clone https://github.com/ahmadbilaldev/LangUI.git ``` 3. **Install Dependencies**: Ensure you have Node.js and npm installed. Run the following command in the project directory to install the required dependencies: ```bash npm install ``` 4. **Run the Server**: Run the local server using: ```bash npm run dev ``` ## Making changes 1. **Create a Branch**: Before making any changes, create a new branch where you will work on your contribution. Use a descriptive and relevant name for your branch: ```bash git checkout -b your-branch-name ``` 2. **Make Changes**: Implement your changes, whether it's adding new components, fixing bugs, or improving existing code. All LangUI components go in the `public/components` directory. 3. **Build your Component's CSS**: If you are building or making changes to a component, you will have to run the following command to build its CSS: ```bash npm run css:components ``` 4. **Test Your Changes**: Before submitting a pull request, ensure that your changes work as intended. Run tests if available and test the components in different viewports and modes. 5. **Commit and Push**: Once you are satisfied with your changes, commit them using descriptive commit messages. ## Submitting a Pull Request 1. **Create Pull Request**: Go to your forked repository on GitHub and click on the "New Pull Request" button. Compare your branch with the main branch of the original repository. 2. **Describe Your Changes**: Provide a clear and concise description of your changes in the pull request. Include any relevant information that helps reviewers understand your contribution. 3. **Review Process**: The maintainers of LangUI will review your pull request. Be prepared for feedback and make any necessary adjustments based on the review. 4. **Merge**: Once your pull request is approved, it will be merged into the main branch, and your changes will be part of LangUI! ## License By contributing to LangUI, you agree that your contributions will be licensed under the [MIT License](LICENSE). Thank you for contributing to LangUI! We greatly appreciate your efforts to make this library even more valuable to the AI community. If you have any questions or need assistance, feel free to open an issue or reach out to the maintainers. Happy contributing! 😊 ================================================ FILE: Dockerfile ================================================ # Use node:alpine3.17 image as the base image FROM docker.io/node:alpine3.17 # Maintainer information MAINTAINER tanwenyang@aliyun.com # Copy the vue-color-avatar file from the local directory to the /app directory inside the container COPY . /app # Expose port 3000 of the container and allow external access to this port EXPOSE 3000 # Change the working directory to /app WORKDIR /app # Set the Yarn registry to Taobao mirror and install dependencies using yarn install RUN yarn config set registry 'https://registry.npm.taobao.org' && yarn install && yarn cache clean # Run the command to start the container, which will run the project in development mode and listen on port 5173 of address 0.0.0.0 CMD yarn dev ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2023 Ahmad Bilal - GPT UI Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================
LangUI Logo

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

GitHub Stars License

Trusted by some of the world's largest companies, developers, and investors, [LangUI](https://www.LangUI.dev) is a set of beautifully designed components that you can copy and paste to build your own ChatGPT. Free. Customizable. Open Source. [LangUI](https://www.LangUI.dev) 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! ![LangUI](./screenshots/1.png) ## Documentation For documentation and components, visit [LangUI.dev](https://www.langui.dev/). ## Get Started - LangUI components are ready-to-use, meaning you don't need to install or configure anything. - Browse [LangUI.dev](https://www.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](https://beta.langbase.com/) your own ChatGPT built with LangUI on [Langbase.com by creating a chat pipe](https://langbase.com/docs/pipe/quickstart). ## Docker deploy You can directly run using the image I have already built. ```sh 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. ```sh #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 ![Components](./screenshots/2.png) ![Preview Component](./screenshots/3.png) ## Request a component Have an idea for a new component? We'd love to hear from you! Simply head over to our [GitHub repository](https://github.com/ahmadbilaldev/LangUI) 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](CONTRIBUTING.md) to get started. ## License LangUI is licensed under the [MIT License](LICENSE). ## Uses - [Shades of Purple Theme](https://shadesofpurple.pro/) by [Ahmad Awais](https://ahmadawais.com/) for syntax highlighting - [Tabler Icons](https://tabler-icons.io/) ## Authored By Originally authored by [Ahmad Bilal](https://github.com/ahmadbilaldev) – Founding Engineer at Langbase. For questions, integrations, and other discussions, feel free to reach out. github linkedin --- 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](https://github.com/ahmadbilaldev/LangUI/issues) on the repository. Happy coding! 😊 ================================================ FILE: app/[category]/[collection]/page.jsx ================================================ import matter from 'gray-matter' import { join } from 'path' import { promises as fs } from 'fs' import { serialize } from 'next-mdx-remote/serialize' import Container from '@component/Container' import MdxRemoteRender from '@component/MdxRemoteRender' import ComponentsList from '@/components/ComponentsList' const mdxComponents = { ComponentsList, } const componentsDirectory = join(process.cwd(), '/src/data/components') export async function generateMetadata({ params }) { const { collectionData } = await getCollection(params) return { title: `${collectionData.seo.title} | LangUI`, description: collectionData.seo.description, openGraph: { title: `${collectionData.seo.title} | LangUI`, description: collectionData.seo.description, url: 'https://www.LangUI.dev/', siteName: 'LangUI', type: 'website', image: 'https://www.LangUI.dev/og.png', }, twitter: { card: 'summary_large_image', title: `${collectionData.seo.title} | LangUI`, description: collectionData.seo.description, }, } } export async function generateStaticParams() { return await fs.readdir(componentsDirectory) } async function getCollection(params) { const componentPath = join( componentsDirectory, `${params.category}-${params.collection}.mdx` ) const postItem = await fs.readFile(componentPath, 'utf-8') const { content, data: frontmatter } = matter(postItem) const mdxSource = await serialize(content, { mdxOptions: { remarkPlugins: [], rehypePlugins: [], }, scope: frontmatter, }) return { collectionData: { ...frontmatter, slug: params.collection, }, collectionContent: mdxSource, } } export default async function Page({ params }) { const { collectionData, collectionContent } = await getCollection(params) const componentsData = { componentContainer: collectionData.container || '', componentsData: Object.entries(collectionData.components).map( ([componentId, componentItem]) => { return { id: componentId, title: componentItem.title, slug: collectionData.slug, category: collectionData.category, container: componentItem.container || '', creator: componentItem.creator || '', dark: !!componentItem.dark, interactive: !!componentItem.interactive, } } ), } return (
) } ================================================ FILE: app/[category]/page.jsx ================================================ import matter from 'gray-matter' import { join } from 'path' import { promises as fs } from 'fs' import HeroPattern from '@component/HeroPattern' import HeroGradient from '@component/HeroGradient' import BrandLogo from '@component/BrandLogo' import CollectionGrid from '@component/CollectionGrid' export async function generateMetadata({ params }) { const { categoryData } = await getCategory(params) return { title: `AI Tailwind ${categoryData.title} | LangUI`, description: categoryData.description, openGraph: { title: `AI Tailwind ${categoryData.title} | LangUI`, description: categoryData.description, url: 'https://www.LangUI.dev/', siteName: 'LangUI', type: 'website', image: 'https://www.LangUI.dev/og.png', }, twitter: { card: 'summary_large_image', title: `AI Tailwind ${categoryData.title} | LangUI`, description: categoryData.description, }, } } export async function generateStaticParams() { return ['components'] } async function getCategory(params) { const componentsPath = join(process.cwd(), '/src/data/components') const categoriesPath = join(process.cwd(), '/src/data/categories') const categorySlug = params.category const categoryPath = join(categoriesPath, `${categorySlug}.mdx`) const componentSlugs = await fs.readdir(componentsPath) const categoryItem = await fs.readFile(categoryPath, 'utf-8') const { data: categoryData } = matter(categoryItem) const componentItems = await Promise.all( componentSlugs .filter((componentSlug) => componentSlug.includes(categorySlug)) .map(async (componentSlug) => { const componentPath = join(componentsPath, componentSlug) const componentItem = await fs.readFile(componentPath, 'utf-8') const { data: componentData } = matter(componentItem) const componentSlugFormatted = componentSlug.replace('.mdx', '') const componentSlugTrue = componentSlugFormatted.replace( `${categorySlug}-`, '' ) const componentCount = Object.values(componentData.components).length return { title: componentData.title, slug: componentSlugTrue, category: componentData.category, emoji: componentData.emoji, count: componentCount, } }) ) return { categoryData, componentItems, } } export default async function Page({ params }) { const { categoryData, componentItems } = await getCategory(params) return ( <>

60+{' '} responsive and dark mode enabled components to build your AI LLM apps.

) } ================================================ FILE: app/api/search/route.js ================================================ import { NextResponse } from 'next/server' import matter from 'gray-matter' import { join } from 'path' import { promises as fs } from 'fs' async function getComponents() { const componentsPath = join(process.cwd(), '/src/data/components') const categoriesPath = join(process.cwd(), '/src/data/categories') const categorySlugs = ['components'] const componentSlugs = await fs.readdir(componentsPath) const componentsByCategory = await Promise.all( categorySlugs.map(async (categorySlug) => { const categoryPath = join(categoriesPath, `${categorySlug}.mdx`) const categoryItem = await fs.readFile(categoryPath, 'utf-8') const { data: categoryData } = matter(categoryItem) const componentItems = await Promise.all( componentSlugs .filter((componentSlug) => componentSlug.includes(categorySlug)) .map(async (componentSlug) => { const componentPath = join(componentsPath, componentSlug) const componentItem = await fs.readFile(componentPath, 'utf-8') const { data: componentData } = matter(componentItem) const componentSlugFormatted = componentSlug.replace('.mdx', '') const componentSlugTrue = componentSlugFormatted.replace( `${categorySlug}-`, '' ) const componentCount = Object.values( componentData.components ).length return { id: componentSlugFormatted, title: componentData.title, slug: componentSlugTrue, emoji: componentData.emoji, count: componentCount, category: { title: categoryData.title, slug: categorySlug, emoji: categoryData.emoji, }, } }) ) return componentItems }) ) return componentsByCategory.flatMap((componentItem) => componentItem) } export async function GET() { const componentsData = await getComponents() return NextResponse.json(componentsData) } ================================================ FILE: app/layout.jsx ================================================ import 'prismjs/themes/prism-okaidia.css' import '@style/site.css' import { Poppins } from 'next/font/google' import Footer from '@component/Footer' import Header from '@component/Header' import Banner from '@component/Banner' import Analytics from '@/components/Analytics' import { Analytics as VercelAnalytics } from '@vercel/analytics/react' const poppins = Poppins({ variable: '--font-poppins', display: 'swap', subsets: ['latin'], weight: ['400', '500', '700', '800', '900'], }) export const metadata = { title: 'UI for your AI | LangUI', description: 'Open Source Tailwind CSS components for your AI and GPT projects.', openGraph: { title: 'UI for your AI | LangUI', description: 'Open Source Tailwind CSS components for your AI and GPT projects.', url: 'https://www.LangUI.dev/', siteName: 'LangUI', type: 'website', images: ['https://www.LangUI.dev/og.png'], }, twitter: { card: 'summary_large_image', title: 'UI for your AI | LangUI', description: 'Open Source Tailwind CSS components for your AI and GPT projects.', }, } export default function RootLayout({ children }) { return (
{children}