docs: use theme specific image component and update example card (#2433)

vercel · Jul 27, 2024 · 130e050 · 130e050
1 parent d2c14c7
commit 130e050
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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 />