Model Context Protocol Model Context Protocol Model Context Protocol · Lab 6/7 Lab 6/7 Lab 6/7 · 45 phút · 45 min · 45 នាទី

06

Xây todo bền trên KV Building a Persistent Todo App សង់កម្មវិធី todo ជាប់លើ KV

Làm app todo CRUD trên KV: thêm, liệt kê, hoàn thành, xóa task. Create a complete CRUD todo application using KV storage. Build tools for adding, listing, completing, and deleting tasks. ធ្វើកម្មវិធី todo CRUD លើ KV៖ បន្ថែម រាយ បញ្ចប់ លុប task។

Nội dung bước (lệnh, code) giữ nguyên tiếng Anh từ nguồn chính thức. Step body (commands, code) stays in English from the official source. ខ្លឹមសារជំហាន (ពាក្យបញ្ជា និង code) រក្សាភាសាអង់គ្លេសពីប្រភពផ្លូវការ។ labs.cloudflare.dev ↗

Cần trước Prerequisites តម្រូវការជាមុន

  • Đã xong bước 5 Completed Step 5 បានបញ្ចប់ជំហាន 5
  • Đã cấu hình KV KV storage configured បានកំណត់ KV
  • Đã tạo namespace TODO_STORE TODO_STORE namespace created បានបង្កើត namespace TODO_STORE

Bạn sẽ làm được Learning objectives គោលបំណងសិក្សា

  • Implement CRUD đầy đủ trên KV Implement full CRUD operations with KV storage Implement CRUD ពេញលើ KV
  • Thiết kế cấu trúc data cho app phức tạp Design data structures for complex applications រចនារចនាសម្ព័ន្ធ data សម្រាប់កម្មវិធីស្មុគស្មាញ
  • Xử lý thao tác đồng thời và tính nhất quán data Handle concurrent operations and data consistency ដោះស្រាយប្រតិបត្តិការស្របគ្នា និងភាពស៊ីសង្វាក់ data
  • Xây app thân thiện, AI gọi được Build user-friendly AI-accessible applications សង់កម្មវិធីងាយប្រើ ហើយ AI ហៅបាន

Bước 1: Thêm tool quản lý todo Step 1: Add Todo Management Tools ជំហាន 1: បន្ថែម tool គ្រប់គ្រង todo

Chúng ta đang xây What we're building អ្វីដែលយើងកំពុងសង់
Complete CRUD functionality for a todo application with add_new_todo, list_all_todos, and complete_todo tools.
Vì sao quan trọng Why this matters ហេតុអ្វីសំខាន់
Demonstrates how AI assistants can create and manage persistent, stateful applications users can interact with over time.
typescript
this.server.tool(
  "add_new_todo",
  "Add a new task to your todo list",
  { task: z.string().describe("Task description") },
  async ({ task }) => {
    await this.env.TODO_STORE.put(
      `${task}`,
      JSON.stringify({
        completed: false,
        createdAt: new Date().toISOString(),
      }),
    );
    return { content: [{ type: "text", text: `Added task: ${task}` }] };
  },
);

this.server.tool(
  "list_all_todos",
  "List all tasks in your todo list",
  {},
  async () => {
    const list = await this.env.TODO_STORE.list();
    const tasks = [];

    for (const key of list.keys) {
      const value = await this.env.TODO_STORE.get(key.name);
      if (value) {
        let taskData;
        try {
          taskData = JSON.parse(value);
        } catch (e) {
          continue;
        }
        tasks.push(`${taskData.completed ? "✅" : "📋"} ${key.name}`);
      }
    }

    if (tasks.length === 0) {
      return {
        content: [
          { type: "text", text: "No tasks found. Add some tasks first!" },
        ],
      };
    }

    return {
      content: [
        {
          type: "text",
          text: `Todo List:\n${tasks.join("\n")}`,
        },
      ],
    };
  },
);

this.server.tool(
  "complete_todo",
  "Mark a task as completed",
  { task: z.string().describe("Task to mark as completed") },
  async ({ task }) => {
    const value = await this.env.TODO_STORE.get(task);
    if (!value) {
      return { content: [{ type: "text", text: `Task "${task}" not found` }] };
    }

    let taskData;
    try {
      taskData = JSON.parse(value);
    } catch (e) {
      return { content: [{ type: "text", text: `Invalid task ${task}` }] };
    }

    taskData.completed = true;

    await this.env.TODO_STORE.put(task, JSON.stringify(taskData));
    return { content: [{ type: "text", text: `Completed task: ${task}` }] };
  },
);

Bước 2: Deploy và test Step 2: Deploy and Test ជំហាន 2: Deploy និង test

Deploy your updated server with npm run deploy, then head to the AI Playground and connect with your deployment URL. If you were already connected, click the refresh button next to “Available Tools” to pick up the new tools.

Deploy your updated server with npm run deploy, then head to the AI Playground and connect with your deployment URL. If you were already connected, click the refresh button next to “Available Tools” to pick up the new tools.

Deploy your updated server with npm run deploy, then head to the AI Playground and connect with your deployment URL. If you were already connected, click the refresh button next to “Available Tools” to pick up the new tools.

Try a natural conversation:

Try a natural conversation:

Try a natural conversation:

  1. “Add a task to buy groceries”
  2. “Show me my todo list”
  3. “Mark ‘buy groceries’ as completed”
  4. Refresh the page and list tasks again - they persist!

Here is a chat transcript with the qwen3-30b-a3b-fp8 model on the AI Playground and the MCP server we just created.

Here is a chat transcript with the qwen3-30b-a3b-fp8 model on the AI Playground and the MCP server we just created.

Here is a chat transcript with the qwen3-30b-a3b-fp8 model on the AI Playground and the MCP server we just created.