Feature/document search

package.json

@@ -28,7 +28,7 @@
     "front-matter": "^4.0.2",
     "iframe-resizer-react": "1.0.13",
     "lucide-react": "^0.358.0",
-    "next": "14.1.3",
+    "next": "^14.2.14",
     "react": "^18",
     "react-dom": "^18",
     "react-instantsearch": "^7.7.0",

src/components/CodeDemo.tsx

@@ -4,14 +4,18 @@ import IframeResizer from 'iframe-resizer-react'
 import { DEMO_URL, PRO_DEMO_URL } from '@/utils/constants'
 
 export type CodeDemoProps = {
+  src?: string
   path: string
   isPro?: boolean
 }
 
-export const CodeDemo = ({ path, isPro }: CodeDemoProps) => {
+export const CodeDemo = ({ src, path, isPro }: CodeDemoProps) => {
   return (
-    <div className="shadow-cardHover rounded-[0.625rem] my-12">
-      <IframeResizer src={(isPro ? PRO_DEMO_URL : DEMO_URL) + path} className="w-full h-96" />
+    <div className="shadow-cardHover rounded-[0.625rem] my-12 bg-white">
+      <IframeResizer
+        src={src ? src : (isPro ? PRO_DEMO_URL : DEMO_URL) + path}
+        className="w-full h-96"
+      />
     </div>
   )
 }

src/content/collaboration/documents/semantic-search.mdx

@@ -0,0 +1,71 @@
+---
+title: Semantic Search
+meta:
+  title: Semantic Search | Tiptap Editor Docs
+  description: Semantic Search across your documents. Learn how to set up and use it here in the Docs!
+  category: Collaboration
+---
+
+import { Callout } from '@/components/ui/Callout'
+import { CodeDemo } from '@/components/CodeDemo'
+
+Tiptap Semantic Search brings AI-native search capabilities to your document library, making it easy to discover relationships and connections across all your documents through contextual understanding provided by large language models.
+
+Searching through large document archives can be challenging, especially if you miss the exact keywords. Semantic Search addresses this by interpreting the intent behind the search query and the contextual meaning within your documents. 
+
+The LLM’s interpretation is encoded as numerical representations, known as vectors or embeddings, which capture the semantic meaning of both new and existing content. These embeddings can then be easily compared to retrieve the most relevant documents.
+
+<Callout title="Private Beta" variant="hint">
+  This feature is currently in private beta and available by invite only. Tell us about your use case at [humans@tiptap.dev](mailto:humans@tiptap.dev) to be considered for early access to Tiptap Semantic Search.
+</Callout>
+
+## Live demo
+
+Below is an interactive demo of Tiptap Semantic Search. Type into the editor on the left, and watch as the search results update in real time with the most contextually relevant pages from our public documentation. Discover more details about the demo in our [examples](https://ai-demo.tiptap.dev/preview/Examples/SemanticSearch). 
+
+<CodeDemo src="https://ai-demo.tiptap.dev/preview/Examples/SemanticSearch?hideSource=1" />
+
+## Getting started
+
+### Prerequisites
+
+- Tiptap Collaboration
+- Access to private beta (request an invite [here](mailto:humans@tiptap.dev))
+
+### How it works
+
+When you input a query, the following things happen:
+1. **Embedding**: Your query is transformed into a high-dimensional vector using a model optimized for similarity search.
+2. **Vector search**: This vector is compared with the existing vectors of your document library. The comparison process is based on similarity metrics to identify the most relevant documents.
+3. **Context-aware results**: Documents are ranked according to their semantic similarity to the query, so that even if the words don't match, the most relevant content is surfaced.
+
+We have configured these operations in the background, making the complex process transparent to you as you set up and use this new Tiptap feature. With Tiptap Semantic Search, you can: 
+
+- **Improve search relevance**: Retrieve documents that match the intent of a query, not just keywords.
+- **Understand context**: Recognize synonyms, related concepts, and varying word order to find the most pertinent results.
+- **Enhance user experience**: Deliver more accurate and meaningful search results, improving their interaction with content.
+
+This is particularly valuable for knowledge management systems, document retrieval, idea generation, or any application where precise, context-aware search results are critical.
+
+### Perform a search
+
+To perform a search, use the search endpoint as described [in the REST API documentation](/collaboration/documents/rest-api#search-documents).
+
+```bash
+curl -X POST https://YOUR_APP_ID.collab.tiptap.cloud/api/search \
+  -H "Authorization: YOUR_SECRET_FROM_SETTINGS_AREA" \
+  -H "Content-Type: application/json" \
+  -d '{"content": "Your search terms"}'
+```
+
+<Callout title="Keeping your API key secret" variant="hint">
+  Please make sure that you handle the requests in your own backend in order to keep your API key
+  secret.
+</Callout>
+
+
+## Using Retrieval-Augmented Generation (RAG)
+
+Use RAG to pull relevant information from your library and feed it into large language models, improving the quality of AI-generated content with contextually accurate data. Discover more details about the demo in our [examples](https://ai-demo.tiptap.dev/preview/Examples/RAG). 
+
+<CodeDemo src="https://ai-demo.tiptap.dev/preview/Examples/RAG?hideSource=1" />

src/content/collaboration/sidebar.ts

@@ -80,6 +80,11 @@ export const sidebarConfig: SidebarConfig = {
           href: '/collaboration/documents/conversion',
           tags: ['Beta'],
         },
+        {
+          title: 'Semantic Search',
+          href: '/collaboration/documents/semantic-search',
+          tags: ['Beta'],
+        },
       ],
     },
     {

src/content/examples/advanced/retrieval-augmented-generation-rag.mdx

@@ -0,0 +1,15 @@
+---
+title: Retrieval-Augmented Generation (RAG)
+meta:
+  title: Retrieval-Augmented Generation (RAG) | Tiptap Editor Docs
+  description: Using Tiptap Semantic Search to retrieve context for your Tiptap AI commands.
+  category: Examples
+---
+
+import { CodeDemo } from '@/components/CodeDemo'
+
+The following example shows how you can use [Tiptap Semantic Search](/collaboration/documents/semantic-search) to generate meaningful context for Tiptap AI.
+
+With this approach, your AI commands can use existing documents as knowledge, improving the quality of the answer.
+
+<CodeDemo src="https://ai-demo.tiptap.dev/preview/Examples/RAG" />

src/content/examples/sidebar.ts

@@ -80,6 +80,10 @@ export const sidebarConfig: SidebarConfig = {
           title: 'Interactive React & Vue views',
           href: '/examples/advanced/interactive-react-and-vue-views',
         },
+        {
+          title: 'Retrieval-Augmented Generation (RAG)',
+          href: '/examples/advanced/retrieval-augmented-generation-rag',
+        },
         {
           title: 'React performance',
           href: '/examples/advanced/react-performance',