Replace Iris tile swatches with icons and link demos and agent builder

content/develop/ai/_index.md

@@ -14,9 +14,9 @@ hideListLinks: true
 Redis stores and indexes vector embeddings that semantically represent unstructured data including text passages, images, videos, or audio. Store vectors and the associated metadata within [hashes]({{< relref "/develop/data-types/hashes" >}}) or [JSON]({{< relref "/develop/data-types/json" >}}) documents for [indexing]({{< relref "/develop/ai/search-and-query/indexing" >}}) and [querying]({{< relref "/develop/ai/search-and-query/query" >}}).
 
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 my-8">
-  {{< tile-card color="bg-redis-yellow-500" title="RedisVL" description="Redis vector Python client library documentation" url="/develop/ai/redisvl/" >}}
-  {{< tile-card color="bg-blue-300" title="Search & Query" description="Use Redis Search to search data" url="/develop/ai/search-and-query/" >}}
-  {{< tile-card color="bg-violet-300" title="Context Engine" description="Give AI agents the context engine they need with Redis Iris" url="/develop/ai/context-engine/" >}}
+  {{< tile-card icon="images/dev/icons/icon-redis-iris-64-duotone.png" title="Redis Iris context engine" description="Give AI agents the context engine they need with Redis Iris" url="/develop/ai/context-engine/" >}}
+  {{< tile-card icon="images/icon_logo/icon-text-search-64-midnight.png" title="Search & Query" description="Use Redis Search to search data" url="/develop/ai/search-and-query/" >}}
+  {{< tile-card icon="images/dev/icons/icon-redisvl.svg" title="RedisVL" description="Redis vector Python client library documentation" url="/develop/ai/redisvl/" >}}
 </div>
 
 ## What is Redis for AI and search?
@@ -97,11 +97,11 @@ The [Context Engine]({{< relref "/develop/ai/context-engine" >}}) (Redis Iris) i
 Learn to perform vector search, build AI agents, and use semantic caching and memory in your AI/ML projects.
 
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 my-8">
-  {{< tile-card color="bg-blue-300" title="Vector Search" description="Vector search guide" url="/develop/ai/search-and-query/query/vector-search" >}}
-  {{< tile-card color="bg-violet-300" title="AI Agents" description="How AI agents work with Redis" url="/develop/ai/agent-builder/agent-concepts" >}}
-  {{< tile-card color="bg-teal-300" title="LLM Memory" description="Store memory for LLMs" url="https://redis.io/blog/level-up-rag-apps-with-redis-vector-library/" >}}
-  {{< tile-card color="bg-rose-300" title="Caching" description="Semantic caching for faster, smarter LLM apps" url="https://redis.io/blog/what-is-semantic-caching" >}}
-  {{< tile-card color="bg-redis-red-500" title="AI Gateways" description="Deploy an enhanced gateway with Redis" url="https://redis.io/blog/ai-gateways-what-are-they-how-can-you-deploy-an-enhanced-gateway-with-redis/" >}}
+  {{< tile-card icon="images/icon_logo/icon-text-search-64-midnight.png" title="Vector Search" description="Vector search guide" url="/develop/ai/search-and-query/query/vector-search" >}}
+  {{< tile-card icon="images/icon_logo/icon-developers-64-midnight.png" title="AI Agents" description="How AI agents work with Redis" url="/develop/ai/agent-builder/agent-concepts" >}}
+  {{< tile-card icon="images/dev/icons/icon-redis-agent-memory-64-duotone.png" title="LLM Memory" description="Store memory for LLMs" url="https://redis.io/blog/level-up-rag-apps-with-redis-vector-library/" >}}
+  {{< tile-card icon="images/dev/icons/icon-redis-langcache-64-duotone.png" title="Caching" description="Semantic caching for faster, smarter LLM apps" url="https://redis.io/blog/what-is-semantic-caching" >}}
+  {{< tile-card icon="images/icon_logo/icon-data-structures-64-midnight.png" title="AI Gateways" description="Deploy an enhanced gateway with Redis" url="https://redis.io/blog/ai-gateways-what-are-they-how-can-you-deploy-an-enhanced-gateway-with-redis/" >}}
 </div>
 
 ## Quickstarts

content/develop/ai/context-engine/_index.md

@@ -17,10 +17,10 @@ Give your AI agents the context layer they need to reliably act on business data
 Redis Iris eliminates the infrastructure burden of building context-aware AI agents: persistent memory, semantic caching, governed data access, and live data sync, fully managed on Redis Cloud or self-managed on your own infrastructure.
 
 <div class="grid grid-cols-1 md:grid-cols-4 gap-6 my-8">
-  {{< tile-card color="bg-blue-300" title="Concepts" description="What happens when an agent asks Redis Iris for context" url="/develop/ai/context-engine/concepts" >}}
-  {{< tile-card color="bg-violet-300" title="Agent Memory" description="Persistent short-term and long-term memory across agent interactions" url="/develop/ai/context-engine/agent-memory" >}}
-  {{< tile-card color="bg-teal-300" title="LangCache" description="Semantic caching to reduce LLM costs and improve response times" url="/develop/ai/context-engine/langcache" >}}
-  {{< tile-card color="bg-rose-300" title="Context Retriever" description="Governed, schema-first data access tools for agents" url="/develop/ai/context-engine/context-retriever" >}}
+  {{< tile-card icon="images/dev/icons/icon-redis-iris-64-duotone.png" title="Concepts" description="What happens when an agent asks Redis Iris for context" url="/develop/ai/context-engine/concepts" >}}
+  {{< tile-card icon="images/dev/icons/icon-redis-agent-memory-64-duotone.png" title="Agent Memory" description="Persistent short-term and long-term memory across agent interactions" url="/develop/ai/context-engine/agent-memory" >}}
+  {{< tile-card icon="images/dev/icons/icon-redis-langcache-64-duotone.png" title="LangCache" description="Semantic caching to reduce LLM costs and improve response times" url="/develop/ai/context-engine/langcache" >}}
+  {{< tile-card icon="images/dev/icons/icon-redis-context-retriever-64-duotone.png" title="Context Retriever" description="Governed, schema-first data access tools for agents" url="/develop/ai/context-engine/context-retriever" >}}
 </div>
 
 ## What is Redis Iris?

content/develop/ai/context-engine/agent-memory/_index.md

@@ -24,10 +24,10 @@ When enabled, automatic summarization compacts session memory by summarizing old
 Access Redis Agent Memory through the Python and TypeScript SDKs or its REST API. It works with any agent framework or LLM provider.
 
 <div class="grid grid-cols-1 md:grid-cols-4 gap-6 my-8">
-  {{< tile-card color="bg-blue-300" title="Overview" description="What's the same and what's different if you already know Redis" url="/develop/ai/context-engine/agent-memory/overview" >}}
-  {{< tile-card color="bg-redis-yellow-500" title="Python SDK" description="Explore Redis Agent Memory with Python" url="/develop/ai/context-engine/agent-memory/python-sdk-quickstart" >}}
-  {{< tile-card color="bg-redis-yellow-500" title="TypeScript SDK" description="Explore Redis Agent Memory with TypeScript" url="/develop/ai/context-engine/agent-memory/typescript-sdk-quickstart" >}}
-  {{< tile-card color="bg-teal-300" title="REST API" description="Explore Redis Agent Memory with curl" url="/develop/ai/context-engine/agent-memory/rest-api-quickstart" >}}
+  {{< tile-card icon="images/icon_logo/icon-data-structures-64-midnight.png" title="Overview" description="How session and long-term memory work, and what runs in the background" url="/develop/ai/context-engine/agent-memory/overview" >}}
+  {{< tile-card icon="images/dev/icons/icon-redis-code-64-duotone.png" title="Python quickstart" description="Get started with Redis Agent Memory in Python" url="/develop/ai/context-engine/agent-memory/python-sdk-quickstart" >}}
+  {{< tile-card icon="images/dev/icons/icon-redis-code-64-duotone.png" title="TypeScript quickstart" description="Get started with Redis Agent Memory in TypeScript" url="/develop/ai/context-engine/agent-memory/typescript-sdk-quickstart" >}}
+  {{< tile-card icon="images/dev/icons/icon-redis-code-64-duotone.png" title="REST quickstart" description="Get started with Redis Agent Memory using curl" url="/develop/ai/context-engine/agent-memory/rest-api-quickstart" >}}
 </div>
 
 ## Why use Redis Agent Memory?
@@ -138,3 +138,5 @@ After your Redis Agent Memory service is ready, choose a client. Each quickstart
 </div>
 
 For shared integration concepts, identifiers, and authentication, see the [Redis Agent Memory developer guide](/content/develop/ai/context-engine/agent-memory/developer-guide.md).
+
+To generate a complete conversational agent that uses Agent Memory, open the [AI agent builder](/content/develop/ai/agent-builder/_index.md) and select **Redis Iris Conversational Assistant**.

content/develop/ai/context-engine/agent-memory/overview.md

@@ -66,5 +66,6 @@ Both paths are supported. Use direct writes for bulk imports or external knowled
 
 ## Next steps
 
+- Try the [Agent Memory interactive demo](content/develop/ai/context-engine/agent-memory/interactive-demo.md) to watch session memory and long-term memory change during a conversation.
 - [Developer guide]({{< relref "/develop/ai/context-engine/agent-memory/developer-guide" >}}) to connect an application and start writing session events.
 - [Python SDK quickstart]({{< relref "/develop/ai/context-engine/agent-memory/python-sdk-quickstart" >}}), [TypeScript SDK quickstart]({{< relref "/develop/ai/context-engine/agent-memory/typescript-sdk-quickstart" >}}), or [REST API quickstart]({{< relref "/develop/ai/context-engine/agent-memory/rest-api-quickstart" >}}) to see session memory, extraction, and summarization in action.

content/develop/ai/context-engine/agent-memory/python-sdk-quickstart.md

@@ -274,5 +274,6 @@ See [sensitive-data exclusions](/content/operate/iris/agent-memory/create-servic
 ## Next steps
 
 * Review the [Python SDK package and reference](https://pypi.org/project/redis-agent-memory/).
+* Generate a complete conversational agent with the [AI agent builder](/content/develop/ai/agent-builder/_index.md). Select **Redis Iris Conversational Assistant** and **Python**.
 * Try the [TypeScript SDK quickstart](/content/develop/ai/context-engine/agent-memory/typescript-sdk-quickstart.md) or [REST API quickstart](/content/develop/ai/context-engine/agent-memory/rest-api-quickstart.md).
 * Learn when to [create long term memories directly](/content/develop/ai/context-engine/agent-memory/developer-guide.md#create-long-term-memories).

content/develop/ai/context-engine/agent-memory/typescript-sdk-quickstart.md

@@ -316,5 +316,6 @@ See [sensitive-data exclusions](/content/operate/iris/agent-memory/create-servic
 ## Next steps
 
 * Review the [TypeScript SDK package and reference](https://www.npmjs.com/package/@redis-iris/agent-memory).
+* Generate a complete conversational agent with the [AI agent builder](/content/develop/ai/agent-builder/_index.md). Select **Redis Iris Conversational Assistant** and **JavaScript**.
 * Try the [Python SDK quickstart](/content/develop/ai/context-engine/agent-memory/python-sdk-quickstart.md) or [REST API quickstart](/content/develop/ai/context-engine/agent-memory/rest-api-quickstart.md).
 * Learn when to [create long term memories directly](/content/develop/ai/context-engine/agent-memory/developer-guide.md#create-long-term-memories).

content/develop/ai/context-engine/concepts/_index.md

@@ -88,3 +88,4 @@ Run all three fully managed on Redis Cloud, or self-managed on your own infrastr
 - [LangCache concepts]({{< relref "/develop/ai/context-engine/langcache/concepts" >}})
 - [Agent Memory overview]({{< relref "/develop/ai/context-engine/agent-memory/overview" >}})
 - [Context Retriever concepts]({{< relref "/develop/ai/context-engine/context-retriever/concepts" >}})
+- Interactive demos for [LangCache]({{< relref "/develop/ai/context-engine/langcache/interactive-demo" >}}), [Agent Memory]({{< relref "/develop/ai/context-engine/agent-memory/interactive-demo" >}}), and [Context Retriever]({{< relref "/develop/ai/context-engine/context-retriever/interactive-demo" >}}) that run in your browser

content/develop/ai/context-engine/concepts/request-flow.md

@@ -39,6 +39,10 @@ nodes:
         row: 0
         description: |
             LangCache: checks whether a similar prompt is already cached before calling the model.
+        links:
+            demo:
+                label: "Interactive demo"
+                url: "/develop/ai/context-engine/langcache/interactive-demo"
         docsUrl: "/develop/ai/context-engine/langcache"
     agentMemory:
         label: "Agent Memory"
@@ -47,6 +51,10 @@ nodes:
         row: 1
         description: |
             Agent Memory: session and long-term recall. Recalls session history and long-term facts about the user or task.
+        links:
+            demo:
+                label: "Interactive demo"
+                url: "/develop/ai/context-engine/agent-memory/interactive-demo"
         docsUrl: "/develop/ai/context-engine/agent-memory"
     contextRetriever:
         label: "Context Retriever"
@@ -55,6 +63,10 @@ nodes:
         row: 2
         description: |
             Context Retriever: governed tool calls. Calls governed, schema-first tools to fetch business data the agent needs.
+        links:
+            demo:
+                label: "Interactive demo"
+                url: "/develop/ai/context-engine/context-retriever/interactive-demo"
         docsUrl: "/develop/ai/context-engine/context-retriever"
     dataIntegration:
         label: "Data Integration"
@@ -173,3 +185,4 @@ paths:
 - [LangCache concepts]({{< relref "/develop/ai/context-engine/langcache/concepts" >}})
 - [Agent Memory overview]({{< relref "/develop/ai/context-engine/agent-memory/overview" >}})
 - [Context Retriever concepts]({{< relref "/develop/ai/context-engine/context-retriever/concepts" >}})
+- Interactive demos for [LangCache]({{< relref "/develop/ai/context-engine/langcache/interactive-demo" >}}), [Agent Memory]({{< relref "/develop/ai/context-engine/agent-memory/interactive-demo" >}}), and [Context Retriever]({{< relref "/develop/ai/context-engine/context-retriever/interactive-demo" >}}) that run in your browser

content/develop/ai/context-engine/context-retriever/_index.md

@@ -18,10 +18,10 @@ Give your agents structured, governed access to business data, without building
 Context Retriever lets you define your data model once. It automatically generates the retrieval tools agents call at runtime, so agents always work with accurate, live data through a controlled interface rather than guessing at SQL or calling databases directly.
 
 <div class="grid grid-cols-1 md:grid-cols-4 gap-6 my-8">
-  {{< tile-card color="bg-blue-300" title="Concepts" description="Governed tool-calling instead of direct database access, and why it matters" url="/develop/ai/context-engine/context-retriever/concepts" >}}
-  {{< tile-card color="bg-redis-red-500" title="Quick Start" description="Create a Context Retriever service on Redis Cloud" url="/operate/iris/context-retriever/create-service" >}}
-  {{< tile-card color="bg-redis-yellow-500" title="Python SDK & CLI" description="Model entities and deploy tools with the redis-context-retriever package" url="https://pypi.org/project/redis-context-retriever/" >}}
-  {{< tile-card color="bg-teal-300" title="Manage Access" description="Create and manage agent keys to control what each agent can access" url="/operate/iris/context-retriever/view-admin-keys" >}}
+  {{< tile-card icon="images/icon_logo/icon-data-structures-64-midnight.png" title="Concepts" description="Governed tool-calling instead of direct database access, and why it matters" url="/develop/ai/context-engine/context-retriever/concepts" >}}
+  {{< tile-card icon="images/icon_logo/icon-developers-64-midnight.png" title="Quick Start" description="Create a Context Retriever service on Redis Cloud" url="/operate/iris/context-retriever/create-service" >}}
+  {{< tile-card icon="images/dev/icons/icon-redis-code-64-duotone.png" title="Python SDK & CLI" description="Model entities and deploy tools with the redis-context-retriever package" url="https://pypi.org/project/redis-context-retriever/" >}}
+  {{< tile-card icon="images/dev/icons/icon-redis-insight-64-duotone.png" title="Manage Access" description="Create and manage agent keys to control what each agent can access" url="/operate/iris/context-retriever/view-admin-keys" >}}
 </div>
 
 ## What is Context Retriever?

content/develop/ai/context-engine/context-retriever/concepts.md

@@ -72,6 +72,7 @@ See the [AI agent context engine FAQ](https://redis.io/blog/faq-real-time-contex
 
 ## Next steps
 
+- Try the [Context Retriever interactive demo]({{< relref "/develop/ai/context-engine/context-retriever/interactive-demo" >}}) to see a data model become the tools an agent calls.
 - [Create a Context Retriever service]({{< relref "/operate/iris/context-retriever/create-service" >}}) on Redis Cloud.
 - [Install Context Retriever]({{< relref "/operate/iris/context-retriever/self-managed" >}}) on your own Kubernetes infrastructure.
 - Follow the [quickstart]({{< relref "/develop/ai/context-engine/context-retriever/quickstart" >}}) to model entities, generate tools, and call one with the `ctxctl` CLI.

content/develop/ai/context-engine/data-integration/_index.md

@@ -16,9 +16,9 @@ Stream live business data into Redis so agents always work with accurate, up-to-
 Redis Data Integration (RDI) keeps your Redis Cloud database in sync with your existing relational databases using [Change data capture](https://en.wikipedia.org/wiki/Change_data_capture) (CDC). Agents query Redis at full speed without ever querying your production databases directly.
 
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 my-8">
-  {{< tile-card color="bg-redis-red-500" title="Quick Start" description="Get a PostgreSQL pipeline running on Redis Cloud in minutes" url="/operate/rc/rdi/quick-start" >}}
-  {{< tile-card color="bg-violet-300" title="Define Pipeline" description="Configure which tables to sync and how to map them to Redis" url="/operate/rc/rdi/define" >}}
-  {{< tile-card color="bg-teal-300" title="RDI Documentation" description="Installation, configuration, and advanced pipeline options" url="/integrate/redis-data-integration" >}}
+  {{< tile-card icon="images/icon_logo/icon-developers-64-midnight.png" title="Quick Start" description="Get a PostgreSQL pipeline running on Redis Cloud in minutes" url="/operate/rc/rdi/quick-start" >}}
+  {{< tile-card icon="images/icon_logo/icon-data-structures-64-midnight.png" title="Define Pipeline" description="Configure which tables to sync and how to map them to Redis" url="/operate/rc/rdi/define" >}}
+  {{< tile-card icon="images/dev/icons/icon-redis-data-integration-64-duotone.png" title="RDI Documentation" description="Installation, configuration, and advanced pipeline options" url="/integrate/redis-data-integration" >}}
 </div>
 
 ## What is Redis Data Integration?

content/develop/ai/context-engine/langcache/_index.md

@@ -20,10 +20,10 @@ Cut LLM costs and improve response times with semantic caching.
 LangCache checks whether a semantically similar prompt has been answered before and returns the cached response instantly: no LLM call required. When there's no match, your app calls the LLM as usual and stores the result for future use.
 
 <div class="grid grid-cols-1 md:grid-cols-4 gap-6 my-8">
-  {{< tile-card color="bg-blue-300" title="Concepts" description="Why a cache hit isn't binary anymore, and how to choose a similarity threshold" url="/develop/ai/context-engine/langcache/concepts" >}}
-  {{< tile-card color="bg-redis-red-500" title="Quick Start" description="Create a LangCache service on Redis Cloud and make your first API call" url="/operate/iris/langcache/create-service" >}}
-  {{< tile-card color="bg-redis-yellow-500" title="API & SDK Examples" description="Search, store, and manage cache entries with REST, Python, or JS" url="/develop/ai/context-engine/langcache/api-examples" >}}
-  {{< tile-card color="bg-teal-300" title="Monitor Cache" description="Track hit rates, usage, and performance in Redis Cloud" url="/operate/iris/langcache/monitor-cache" >}}
+  {{< tile-card icon="images/icon_logo/icon-data-structures-64-midnight.png" title="Concepts" description="Why a cache hit isn't binary anymore, and how to choose a similarity threshold" url="/develop/ai/context-engine/langcache/concepts" >}}
+  {{< tile-card icon="images/icon_logo/icon-developers-64-midnight.png" title="Quick Start" description="Create a LangCache service on Redis Cloud and make your first API call" url="/operate/iris/langcache/create-service" >}}
+  {{< tile-card icon="images/dev/icons/icon-redis-code-64-duotone.png" title="API & SDK Examples" description="Search, store, and manage cache entries with REST, Python, or JS" url="/develop/ai/context-engine/langcache/api-examples" >}}
+  {{< tile-card icon="images/dev/icons/icon-redis-insight-64-duotone.png" title="Monitor Cache" description="Track hit rates, usage, and performance in Redis Cloud" url="/operate/iris/langcache/monitor-cache" >}}
 </div>
 
 ## What is LangCache?