From 130e05081dc5b45298e671cabfae3c9f8e552f5b Mon Sep 17 00:00:00 2001
From: Nico Albanese <49612682+nicoalbanese@users.noreply.github.com>
Date: Sat, 27 Jul 2024 21:13:21 +0200
Subject: [PATCH] docs: use theme specific image component and update example
 card (#2433)

---
 .../02-providers-and-models.mdx               |  7 ++++++-
 content/docs/02-guides/01-rag-chatbot.mdx     | 14 +++++++++++--
 content/examples/index.mdx                    | 20 +------------------
 3 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/content/docs/02-foundations/02-providers-and-models.mdx b/content/docs/02-foundations/02-providers-and-models.mdx
index a529093323c4..f8290fc5bf42 100644
--- a/content/docs/02-foundations/02-providers-and-models.mdx
+++ b/content/docs/02-foundations/02-providers-and-models.mdx
@@ -13,7 +13,12 @@ To solve these challenges, Vercel AI SDK Core offers a standardized approach to
 
 Here is an overview of the AI SDK Provider Architecture:
 
-![AI SDK Core Provider Architecture](/images/ai-sdk-diagram.png)
+<MDXImage
+  srcLight="/images/ai-sdk-diagram.png"
+  srcDark="/images/ai-sdk-diagram-dark.png"
+  width={800}
+  height={800}
+/>
 
 ## AI SDK Providers
 
diff --git a/content/docs/02-guides/01-rag-chatbot.mdx b/content/docs/02-guides/01-rag-chatbot.mdx
index f4a618b8c27f..bf7424a36ea4 100644
--- a/content/docs/02-guides/01-rag-chatbot.mdx
+++ b/content/docs/02-guides/01-rag-chatbot.mdx
@@ -77,13 +77,23 @@ Chunking refers to the process of breaking down a particular source material int
 
 Once your source material is appropriately chunked, you can embed each one and then store the embedding and the chunk together in a database. Embeddings can be stored in any database that supports vectors. For this tutorial, you will be using [Postgres](https://www.postgresql.org/) alongside the [pgvector](https://github.com/pgvector/pgvector) plugin.
 
-![RAG Guide 1](/images/rag-guide-1.png)
+<MDXImage
+  srcLight="/images/rag-guide-1.png"
+  srcDark="/images/rag-guide-1-dark.png"
+  width={800}
+  height={800}
+/>
 
 ### All Together Now
 
 Combining all of this together, RAG is the process of enabling the model to respond with information outside of it’s training data by embedding a users query, retrieving the relevant source material (chunks) with the highest semantic similarity, and then passing them alongside the initial query as context. Going back to the example where you ask the model for your favorite food, the prompt preparation process would look like this.
 
-![RAG Guide 2](/images/rag-guide-2.png)
+<MDXImage
+  srcLight="/images/rag-guide-2.png"
+  srcDark="/images/rag-guide-2-dark.png"
+  width={800}
+  height={800}
+/>
 
 By passing the appropriate context and refining the model’s objective, you are able to fully leverage its strengths as a reasoning machine.
 
diff --git a/content/examples/index.mdx b/content/examples/index.mdx
index a86fb0b9d3b3..d88126f5582f 100644
--- a/content/examples/index.mdx
+++ b/content/examples/index.mdx
@@ -13,22 +13,4 @@ The Vercel AI SDK is designed to work with different frameworks and environments
 
 Whether you're integrating AI capabilities in a new framework, or want to get started with your existing framework of choice, you can explore examples of how to use the Vercel AI SDK for different use cases based on the framework you choose from the sidebar.
 
-<div className="grid gap-3 w-full grid-cols-1 lg:grid-cols-2">
-  <FrameworkCard
-    title="Next.js App Router"
-    href="/examples/next-app"
-    color="000000"
-  >
-    <img src="/icons/next.svg" width={92} />
-  </FrameworkCard>
-  <FrameworkCard
-    title="Next.js Pages Router"
-    href="/examples/next-pages"
-    color="000000"
-  >
-    <img src="/icons/next.svg" width={92} />
-  </FrameworkCard>
-  <FrameworkCard title="Node.js" href="/examples/node" color="73B054">
-    <img src="/icons/node.svg" width={104} />
-  </FrameworkCard>
-</div>
+<ExampleCards />