Skip to main content

Smash Chat Configuration

Learn how to configure the Smash AI Chat widget for your environment.

Overview​

The Smash widget is configured primarily through environment variables and component props. This allows for easy adjustment of API endpoints, widget IDs, and initial behavior.

Environment Variables​

Update your .env.local file with the following settings:

  • NEXT_PUBLIC_SMASH_API_URL: The base URL of the LibreApps Gateway or the AI Chat Server.
  • NEXT_PUBLIC_SMASH_WIDGET_ID: A unique identifier for your chat widget instance.
  • NEXT_PUBLIC_SMASH_THEME: (Optional) The default theme for the widget (light, dark, or system).

Component Props​

You can also pass configuration directly to the SmashChatWidget component:

<SmashChatWidget 
  title="AI Assistant"
  initialMessage="Hello! How can I help you today?"
  position="bottom-right"
  showIcon={true}
/>

Available Props​

  • title: The header text of the chat window.
  • initialMessage: The first message shown to the user.
  • position: Where the widget appears (bottom-right, bottom-left).
  • showIcon: Whether to show the floating chat icon.

Backend Configuration​

The widget expects the backend to support the following endpoints:

  • POST /api/chat/stream: For real-time message streaming.
  • GET /api/chat/history: To retrieve previous conversation turns.

Best Practices​

  • ✅ Do this: Use environment variables for API URLs to ensure they change correctly between development and production.
  • ✅ Do this: Provide a helpful initialMessage to guide users on how to interact with the AI.
  • ❌ Don't do this: Hardcode the widgetId in your components; use an environment variable instead.