Miral Workshop Chat Application

A simplified Next.js chat application that integrates with Databricks LLM endpoints for intelligent conversations.

Features

• Chat Interface: Clean, modern chat interface with markdown support
• Customize Page: Ability to customize the UI with color palettes and company branding
• LLM Integration: Direct integration with Databricks serving endpoints

Getting Started

1. Install Dependencies

npm install

2. Configure Environment Variables

Create a .env.local file in the project root:

DATABRICKS_ENDPOINT=https://e2-demo-field-eng.cloud.databricks.com/serving-endpoints/mas-af9bb20b-endpoint/invocations
DATABRICKS_TOKEN=your_databricks_token_here

Replace your_databricks_token_here with your actual Databricks token.

3. Run the Development Server

npm run dev

Open http://localhost:3000 in your browser.

Project Structure

├── app/
│   ├── api/
│   │   └── chat/          # Chat API endpoint
│   ├── customize/          # Customization page
│   ├── page.tsx           # Main chat page
│   └── layout.tsx         # App layout
├── components/
│   ├── markdown-renderer.tsx  # Markdown display
│   ├── page-header.tsx        # Page header component
│   └── ui/                    # Shadcn UI components
├── lib/
│   ├── customization-config.ts  # Customization configuration
│   └── utils.ts                 # Utility functions
└── styles/
    └── globals.css              # Global styles

Usage

Chat Interface

The main page provides a chat interface where you can:

• Send messages to the LLM
• View responses with markdown formatting
• See conversation history

Customization

Visit /customize to:

• Choose from predefined color palettes
• Add company branding (name, URL, logo)
• Customize the UI to match your brand

Technologies

• Next.js 14 - React framework
• TypeScript - Type safety
• Tailwind CSS - Styling
• Shadcn UI - UI components
• Databricks - LLM integration

License

MIT