{"id":18291730,"url":"https://github.com/blazity/shadcn-chatbot-kit","last_synced_at":"2025-05-15T17:03:05.419Z","repository":{"id":259592787,"uuid":"876079530","full_name":"Blazity/shadcn-chatbot-kit","owner":"Blazity","description":"🤖 Beautifully designed chatbot components based on shadcn/ui","archived":false,"fork":false,"pushed_at":"2025-03-16T18:50:24.000Z","size":18699,"stargazers_count":373,"open_issues_count":6,"forks_count":26,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T02:41:52.262Z","etag":null,"topics":["ai-sdk","generative-ai","llm","nextjs","openai","react","shadcn","shadcn-ui","typescript"],"latest_commit_sha":null,"homepage":"https://shadcn-chatbot-kit.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Blazity.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-21T11:14:57.000Z","updated_at":"2025-04-01T11:11:08.000Z","dependencies_parsed_at":"2024-10-26T19:41:58.483Z","dependency_job_id":"416b456e-3015-4f77-94ed-4f274c7e9353","html_url":"https://github.com/Blazity/shadcn-chatbot-kit","commit_stats":null,"previous_names":["blazity/shadcn-chatbot-kit"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fshadcn-chatbot-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fshadcn-chatbot-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fshadcn-chatbot-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fshadcn-chatbot-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Blazity","download_url":"https://codeload.github.com/Blazity/shadcn-chatbot-kit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248489069,"owners_count":21112494,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-sdk","generative-ai","llm","nextjs","openai","react","shadcn","shadcn-ui","typescript"],"created_at":"2024-11-05T14:14:58.352Z","updated_at":"2025-04-11T22:28:25.046Z","avatar_url":"https://github.com/Blazity.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# shadcn-chatbot-kit\n\nA comprehensive chatbot component kit built on top of and fully compatible with the [shadcn/ui](https://ui.shadcn.com/) ecosystem. Build beautiful, customizable AI chatbots in minutes while maintaining full control over your components.\n\n![hero](apps/www/public/og.jpg)\n\n[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)\n[![shadcn/ui](https://img.shields.io/badge/built%20with-shadcn%2Fui-black.svg)](https://ui.shadcn.com)\n\n## ✨ Features\n\n- 💬 **Rich Chat Interface**: Beautiful interactions and animations for a polished experience\n- 📎 **Advanced Attachments**:\n  - Smart preview for uploaded files\n  - Auto-conversion of long text to attachments\n  - Markdown support with syntax highlighting\n- 🧠 **Thinking Process**: Visual block showing LLM reasoning and thought process (🚧 WIP)\n- 🛠️ **Tool Integration**:\n  - Visual tool execution states\n  - Cancel support for running operations\n  - Smart interrupt prompts\n- 🎨 **Fully Themeable**: Leverages shadcn/ui's theming system for complete visual customization\n- 🌓 **Dark/Light Mode**: Built-in theme switching support\n- 🎯 **Developer Experience**:\n  - Works seamlessly with shadcn CLI\n  - Easy component installation and updates\n  - Composable API design for custom implementations\n- 🎤 **Voice Input**: Speech-to-text support for hands-free interaction (🚧 WIP)\n- 📦 **Copy \u0026 Paste Components**: Install only what you need, own your components\n- 🔧 **Highly Customizable**: Modify any aspect of the components to match your needs\n- 📱 **Responsive Design**: Works seamlessly across all device sizes\n- 🚀 **Modern Code**: Built with the latest web standards and best practices\n\n## 🧩 Components\n\nThe kit includes everything you need to build a full-featured chatbot:\n\n- **Chat**: Pre-built chat component, with option to build a custom one with composable components\n- **Auto-Scroll Message Area**: Smart scrolling behavior for new messages\n- **Message Input**:\n  - Auto-resize textarea\n  - File upload support\n  - Preview attached files\n- **Prompt Suggestions**: Help users with quick action buttons\n- **Message Actions**: Built-in copy, rate response, and other utility buttons\n- **Loading States**: Elegant loading indicators and transitions\n\n## 📦 Installation\n\n1. First, follow the [installation instructions](https://ui.shadcn.com/docs/installation) for shadcn/ui in your project.\n\n2. Make sure you're using the modern `shadcn` CLI (not the legacy `shadcn-ui`).\n\n3. Install components using the CLI.\n\nVisit [the documentation](https://shadcn-chatbot-kit.vercel.app/docs/components/chat) for detailed installation instructions and a full list of available components.\n\n## 🚀 Quick Start\n\n**Note:** This example uses the Vercel AI SDK. Follow the [official Getting Started guide](https://sdk.vercel.ai/docs/getting-started/nextjs-app-router#create-your-application), before using it.\n\n```tsx\n\"use client\"\n\nimport { useChat } from \"ai/react\"\n\nimport { Chat } from \"@/components/ui/chat\"\n\nexport function ChatDemo() {\n  const { messages, input, handleInputChange, handleSubmit, isLoading, stop } =\n    useChat()\n\n  return (\n    \u003cChat\n      messages={messages}\n      input={input}\n      handleInputChange={handleInputChange}\n      handleSubmit={handleSubmit}\n      isGenerating={isLoading}\n      stop={stop}\n    /\u003e\n  )\n}\n```\n\n## 🎨 Customization\n\nAll components are built using shadcn/ui's styling system, making them fully customizable using CSS variables.\nVisit our [theme customizer](https://shadcn-chatbot-kit.vercel.app/themes) to visually design your chatbot's appearance.\n\n## 🤝 Contributing\n\nContributions are always welcome! Feel free to:\n\n- Submit bug reports and feature requests\n- Open pull requests to improve the codebase\n- Share feedback and suggestions\n\n## 👨‍⚖️ License\n\nLicensed under the [MIT license](https://github.com/Blazity/shadcn-chatbot-kit/blob/main/LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblazity%2Fshadcn-chatbot-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblazity%2Fshadcn-chatbot-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblazity%2Fshadcn-chatbot-kit/lists"}