From 14ed1b6db85721a0185dbe910c4753a13ced657e Mon Sep 17 00:00:00 2001 From: Reynaldi Chernando <12949382+reynaldichernando@users.noreply.github.com> Date: Fri, 27 Mar 2026 17:35:53 +0700 Subject: [PATCH] Add claude cache control docs (#2737) * Add claude cache control docs * refine * Update src/docs/src/AI/chat.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update src/docs/src/AI/chat.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update src/docs/src/examples.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/docs/src/AI/chat.md | 75 +++++++++++++++++++ src/docs/src/examples.js | 6 ++ .../examples/ai-claude-cache-control.html | 48 ++++++++++++ 3 files changed, 129 insertions(+) create mode 100644 src/docs/src/playground/examples/ai-claude-cache-control.html diff --git a/src/docs/src/AI/chat.md b/src/docs/src/AI/chat.md index 8a1f86377..6edee79ef 100755 --- a/src/docs/src/AI/chat.md +++ b/src/docs/src/AI/chat.md @@ -161,6 +161,28 @@ The code implementation is available in our [web search example](/playground/ai- List of OpenAI models that support the web search can be found in their [API compatibility documentation](https://platform.openai.com/docs/guides/tools-web-search#api-compatibility). +## Prompt Caching + +Specific to Anthropic models, you can use the cache control feature, allowing you to optimize costs for repeated prompts. + +Pass in the `cache_control` parameter inside the object in the `messages` array. + +```js +[ + { + role: 'system', + content: 'a really long system prompt', + cache_control: { type: "ephemeral" } + }, + { + role: 'user', + content: '' + }, +] +``` + +You can find the implementation in our [prompt caching example](/playground/ai-claude-cache-control/). Find more details about cache control in [Anthropic documentation](https://platform.claude.com/docs/en/build-with-claude/prompt-caching). + ## Examples Ask GPT-5 nano a question @@ -371,6 +393,59 @@ List of OpenAI models that support the web search can be found in their [API com ``` +Prompt caching with Claude + +```html;ai-claude-cache-control + + + + + + +``` + Working with Files ```html;ai-resume-analyzer diff --git a/src/docs/src/examples.js b/src/docs/src/examples.js index c40317b23..d387d5839 100644 --- a/src/docs/src/examples.js +++ b/src/docs/src/examples.js @@ -97,6 +97,12 @@ const examples = [ slug: 'ai-chat-claude', source: '/playground/examples/ai-chat-claude.html', }, + { + title: 'Prompt caching with Claude', + description: 'Reduce time and costs with Claude prompt caching using Puter.js AI API. Try AI examples directly in Puter.js playground.', + slug: 'ai-claude-cache-control', + source: '/playground/examples/ai-claude-cache-control.html', + }, { title: 'Chat with DeepSeek', description: 'Chat with DeepSeek using Puter.js AI API. Run and experiment with this example directly in the playground.', diff --git a/src/docs/src/playground/examples/ai-claude-cache-control.html b/src/docs/src/playground/examples/ai-claude-cache-control.html new file mode 100644 index 000000000..b0ec26880 --- /dev/null +++ b/src/docs/src/playground/examples/ai-claude-cache-control.html @@ -0,0 +1,48 @@ + + + + + + \ No newline at end of file