Give AI agents one SQL tool to your app data.

import { KalamProvider, LiveQueries } from '@kalamdb/react';
import { asc, desc, eq } from 'drizzle-orm';
import { getExampleClient } from './client';
import { conversations, messages } from './schema.generated';

const client = getExampleClient();

export function InboxPane({ conversationId }: { conversationId: string }) {
  return (
    <KalamProvider client={client}>
      <LiveQueries
        queries={{
          conversations: {
            table: conversations,
            orderBy: (table) => desc(table.updatedAt),
            limit: 20,
          },
          messages: {
            table: messages,
            where: (table) => eq(table.conversationId, conversationId),
            orderBy: (table) => asc(table.createdAt),
            deps: [conversationId],
          },
        }}
        deps={[conversationId]}
      >
        {({ conversations, messages, state }) => (
          <ChatLayout
            conversations={conversations.rows}
            messages={messages.rows}
            busy={state.loading}
          />
        )}
      </LiveQueries>
    </KalamProvider>
  );
}