Meridial is a developer-first, voice-native assistant that lives inside your web app. Users ask questions naturally, and it guides them through complex workflows with on-screen cues — not docs.

It’s code-first: you define the assistant’s tools and logic in your product, so it can fetch live data and trigger real actions.

How it works

Meridial has two core React components:

• Voicebox: the embedded, user-facing assistant people talk to while they’re in your app.
• Recorder: a dev/product tool that captures real user workflows and turns them into clear, step-by-step guides.

Zero-instrumentation workflow recording

Meridial records workflows in React apps without requiring you to manually tag elements.

It supports build-time plugins for:

• Next.js (SWC plugin)
• Vite (Launching soon)

These plugins automatically add a data-meridial-id attribute to relevant DOM elements during the build. ID generation is deterministic, so the identifiers stay stable across builds as long as your component structure (and plugin configuration) remains consistent.

Result: you get reliable, repeatable element targeting for recordings and guides—without littering your codebase with custom annotations.

Voicebox (embedded assistant)

Voicebox runs inside your app (often bottom-right). It can call developer-defined tools that execute in the client environment and return structured results.

Example tool definition:

"use client"

import { z } from "zod"
import { Voicebox, defineTool } from "@meridial/react"

const tools = [
  defineTool({
    name: "current_weather",
    description: "Get the current weather for a given location.",
    parameters: z.object({
      location: z.string(),
    }),
    execute: async ({ location }) => {
      return { weather: "sunny", temperature: "24°C", wind: "10 km/h" }
    },
  }),
]

Attach tools to Voicebox: