This project is a React-based Chat Application that uses an AI assistant model for generating responses. It leverages TailwindCSS for styling, ollama-ai-provider for AI interactions, and incorporates live streaming of AI-generated text.
- AI-Powered Chat: Integrates with a large language model for generating conversational responses.
- Real-time Streaming: Messages are displayed as they are generated by the AI.
- TailwindCSS Styling: Responsive and modern design powered by TailwindCSS.
- Interactive UI: Smooth input handling and message display.
- Node.js (v16 or higher)
- NPM or Yarn package manager
-
Clone this repository:
git clone https://github.com/your-repo/chat-app.git cd chat-app -
Install dependencies:
npm install
-
Add ShadCN components (for UI elements):
npx shadcn@latest add button input card scroll-area
-
Start the development server:
npm run dev
-
Access the app at http://localhost:3000.
pages/index.tsx: Main entry point for the chat interface.actions.ts: Defines AI-related functions and streaming logic.components/ui/: UI elements like buttons, inputs, cards, and scroll areas.globals.css: Custom TailwindCSS styles.lib/utils.ts: Utility functions for className merging.
- Type a message in the chat input box.
- Press the Send button.
- The AI assistant will respond with a streaming message.
- Next.js: React framework for server-side rendering.
- TailwindCSS: CSS utility-first framework.
- Lucide React: For icons like loading spinners.
- Ollama-AI Provider: Integration for language model interactions.
The AI model used can be modified in actions.ts:
const model = ollama("hf.co/ojisetyawan/llama3-8b-cpt-sahabatai-v1-instruct-Q4_K_M-GGUF");Replace the model with your desired model URL.
Modify globals.css for customizing the theme and styles.
- Start Development Server:
npm run dev - Build for Production:
npm run build - Run Production Build:
npm start
For any questions, feedback, or suggestions, please reach out via https://siddiqodiq.me