AWS Blocks の AGENTS.md で Kiro にチャットアプリを作らせてみた

# Agent Guide

## Quick Reference

- **Backend:** `aws-blocks/index.ts` — APIs, auth, data models
- **Frontend:** `src/` — imports backend APIs via `import { api } from 'aws-blocks'`
- **Tests:** `test/e2e.test.ts` — run with `npm run test:e2e`
- **Full guide:** `node_modules/@aws-blocks/blocks/README.md` — architecture, workflow, best practices, common mistakes
- **Block catalog + decision tree:** `node_modules/@aws-blocks/blocks/docs/index.md`
- **Per-block docs:** `node_modules/@aws-blocks/blocks/docs/<package-name>.md`

## Workflow

1. Make changes to backend (`aws-blocks/index.ts`) or frontend (`src/`)
2. Test with `npm run test:e2e` — starts a dev server automatically if one isn't running
3. For faster iteration: run `npm run dev &` in the background, then run `npm run test:e2e` repeatedly (reuses the running server)
4. Do NOT use curl/fetch against the API unless troubleshooting connectivity

## Rules

- **Use Building Blocks** for all persistence and cloud abstractions — never local files, in-memory arrays, or local databases.
- **Read block docs** at `node_modules/@aws-blocks/blocks/docs/<package-name>.md` before using a block.
- **The JSON-RPC transport is invisible** — do not construct RPC payloads manually. Import and call the typed API directly.

## Deploying (requires AWS credentials)

- `npm run sandbox` — deploy backend to AWS, serve frontend locally
- `npm run deploy` — full production deploy to AWS
- `npm run sandbox:destroy` — tear down sandbox resources

/**
 * Backend — aws-blocks/index.ts
 */
import { ApiNamespace, Scope, AuthBasic, DistributedTable, Realtime, Agent } from '@aws-blocks/blocks';
import { z } from 'zod';

const scope = new Scope('my-app');

// ─── Auth ────────────────────────────────────────────────────────────────────
const auth = new AuthBasic(scope, 'auth', {
  passwordPolicy: { minLength: 8 },
  crossDomain: process.env.BLOCKS_SANDBOX === 'true',
});
export const authApi = auth.createApi();

// ─── Data ────────────────────────────────────────────────────────────────────
const todoSchema = z.object({
  userId: z.string(),
  todoId: z.string(),
  title: z.string(),
  completed: z.boolean(),
  priority: z.number(),
  version: z.number(),
  createdAt: z.number(),
});

const todos = new DistributedTable(scope, 'todos', {
  schema: todoSchema,
  key: { partitionKey: 'userId', sortKey: 'todoId' },
  indexes: {
    byPriority: { partitionKey: 'userId', sortKey: 'priority' },
    byTitle: { partitionKey: 'userId', sortKey: 'title' },
  },
});

// ─── Realtime ────────────────────────────────────────────────────────────────
const rt = new Realtime(scope, 'live', {
  namespaces: {
    todos: Realtime.namespace(z.object({
      action: z.enum(['created', 'updated', 'deleted']),
      todoId: z.string(),
    })),
  },
});

// ─── Agent ────────────────────────────────────────────────────────────────────
const agent = new Agent(scope, 'chat-agent', {
  inferenceOnly: true,
  model: { deployed: { provider: 'bedrock', modelId: 'global.anthropic.claude-haiku-4-5-20251001-v1:0' } },
  systemPrompt: 'You are a helpful assistant. Answer concisely in the same language the user writes in.',
});

// ─── API ─────────────────────────────────────────────────────────────────────
export const api = new ApiNamespace(scope, 'api', (context) => ({

  async subscribeTodos() {
    const user = await auth.requireAuth(context);
    return rt.getChannel('todos', user.username);
  },

  async createTodo(title: string, priority: number = 2) {
    const user = await auth.requireAuth(context);
    const todoId = `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
    const todo = {
      userId: user.username,
      todoId,
      title,
      completed: false,
      priority,
      version: 1,
      createdAt: Date.now(),
    };
    await todos.put(todo);
    await rt.publish('todos', user.username, { action: 'created' as const, todoId });
    return todo;
  },

  async listTodos(sortBy?: 'priority' | 'title') {
    const user = await auth.requireAuth(context);
    if (sortBy) {
      const index = sortBy === 'priority' ? 'byPriority' : 'byTitle';
      return await Array.fromAsync(
        todos.query({ index, where: { userId: { equals: user.username } } })
      );
    }
    return await Array.fromAsync(
      todos.query({ where: { userId: { equals: user.username } } })
    );
  },

  async toggleTodo(todoId: string) {
    const user = await auth.requireAuth(context);
    const todo = await todos.get({ userId: user.username, todoId });
    if (!todo) throw new Error('Todo not found');
    await todos.put(
      { ...todo, completed: !todo.completed, version: todo.version + 1 },
      { ifFieldEquals: { version: todo.version } },
    );
    await rt.publish('todos', user.username, { action: 'updated' as const, todoId });
    return { success: true };
  },

  async updatePriority(todoId: string, priority: number) {
    const user = await auth.requireAuth(context);
    const todo = await todos.get({ userId: user.username, todoId });
    if (!todo) throw new Error('Todo not found');
    await todos.put(
      { ...todo, priority, version: todo.version + 1 },
      { ifFieldEquals: { version: todo.version } },
    );
    await rt.publish('todos', user.username, { action: 'updated' as const, todoId });
    return { success: true };
  },

  async deleteTodo(todoId: string) {
    const user = await auth.requireAuth(context);
    await todos.delete({ userId: user.username, todoId });
    await rt.publish('todos', user.username, { action: 'deleted' as const, todoId });
    return { success: true };
  },

  // ─── Chat ──────────────────────────────────────────────────────────────────
  async sendMessage(message: string) {
    await auth.requireAuth(context);
    const result = await agent.stream(message);
    const done = await result.complete();
    return { reply: done.text };
  },
}));

/**
 * Frontend — src/index.ts
 *
 * AuthBasic + AI Chat.
 */
import { api, authApi } from 'aws-blocks';
import { AccountMenuBar, AuthenticatedContent } from '@aws-blocks/blocks/ui';
import { html, render } from 'lit-html';

// Auth menu bar
document.getElementById('menu-bar')!.appendChild(AccountMenuBar(authApi));

// Chat UI (shown when authenticated)
document.getElementById('app')!.appendChild(
  AuthenticatedContent(authApi, (user) => {
    const container = document.createElement('div');
    type Message = { role: 'user' | 'ai'; text: string };
    let messages: Message[] = [];
    let loading = false;
    let inputValue = '';

    function redraw() {
      render(html`
        <h2>💬 AI Chat</h2>
        <p style="color:#666;font-size:0.85em">Logged in as: ${user.username}</p>
        <div style="border:1px solid #ddd;border-radius:8px;padding:16px;max-height:400px;overflow-y:auto;margin-bottom:12px;background:#fafafa">
          ${messages.length === 0
            ? html`<p style="color:#999;text-align:center">Send a message to start chatting</p>`
            : messages.map(m => html`
              <div style="margin:8px 0;padding:8px 12px;border-radius:8px;max-width:80%;${m.role === 'user' ? 'margin-left:auto;background:#e3f2fd;text-align:right' : 'background:#f5f5f5'}">
                <strong>${m.role === 'user' ? 'You' : 'AI'}:</strong> ${m.text}
              </div>
            `)}
          ${loading ? html`<div style="color:#999;padding:8px">Thinking...</div>` : ''}
        </div>
        <div style="display:flex;gap:8px">
          <input
            type="text"
            placeholder="Type a message..."
            style="flex:1;padding:8px;border:1px solid #ddd;border-radius:4px"
            .value=${inputValue}
            @input=${(e: Event) => { inputValue = (e.target as HTMLInputElement).value; }}
            @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' && !loading) send(); }}
          />
          <button @click=${send} ?disabled=${loading}>Send</button>
        </div>
      `, container);
    }

    async function send() {
      const msg = inputValue.trim();
      if (!msg) return;
      inputValue = '';
      messages = [...messages, { role: 'user', text: msg }];
      loading = true;
      redraw();
      try {
        const { reply } = await api.sendMessage(msg);
        messages = [...messages, { role: 'ai', text: reply ?? '' }];
      } catch (e: any) {
        messages = [...messages, { role: 'ai', text: `Error: ${e.message}` }];
      }
      loading = false;
      redraw();
    }

    redraw();
    return container;
  })
);