Integration Guide

Embed Marel into your Wouters Media projects. This integration is exclusively available for projects connected to the Wouters Media Vercel account.

Prerequisites

Your project must be deployed on the Wouters Media Vercel account
Access to the Marel API endpoint (automatically available for connected projects)
React/Next.js project (other frameworks coming soon)

Installation

Marel is available as a private npm package from the Wouters Media GitHub organization. Only projects with access to the woutersmedia/marel repository can install it.

1. Install the package

Add Marel to your project using your package manager. Make sure you have access to the Wouters Media GitHub organization.

bash

# Using pnpm (recommended)
pnpm add git+ssh://git@github.com:woutersmedia/marel.git

# Using npm
npm install git+ssh://git@github.com:woutersmedia/marel.git

# Using yarn
yarn add git+ssh://git@github.com:woutersmedia/marel.git

2. Add Marel to your layout

Import and add the MarelChat component to your root layout so it's available on all pages.

tsx

// app/layout.tsx
import { MarelChat } from "@woutersmedia/marel"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <MarelChat />
      </body>
    </html>
  )
}

3. Configure environment variables

Marel connects to the central Wouters Media backend automatically when deployed on the Wouters Media Vercel account. For local development, add these to your .env.local:

env

# .env.local (for local development)
NEXT_PUBLIC_MAREL_API_URL=https://marel.woutersmedia.nl/api

Configuration

Widget Props

Configure Marel to fit your application

Prop	Type	Default	Description
position	"bottom-right" \| "bottom-left"	"bottom-right"	Position of the widget on screen
title	string	"Marel"	Title shown in the chat header
subtitle	string	-	Subtitle shown below the title
pageContext	PageContext	-	Current page context for smart suggestions
onAction	(id, params) => void	-	Callback when Marel triggers an action

Page Context

Make Marel aware of what page the user is on, and what actions are available. This helps her provide relevant suggestions and automate tasks.

tsx

// Define page context for each page
const pageContext = {
  pageKey: "bookings",
  pageName: "Bookings",
  description: "Manage and create new bookings",
  availableActions: [
    {
      id: "create_booking",
      name: "Create Booking",
      description: "Start a new booking",
      requiresConfirmation: true,
      confirmationMessage: "Would you like me to open the booking form?"
    },
    {
      id: "export_bookings",
      name: "Export Bookings",
      description: "Download bookings as CSV"
    }
  ],
  suggestedPrompts: [
    "How do I create a booking?",
    "Show me today's bookings",
    "Help me reschedule a booking"
  ]
}

// Pass to MarelChat
import { MarelChat } from "@woutersmedia/marel"

<MarelChat 
  pageContext={pageContext}
  onAction={(actionId, params) => {
    if (actionId === "create_booking") {
      router.push("/bookings/new")
    }
  }}
/>

Handling Actions

When Marel determines the user wants to perform an action, she will call theonActioncallback. Actions that require confirmation will show a prompt first.

tsx

// Handle Marel-triggered actions
function handleMarelAction(actionId: string, params?: Record<string, unknown>) {
  switch (actionId) {
    case "create_booking":
      // Open booking form
      setShowBookingModal(true)
      break
      
    case "export_bookings":
      // Trigger CSV export
      downloadBookingsCSV(params?.dateRange)
      break
      
    case "navigate":
      // Navigate to a page
      router.push(params?.path as string)
      break
      
    default:
      console.log("Unknown action:", actionId)
  }
}

import { MarelChat } from "@woutersmedia/marel"

<MarelChat 
  pageContext={pageContext}
  onAction={handleMarelAction}
/>

Adding Knowledge

Marel pulls knowledge from the central Wouters Media knowledge base. To add documentation for your project, contact the Wouters Media team or add entries directly to the database.

Knowledge Entry Structure

sql

-- Add knowledge to marel.knowledge table
INSERT INTO marel.knowledge (title, content, category, tags)
VALUES (
  'How to create a booking in Booker',
  'To create a booking in Booker, navigate to the Bookings page and click "New Booking". Fill in the customer details, select the service, and choose a time slot. Click "Confirm" to save the booking.',
  'booker',
  ARRAY['booking', 'create', 'new', 'booker']
);

Features

Context-Aware

Marel knows what page the user is on and adjusts her suggestions accordingly.

Multi-Lingual

Responds in the user's language automatically. Knowledge base is English, translated on the fly.

GDPR Compliant

Sessions auto-expire after 24 hours. Users can clear history anytime. No personal data stored.

Tech Stack

Marel is built with modern, reliable technologies:

Frontend

Next.js 16 - React framework
Tailwind CSS v4 - Styling
shadcn/ui - UI components
Vercel AI SDK 6 - Chat streaming

AI & LLM

Vercel AI Gateway - Model routing
Claude (Anthropic) - Primary model
Langfuse - Observability & feedback

Database

Neon - PostgreSQL for knowledge base
Upstash Redis - Session storage (24h TTL)

Infrastructure

Vercel - Hosting & deployment
Vercel Blob - Asset storage

Need Help?

For integration support or to report issues, contact the Wouters Media development team.

Contact Support