mistral-kit

Ready-made chat components for Mistral AI. Drop in the full UI or build your own with headless hooks. Includes secure API proxies and common features like streaming, tool calling, and document search.

@matthewporteous/mistral-kit·View source

Getting started

Four steps to production-ready AI chat

  1. 1

    Install the kit

    npm i @matthewporteous/mistral-kit

    Works with pnpm, npm, or yarn. React 18+ and Next.js 13+ (App Router) supported.

  2. 2

    Scaffold secure routes

    npx mistral-kit init

    Generates Edge-ready handlers for /api/mistral, /api/embeddings, /api/upload-text, /api/weather.

  3. 3

    Drop in the UI

    "use client";

    import { MistralChat, defaultTools } from "@matthewporteous/mistral-kit";

    export default function Demo() {
      return (
        <main className="flex min-h-screen flex-col items-center justify-end bg-neutral-100 p-6">
          <section className="flex w-full max-w-4xl flex-col-reverse space-y-4-reverse mb-8 h-[80vh] overflow-hidden">
            <MistralChat
              apiProxyUrl="/api/mistral"
              embeddingsOptions={{ apiProxyUrl: "/api/embeddings" }}
              uploadOptions={{ apiUrl: "/api/upload-text", maxFileSizeMB: 4 }}
              semanticSearchOptions={{ contextChunksForGeneral: 8 }}
              baseTools={defaultTools}
              promptPlaceholder="Ask anything..."
              systemPrompt="You are an expert AI assistant that combines precision, clarity, and initiative. Keep your tone confident, succinct, and helpful. like a world-class analyst who gets straight to the point. No emojis."
            />
          </section>
        </main>
      );
    }

    Use the full panel or compose MessageList, Composer, Tool UI, and hooks yourself.

  4. 4

    Configure secrets & knobs

    MISTRAL_API_KEY=xxxx

    Tune uploadOptions, embeddingsOptions, base/extra tools, semanticSearchOptions, and CLI flags.

Style to fit your product

Same component, different props. Customize colors, borders, spacing, and system prompts to match your design system.

Default

Out of the box—no custom styling

Try me

Minimal

Clean lines, subtle borders, maximum breathing room

Try me

Bold

High contrast, thick borders, strong shadows—with custom tool styling

Try me

Dark

Terminal aesthetic with cyan accents and fade effect

Try me

Soft

Gentle gradients and rounded corners

Try me

Compact

Dense layout for sidebar or widget use

Try me

Every example uses the same <MistralChat> component with different classNames and props. Mix and match to build your perfect chat experience.