{"id":26509656,"url":"https://github.com/1337hero/faster-next-chat","last_synced_at":"2025-03-21T01:20:03.174Z","repository":{"id":273160358,"uuid":"918538761","full_name":"1337hero/faster-next-chat","owner":"1337hero","description":"A NextJS \"Local First\" AI Interface","archived":false,"fork":false,"pushed_at":"2025-03-16T14:10:01.000Z","size":736,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-16T15:23:41.063Z","etag":null,"topics":["ai","anthropic","javascript","llm-inference","llm-ui","next","nextjs","openai","openai-api","react","reactjs","self-hosted","tailwind","tailwindcss","typescript","vercel","vercel-ai-sdk"],"latest_commit_sha":null,"homepage":"","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/1337hero.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2025-01-18T07:25:52.000Z","updated_at":"2025-03-16T14:10:04.000Z","dependencies_parsed_at":"2025-01-19T05:17:19.442Z","dependency_job_id":"7b839547-a788-4437-9b39-1f34577ef59f","html_url":"https://github.com/1337hero/faster-next-chat","commit_stats":null,"previous_names":["1337hero/faster-next-chat"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1337hero%2Ffaster-next-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1337hero%2Ffaster-next-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1337hero%2Ffaster-next-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1337hero%2Ffaster-next-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/1337hero","download_url":"https://codeload.github.com/1337hero/faster-next-chat/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244717500,"owners_count":20498309,"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","anthropic","javascript","llm-inference","llm-ui","next","nextjs","openai","openai-api","react","reactjs","self-hosted","tailwind","tailwindcss","typescript","vercel","vercel-ai-sdk"],"created_at":"2025-03-21T01:20:02.644Z","updated_at":"2025-03-21T01:20:03.168Z","avatar_url":"https://github.com/1337hero.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Faster Next Chat\n\n## About:\nThis project was inspired by T3 Chat built by [@t3dotgg](https://github.com/t3dotgg). I wanted to take on a fun challenge: Implement AI streaming within a NextJS app. I noticed T3 used IndexedDB, which was perfect timing since I needed to implement a \"Offline First\" approach in a client project I was working on. \n\nAnd while their are some great open source AI Chat interfaces out there, I wanted to test my ability to build my own. Thus, here we are. \n\nAlso, hat tip to this video [How I Built T3 Chat in 5 Days](https://youtu.be/QLvIoi2s1zY?si=tseIII4RsH2ZX-1o) for the clue on Dexie. It's old but easy to work with.\n\nAnd yes, for those wondering I am using the [Catppuccin Macchiato](https://github.com/catppuccin/catppuccin) color scheme.\n\n## Structure\nI am using a local-first streaming approach with IndexedDB via [Dexie.js](https://dexie.org/) and making use of the [Vercel AI SDK](https://sdk.vercel.ai/).\n\n**Here's how it's implemented:**\n\n1. **Database Layer (db.ts):**\n   - Using Dexie to manage IndexedDB\n   - Two tables: chats and messages\n   - Full CRUD operations for chats and messages\n   - Proper indexing for efficient queries\n\n2. **Reactive Data Layer (usePersistentChat.ts)**\n   - Using useLiveQuery from dexie-react-hooks for reactive queries\n   - Automatic UI updates when data changes in IndexedDB\n   - Real-time chat and message loading\n   - Proper message persistence\n\n3. **Message Flow:**\n   - Messages are stored locally in IndexedDB\n   - UI renders directly from IndexedDB data\n   - New messages are immediately persisted\n   - Changes trigger automatic UI updates\n\n4. **Local-First Benefits:**\n  - Instant data availability\n  - Real-time UI updates \n  - Smooth user experience\n\nThe local first approach is what makes the interface feel fast, especially switching between chats.\n\n## To Do \n- [x] Implement method of DELETING chats.\n- [x] Implement System Prompts\n- [ ] Implement File Upload\n- [ ] Implement Auth for UserLogin\n- [ ] Implement a self hosted deployment script (kinda want this on my local network)\n\nI want to solve for code blocks, they are kinda janky at the moment. Could use improvement.\n\n\n## Prerequisites\n\n- Node.js (version specified in package.json)\n- Yarn package manager\n- API keys for the services you want to use:\n  - `ANTHROPIC_API_KEY`\n  - `OPENAI_API_KEY`\n  - `GROQ_API_KEY`\n\n## Getting Started\n\n1. Clone the repository:\n```bash\ngit clone https://github.com/1337hero/faster-next-chat.git\ncd faster-next-chat\n```\n\n2. Install dependencies:\n```bash\nbun install\n```\n\n3. Create a `.env` file in the root directory and add your API keys:\n```env\nANTHROPIC_API_KEY=your_anthropic_key\nOPENAI_API_KEY=your_openai_key\nGROQ_API_KEY=your_groq_key\n```\n\n4. Start the development server:\n```bash\nbun run dev\n```\n\n5. Open [http://localhost:3000](http://localhost:3000) in your browser.\n\n## Development Commands\n\n- `bun run dev` - Start development server with Turbopack\n- `bun run build` - Create production build\n- `bun run start` - Start production server\n- `bun run lint` - Run ESLint\n- `bun run format` - Format code with Prettier\n- `bun run test:format` - Check code formatting\n\n## Architecture\n\nThe project follows a modern Next.js application structure:\n\n- `/src/app` - Next.js app router pages and API routes\n- `/src/components` - React components organized by feature\n- `/src/hooks` - Custom React hooks\n- `/src/lib` - Utility functions and constants\n- `/src/types` - TypeScript type definitions\n\n## Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## License\n\nMIT License - Have fun\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F1337hero%2Ffaster-next-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F1337hero%2Ffaster-next-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F1337hero%2Ffaster-next-chat/lists"}