Tutorial 1: Chat With Your Data

AWS_REGION=ap-southeast-1
AWS_BEARER_TOKEN_BEDROCK=bedrock-api-key-xxxx
BEDROCK_MODEL_ID=apac.amazon.nova-lite-v1:0

pnpm list ai @ai-sdk/amazon-bedrock @ai-sdk/react zod @mantine/core

pnpm add ai @ai-sdk/amazon-bedrock @ai-sdk/react zod

import { bedrock } from "@ai-sdk/amazon-bedrock";
import { convertToModelMessages, stepCountIs, streamText } from "ai";
import { dataTools } from "./tools";
 
export const runtime = "nodejs";
export const maxDuration = 60;
 
export async function POST(req: Request) {
  const { messages } = await req.json();
 
  const result = streamText({
    model: bedrock(process.env.BEDROCK_MODEL_ID!),
    system:
      "You are an assistant embedded in a Buildpad app. " +
      "Use the provided tools to answer questions about the user's collections. " +
      "Always call list_collections first if you don't already know what data exists.",
    messages: await convertToModelMessages(messages),
    tools: dataTools,
    stopWhen: stepCountIs(5),
  });
 
  return result.toUIMessageStreamResponse();
}

import { tool } from "ai";
import { z } from "zod";
import { getAuthHeaders, getDaasUrl } from "@/lib/api/auth-headers";
 
async function daas(path: string) {
  const url = `${getDaasUrl()}${path}`;
  const headers = await getAuthHeaders();
  const res = await fetch(url, { headers, cache: "no-store" });
  if (!res.ok) throw new Error(`DaaS ${res.status}: ${await res.text()}`);
  return res.json();
}
 
export const dataTools = {
  list_collections: tool({
    description:
      "List all available collections in this app, with their field names and types.",
    inputSchema: z.object({}),
    execute: async () => {
      const [{ data: collections }, { data: fields }] = await Promise.all([
        daas("/api/collections"),
        daas("/api/fields"),
      ]);
      return (collections as any[]).map((c: any) => ({
        collection: c.collection,
        fields: (fields as any[])
          .filter((f: any) => f.collection === c.collection)
          .map((f: any) => ({ field: f.field, type: f.type })),
      }));
    },
  }),
 
  query_collection: tool({
    description:
      "Fetch rows from a collection. Use this after list_collections to answer questions about the user's data.",
    inputSchema: z.object({
      collection: z.string().describe("The collection slug, e.g. 'tasks'."),
      limit: z.number().int().min(1).max(50).default(10),
      sort: z
        .string()
        .optional()
        .describe("Field to sort by. Prefix with '-' for descending."),
    }),
    execute: async ({ collection, limit, sort }) => {
      const params = new URLSearchParams({ limit: String(limit) });
      if (sort) params.set("sort", sort);
      const { data } = await daas(`/api/items/${collection}?${params}`);
      return data;
    },
  }),
};

"use client";
 
import {
  Box,
  Button,
  Code,
  Group,
  Paper,
  ScrollArea,
  Stack,
  Text,
  Textarea,
  Title,
} from "@mantine/core";
import { useChat } from "@ai-sdk/react";
import { useState } from "react";
 
export default function ChatPage() {
  const { messages, sendMessage, status } = useChat();
  const [input, setInput] = useState("");
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim() || status !== "ready") return;
    sendMessage({ text: input });
    setInput("");
  };
 
  return (
    <Stack h="calc(100vh - 4rem)" gap="md" p="md" maw={800} mx="auto">
      <Title order={3}>Chat with your data</Title>
 
      <ScrollArea style={{ flex: 1 }} type="auto">
        <Stack gap="md">
          {messages.map((m) => (
            <Paper key={m.id} p="sm" withBorder radius="md">
              <Text
                fw={600}
                size="sm"
                mb={4}
                c={m.role === "user" ? "blue" : "grape"}
              >
                {m.role === "user" ? "You" : "Assistant"}
              </Text>
              <Stack gap="xs">
                {m.parts.map((part, i) => {
                  if (part.type === "text") {
                    return (
                      <Text key={i} style={{ whiteSpace: "pre-wrap" }}>
                        {part.text}
                      </Text>
                    );
                  }
                  if (part.type.startsWith("tool-")) {
                    const p = part as any;
                    return (
                      <Box key={i}>
                        <Text size="xs" c="dimmed" mb={4}>
                          {p.type.replace("tool-", "")} — {p.state}
                        </Text>
                        {p.output !== undefined && (
                          <Code
                            block
                            style={{ maxHeight: 240, overflow: "auto" }}
                          >
                            {JSON.stringify(p.output, null, 2)}
                          </Code>
                        )}
                      </Box>
                    );
                  }
                  return null;
                })}
              </Stack>
            </Paper>
          ))}
        </Stack>
      </ScrollArea>
 
      <form onSubmit={handleSubmit}>
        <Group align="flex-end" gap="sm">
          <Textarea
            value={input}
            onChange={(e) => setInput(e.currentTarget.value)}
            placeholder="Ask about your data…"
            autosize
            minRows={1}
            maxRows={6}
            style={{ flex: 1 }}
            disabled={status !== "ready"}
          />
          <Button type="submit" disabled={status !== "ready" || !input.trim()}>
            Send
          </Button>
        </Group>
      </form>
    </Stack>
  );
}