Build a Frontend

Let’s build a chat UI that talks to your Chowder instance. We’ll use Next.js with TypeScript, but the patterns here work with any framework — the Chowder API is just REST. By the end, you’ll have a working chat interface with session support and model selection.

This guide shows the key pieces, not a full copy-paste app. For a complete working implementation, check the example/ folder in the Chowder repo.

Prerequisites

A running Chowder instance (create one first)
A scoped API key with read and interact permissions (create one)
Node.js 18+ and a Next.js project

Never use your organization key (chd_org_...) in frontend code. It has full admin access. Always use a scoped key (chd_sk_...) with the minimum permissions needed.

Putting it all together

Here’s how you’d wire this into a Next.js page:

app/chat/page.tsx

import { Chat } from "@/components/Chat";

export default function ChatPage() {
  // In a real app, you'd get this from your database or URL params
  const instanceId = "ead7b76b-f34e-4b91-93e7-9c979cf9e41c";

  return (
    <main className="max-w-2xl mx-auto p-8">
      <h1 className="text-2xl font-bold mb-6">Chat</h1>
      <Chat instanceId={instanceId} />
    </main>
  );
}

Full example

The patterns above cover the essentials, but a production app needs more — loading states, scroll management, localStorage persistence, keyboard shortcuts, and proper styling. Check out the complete working example in the repo:

example/
├── src/
│   ├── lib/api.ts          # Full API client with types
│   ├── components/
│   │   ├── chat.tsx         # Chat with sessions, model picker, persistence
│   │   ├── channels.tsx     # Channel management UI
│   │   └── skills.tsx       # Skill install/uninstall UI
│   └── ...

The example uses Next.js 15, shadcn/ui components, and localStorage for session persistence. Clone it, drop in your env vars, and you’ve got a full dashboard.

Architecture tips

Client-side (simple)
Server-side (production)

Call the Chowder API directly from the browser using a scoped key. This is what the example app does.Pros: Simple, no backend needed, instant setup.Cons: API key is visible in browser DevTools (that’s why you use a scoped key with minimal permissions).

Browser → Chowder API → OpenClaw Instance

Proxy requests through your own backend. Your server holds the API key, the browser never sees it.Pros: Key is secret, you can add your own auth/rate limiting/logging.Cons: More infrastructure to maintain.

Browser → Your API → Chowder API → OpenClaw Instance

With Next.js Route Handlers:

app/api/chat/route.ts

import { NextRequest, NextResponse } from "next/server";

const CHOWDER_URL = process.env.CHOWDER_API_URL!;
const CHOWDER_KEY = process.env.CHOWDER_API_KEY!; // Server-only, no NEXT_PUBLIC_

export async function POST(req: NextRequest) {
  const { instanceId, input, model, sessionId } = await req.json();

  // Add your own auth check here
  // const user = await getUser(req);

  const path = sessionId
    ? `/v1/instances/${instanceId}/session/${sessionId}/responses`
    : `/v1/instances/${instanceId}/responses`;

  const res = await fetch(`${CHOWDER_URL}${path}`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${CHOWDER_KEY}`,
    },
    body: JSON.stringify({ model, input }),
  });

  const data = await res.json();
  return NextResponse.json(data, { status: res.status });
}

Getting Started

Core Concepts

Guides

Build a Frontend

Prerequisites

Putting it all together

Full example

Architecture tips

What’s next?

Scoped API Keys

Install Skills

​Prerequisites

​Putting it all together

​Full example

​Architecture tips

​What’s next?

Scoped API Keys

Install Skills

Prerequisites

Putting it all together

Full example

Architecture tips

What’s next?