[ { "path": ".eslintrc.json", "content": "{\n \"extends\": \"next/core-web-vitals\"\n}\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\npublic/components.css\npublic/blogs.css\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n\n# seo\npublic/sitemap.xml\npublic/robots.txt\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing to LangUI\n\nThank 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.\n\nTo contribute to LangUI, please follow these guidelines:\n\n## Getting Started\n\n1. **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.\n\n2. **Clone the Repository**: Clone the forked repository to your local machine using Git. Use the following command:\n\n ```bash\n git clone https://github.com/ahmadbilaldev/LangUI.git\n ```\n\n3. **Install Dependencies**: Ensure you have Node.js and npm installed. Run the following command in the project directory to install the required dependencies:\n\n ```bash\n npm install\n ```\n\n4. **Run the Server**: Run the local server using:\n\n ```bash\n npm run dev\n ```\n\n## Making changes\n\n1. **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:\n\n ```bash\n git checkout -b your-branch-name\n ```\n\n2. **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.\n\n3. **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:\n\n ```bash\n npm run css:components\n ```\n\n4. **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.\n\n5. **Commit and Push**: Once you are satisfied with your changes, commit them using descriptive commit messages.\n\n## Submitting a Pull Request\n\n1. **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.\n\n2. **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.\n\n3. **Review Process**: The maintainers of LangUI will review your pull request. Be prepared for feedback and make any necessary adjustments based on the review.\n\n4. **Merge**: Once your pull request is approved, it will be merged into the main branch, and your changes will be part of LangUI!\n\n## License\n\nBy contributing to LangUI, you agree that your contributions will be licensed under the [MIT License](LICENSE).\n\nThank 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.\n\nHappy contributing! šŸ˜Š\n" }, { "path": "Dockerfile", "content": "# Use node:alpine3.17 image as the base image\nFROM docker.io/node:alpine3.17\n\n# Maintainer information\nMAINTAINER tanwenyang@aliyun.com\n\n# Copy the vue-color-avatar file from the local directory to the /app directory inside the container\nCOPY . /app\n\n# Expose port 3000 of the container and allow external access to this port\nEXPOSE 3000\n\n# Change the working directory to /app\nWORKDIR /app\n\n# Set the Yarn registry to Taobao mirror and install dependencies using yarn install\nRUN yarn config set registry 'https://registry.npm.taobao.org' && yarn install && yarn cache clean\n\n# 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\nCMD yarn dev\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2023 Ahmad Bilal - GPT UI\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "
\n \n \"LangUI\n \n
\n\n

The perfect UI for your AI ā€” Build & Deploy your own ChatGPT

\n\n

\n \n \"GitHub\n \n \n \"License\"\n \n \n \n \n

\n
\n\nTrusted 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. \n\n[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.\n\n> ā­ļø LangUI is Open Source and its 60+ components are completely free. Please star it to show your support!\n\n![LangUI](./screenshots/1.png)\n\n## Documentation\n\nFor documentation and components, visit [LangUI.dev](https://www.langui.dev/).\n\n## Get Started\n\n- LangUI components are ready-to-use, meaning you don't need to install or configure anything.\n\n- Browse [LangUI.dev](https://www.langui.dev/) and select a comopnent.\n\n- Copy the desired component's code in HTML or JSX from the LangUI documentation.\n\n- Paste the code into your project's HTML or React/Vue/Angular components. Done.\n\n- **āŒ˜ 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).\n\n## Docker deploy\n\nYou can directly run using the image I have already built.\n```sh\ndocker run -d -t -p 3000:3000 --name langui --restart=always docker.io/wenyang0/langui:latest\n```\n\nOr, you can manually compile it yourself if you prefer.\n\n```sh\n#clone the code \ngit clone https://github.com/ahmadbilaldev/langui.git\n\n#docker build \ncd langui/\ndocker build -t langui:v1 .\n\n#start server \ndocker run -d -t -p 3000:3000 --name langui --restart=always langui:v1\n```\nFinally, open your browser and access the service's address at http://serverIP:3000\n\n## Features\n\n- **Copy & Paste Integration**: Zero installations or dependencies! Simply choose your desired component, copy, and paste it into your project.\n\n- **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.\n\n- **Dark & Light Modes**: All LangUI components support light & dark modes and are carefully designed to look the best across both modes.\n\n- **Fully Responsive**: LangUI components are responsive, ensuring they look fantastic on any screen size or device.\n\n- **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.\n\n## Screenshots\n\n![Components](./screenshots/2.png)\n\n![Preview Component](./screenshots/3.png)\n\n## Request a component\n\nHave 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!\n\n## Contributing\n\nContributions 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.\n\n## License\n\nLangUI is licensed under the [MIT License](LICENSE).\n\n## Uses\n\n- [Shades of Purple Theme](https://shadesofpurple.pro/) by [Ahmad Awais](https://ahmadawais.com/) for syntax highlighting\n\n- [Tabler Icons](https://tabler-icons.io/)\n\n## Authored By\n\nOriginally authored by [Ahmad Bilal](https://github.com/ahmadbilaldev) ā€“ Founding Engineer at Langbase.\n\nFor questions, integrations, and other discussions, feel free to reach out. \n\n\ngithub\n\n\nlinkedin\n\n\n---\n\nEnjoy using LangUI to build stunning UIs for your AI and GPT projects.\n\nšŸŒŸ 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.\n\nFor any queries or issues, feel free to open an [issue](https://github.com/ahmadbilaldev/LangUI/issues) on the repository.\n\nHappy coding! šŸ˜Š\n" }, { "path": "app/[category]/[collection]/page.jsx", "content": "import matter from 'gray-matter'\nimport { join } from 'path'\nimport { promises as fs } from 'fs'\nimport { serialize } from 'next-mdx-remote/serialize'\n\nimport Container from '@component/Container'\nimport MdxRemoteRender from '@component/MdxRemoteRender'\nimport ComponentsList from '@/components/ComponentsList'\n\nconst mdxComponents = {\n ComponentsList,\n}\n\nconst componentsDirectory = join(process.cwd(), '/src/data/components')\n\nexport async function generateMetadata({ params }) {\n const { collectionData } = await getCollection(params)\n\n return {\n title: `${collectionData.seo.title} | LangUI`,\n description: collectionData.seo.description,\n openGraph: {\n title: `${collectionData.seo.title} | LangUI`,\n description: collectionData.seo.description,\n url: 'https://www.LangUI.dev/',\n siteName: 'LangUI',\n type: 'website',\n image: 'https://www.LangUI.dev/og.png',\n },\n twitter: {\n card: 'summary_large_image',\n title: `${collectionData.seo.title} | LangUI`,\n description: collectionData.seo.description,\n },\n }\n}\n\nexport async function generateStaticParams() {\n return await fs.readdir(componentsDirectory)\n}\n\nasync function getCollection(params) {\n const componentPath = join(\n componentsDirectory,\n `${params.category}-${params.collection}.mdx`\n )\n\n const postItem = await fs.readFile(componentPath, 'utf-8')\n\n const { content, data: frontmatter } = matter(postItem)\n\n const mdxSource = await serialize(content, {\n mdxOptions: {\n remarkPlugins: [],\n rehypePlugins: [],\n },\n scope: frontmatter,\n })\n\n return {\n collectionData: {\n ...frontmatter,\n slug: params.collection,\n },\n collectionContent: mdxSource,\n }\n}\n\nexport default async function Page({ params }) {\n const { collectionData, collectionContent } = await getCollection(params)\n\n const componentsData = {\n componentContainer: collectionData.container || '',\n componentsData: Object.entries(collectionData.components).map(\n ([componentId, componentItem]) => {\n return {\n id: componentId,\n title: componentItem.title,\n slug: collectionData.slug,\n category: collectionData.category,\n container: componentItem.container || '',\n creator: componentItem.creator || '',\n dark: !!componentItem.dark,\n interactive: !!componentItem.interactive,\n }\n }\n ),\n }\n\n return (\n \n
\n \n
\n \n )\n}\n" }, { "path": "app/[category]/page.jsx", "content": "import matter from 'gray-matter'\nimport { join } from 'path'\nimport { promises as fs } from 'fs'\nimport HeroPattern from '@component/HeroPattern'\nimport HeroGradient from '@component/HeroGradient'\nimport BrandLogo from '@component/BrandLogo'\nimport CollectionGrid from '@component/CollectionGrid'\n\nexport async function generateMetadata({ params }) {\n const { categoryData } = await getCategory(params)\n\n return {\n title: `AI Tailwind ${categoryData.title} | LangUI`,\n description: categoryData.description,\n openGraph: {\n title: `AI Tailwind ${categoryData.title} | LangUI`,\n description: categoryData.description,\n url: 'https://www.LangUI.dev/',\n siteName: 'LangUI',\n type: 'website',\n image: 'https://www.LangUI.dev/og.png',\n },\n twitter: {\n card: 'summary_large_image',\n title: `AI Tailwind ${categoryData.title} | LangUI`,\n description: categoryData.description,\n },\n }\n}\n\nexport async function generateStaticParams() {\n return ['components']\n}\n\nasync function getCategory(params) {\n const componentsPath = join(process.cwd(), '/src/data/components')\n const categoriesPath = join(process.cwd(), '/src/data/categories')\n\n const categorySlug = params.category\n const categoryPath = join(categoriesPath, `${categorySlug}.mdx`)\n\n const componentSlugs = await fs.readdir(componentsPath)\n const categoryItem = await fs.readFile(categoryPath, 'utf-8')\n\n const { data: categoryData } = matter(categoryItem)\n\n const componentItems = await Promise.all(\n componentSlugs\n .filter((componentSlug) => componentSlug.includes(categorySlug))\n .map(async (componentSlug) => {\n const componentPath = join(componentsPath, componentSlug)\n const componentItem = await fs.readFile(componentPath, 'utf-8')\n\n const { data: componentData } = matter(componentItem)\n\n const componentSlugFormatted = componentSlug.replace('.mdx', '')\n const componentSlugTrue = componentSlugFormatted.replace(\n `${categorySlug}-`,\n ''\n )\n const componentCount = Object.values(componentData.components).length\n\n return {\n title: componentData.title,\n slug: componentSlugTrue,\n category: componentData.category,\n emoji: componentData.emoji,\n count: componentCount,\n }\n })\n )\n\n return {\n categoryData,\n componentItems,\n }\n}\n\nexport default async function Page({ params }) {\n const { categoryData, componentItems } = await getCategory(params)\n\n return (\n <>\n
\n \n \n
\n
\n \n\n

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

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