CopilotKit/showcase/aimock/d6/claude-sdk-python/chat-css.json at main · samuelson-chen/CopilotKit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
{
  "_meta": {
    "description": "D6 fixtures for claude-sdk-python / chat-css",
    "sourceFile": "d5-all.json",
    "copiedFrom": "langgraph-python",
    "created": "2026-05-21"
  },
  "fixtures": [
    {
      "match": {
        "userMessage": "verify the css theme rendering",
        "turnIndex": 0,
        "context": "claude-sdk-python"
      },
      "response": {
        "content": "The chat is themed with hot pink user bubbles and amber assistant bubbles. CSS variables are scoped to .chat-css-demo-scope so the theme does not leak."
      }
    },
    {
      "match": {
        "userMessage": "switch theme to dark mode",
        "turnIndex": 0,
        "context": "claude-sdk-python"
      },
      "response": {
        "content": "Done — the change_theme tool was invoked and the page is now in dark mode. Frontend tools were registered via useCopilotAction and the agent dispatched the call client-side."
      }
    },
    {
      "match": {
        "userMessage": "tone:professional",
        "turnIndex": 0,
        "context": "claude-sdk-python"
      },
      "response": {
        "content": "Greetings. I am operating in professional tone. I will provide measured, formal responses calibrated to your stated preferences and refrain from colloquialisms in my replies."
      }
    },
    {
      "match": {
        "userMessage": "tone:casual",
        "turnIndex": 0,
        "context": "claude-sdk-python"
      },
      "response": {
        "content": "Hey! Casual mode here — I'll keep things friendly and easygoing. Just shoot me whatever you want to know and I'll riff on it without sounding like a press release."
      }
    },
    {
      "match": {
        "userMessage": "expertise:beginner",
        "turnIndex": 0,
        "context": "claude-sdk-python"
      },
      "response": {
        "content": "Sure! Think of CopilotKit as a friendly toolkit. It helps you add an AI helper to your app. The helper can answer questions, run small tasks, and show buttons or charts when needed."
      }
    },
    {
      "match": {
        "userMessage": "expertise:expert",
        "turnIndex": 0,
        "context": "claude-sdk-python"
      },
      "response": {
        "content": "CopilotKit composes a runtime adapter (Express/Hono) over the AG-UI SSE protocol; the React client wires hooks (useFrontendTool, useAgentContext) into a typed agent runner. The architecture front-runs round-trip latency by streaming TEXT_MESSAGE_CHUNK and TOOL_CALL events on the same channel."
      }
    },
    {
      "match": {
        "userMessage": "responseLength:concise",
        "turnIndex": 0,
        "context": "claude-sdk-python"
      },
      "response": {
        "content": "Agent context is a typed payload sent each turn."
      }
    },
    {
      "match": {
        "userMessage": "responseLength:detailed",
        "turnIndex": 0,
        "context": "claude-sdk-python"
      },
      "response": {
        "content": "Agent context is a typed payload published from the frontend on every turn through the useAgentContext hook. The payload is forwarded into the agent's runtime context (LangGraph 0.6 introduced the `context` channel as the supported relay for per-run frontend-supplied data; legacy `properties` flowed via `forwardedProps` and did not land in `RunnableConfig`). On the Python side, CopilotKitMiddleware reads the value off the runtime context, then routes it into the system-prompt builder so the model sees the user's tone, expertise, and length preferences before each call. The result is per-turn behavior change without a model swap."
      }
    }
  ]
}