cohere-ai · mrmer1 · Mar 3, 2025
@@ -0,0 +1,368 @@
+import React, { useState, useEffect } from 'react';
+
+interface TagCategories {
+  useCases: string[];
+  endpoints: string[];
+  techStack: string[];
+}
+
+const ALL_TAGS: TagCategories = {
+  useCases: [
+    'RAG', 'Agents', 'Search', 'Embeddings', 'Tool Use', 
+    'Reranking', 'Fine-tuning', 'Summarization', 'Classification',
+    'Text Generation', 'Multi-step', 'Semantic Search'
+  ],
+  endpoints: ['Chat', 'Embed', 'Rerank', 'Finetuning'],
+  techStack: ['Langchain', 'LlamaIndex', 'Pinecone', 'Weaviate', 'CrewAI']
+};
+
+interface Cookbook {
+  title: string;
+  description: string;
+  imageSrc: string;
+  tags: {
+    useCases: string[];
+    endpoints: string[];
+    techStack: string[];
+  };
+  href: string;
+  author?: {
+    name: string;
+    image: string;
+  };
+}
+
+const CARD_COLORS = ['bg-[#EEF0EF]', 'bg-[#FDF2F0]', 'bg-[#F8F1F9]', 'bg-[#F0F2FB]'];
+
+// Replace the existing tag style constants with these:
+const tagButtonClass = "px-2 py-1 text-[12px] rounded-full transition-colors cursor-pointer font-normal";
+
+const selectedTagClass = "bg-[#333293] text-white hover:bg-[#333293]/90";
+const unselectedTagClass = "bg-white text-[#666666] border border-[#E5E5E5] hover:bg-gray-50";
+
+export const Cookbooks: React.FC = () => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedTags, setSelectedTags] = useState<{
+    useCases: string[];
+    endpoints: string[];
+    techStack: string[];
+  }>({
+    useCases: [],
+    endpoints: [],
+    techStack: []
+  });
+
+  // Base cookbook data
+  const baseCookbooks: Cookbook[] = [
+    {
+      title: "Agentic Multi-Stage RAG with Cohere Tools API",
+      description: "This cookbook demonstrates how to build a powerful, multi-stage agent with the Cohere platform that can retrieve documents in multiple steps.",
+      imageSrc: "https://via.placeholder.com/400x200?text=Agentic+RAG",
+      tags: {
+        useCases: ['RAG', 'Agents', 'Tool Use'],
+        endpoints: ['Chat', 'Rerank'],
+        techStack: ['Langchain', 'Weaviate']
+      },
+      href: '/page/agentic-multi-stage-rag',
+      author: {
+        name: "Jason Jung",
+        image: "https://fern-image-hosting.s3.amazonaws.com/cohere/0803e3d-Jason_Jung.jpg"
+      }
+    },
+    {
+      title: "Agentic RAG for PDFs with mixed data",
+      description: "Learn how to build a powerful, multi-step chatbot with Cohere's models that can process PDFs containing both text and tables.",
+      imageSrc: "https://via.placeholder.com/400x200?text=Mixed+Data+RAG",
+      tags: {
+        useCases: ['RAG', 'Agents', 'Tool Use'],
+        endpoints: ['Chat', 'Embed', 'Rerank'],
+        techStack: ['LlamaIndex', 'Pinecone']
+      },
+      href: '/page/agentic-rag-mixed-data',
+      author: {
+        name: "Shaan Desai",
+        image: "https://fern-image-hosting.s3.amazonaws.com/cohere/d17fc44-Shaan.jpg"
+      }
+    },
+    {
+      title: "Analysis of Financial Forms",
+      description: "Use Cohere's large language models to build an agent able to analyze financial forms like a 10-K or a 10-Q.",
+      imageSrc: "https://via.placeholder.com/400x200?text=Financial+Analysis",
+      tags: {
+        useCases: ['RAG', 'Embeddings', 'Classification'],
+        endpoints: ['Embed', 'Finetuning'],
+        techStack: ['CrewAI', 'Weaviate']
+      },
+      href: '/page/analysis-of-financial-forms',
+      author: {
+        name: "Alex Barbet",
+        image: "https://fern-image-hosting.s3.amazonaws.com/cohere/bf2c763-Alex.jpg"
+      }
+    },
+    {
+      title: "Analyzing Hacker News with Cohere",
+      description: "Build a generative-AI powered tool to analyze headlines with Cohere's language models.",
+      imageSrc: "https://via.placeholder.com/400x200?text=Hacker+News+Analysis",
+      tags: {
+        useCases: ['Embeddings', 'Classification', 'Summarization'],
+        endpoints: ['Chat', 'Rerank'],
+        techStack: ['Langchain', 'LlamaIndex']
+      },
+      href: '/page/analyzing-hacker-news',
+      author: {
+        name: "Ania Bialas",
+        image: "https://fern-image-hosting.s3.amazonaws.com/cohere/c5dc5a3-Ania.jpg"
+      }
+    },
+    {
+      title: "Article Recommender with Text Embedding",
+      description: "Build a generative-AI tool to recommend articles with Cohere's embedding and classification capabilities.",
+      imageSrc: "https://via.placeholder.com/400x200?text=Article+Recommender",
+      tags: {
+        useCases: ['Embeddings', 'Classification', 'Search'],
+        endpoints: ['Embed', 'Rerank'],
+        techStack: ['Pinecone', 'CrewAI']
+      },
+      href: '/page/article-recommender-with-text-embeddings',
+      author: {
+        name: "Giannis Chatziveroglou",
+        image: "https://fern-image-hosting.s3.amazonaws.com/cohere/73153cb-giannis.jpeg"
+      }
+    },
+    {
+      title: "Basic Multi-Step Tool Use with Cohere",
+      description: "Create a multi-step, tool-using AI agent with Cohere's tool use functionality.",
+      imageSrc: "https://via.placeholder.com/400x200?text=Multi-Step+Tool+Use",
+      tags: {
+        useCases: ['Agents', 'Tool Use', 'Multi-step'],
+        endpoints: ['Chat', 'Finetuning'],
+        techStack: ['Weaviate', 'Langchain']
+      },
+      href: '/page/basic-multi-step',
+      author: {
+        name: "Komal Teru",
+        image: "https://fern-image-hosting.s3.amazonaws.com/cohere/7026fcc-komal-headshot.jpg"
+      }
+    },
+    {
+      title: "Basic RAG: Retrieval-Augmented Generation",
+      description: "Learn how to work with Cohere's basic retrieval-augmented generation functionality.",
+      imageSrc: "https://via.placeholder.com/400x200?text=Basic+RAG",
+      tags: {
+        useCases: ['RAG', 'Embeddings', 'Text Generation'],
+        endpoints: ['Chat', 'Embed'],
+        techStack: ['LlamaIndex', 'Pinecone']
+      },
+      href: '/page/basic-rag',
+      author: {
+        name: "Youran Qi",
+        image: "https://fern-image-hosting.s3.amazonaws.com/cohere/929cb1c-youran-headshot.jpg"
+      }
+    },
+    {
+      title: "Basic Semantic Search with Cohere Models",
+      description: "Implement basic semantic search with Cohere's embedding models.",
+      imageSrc: "https://via.placeholder.com/400x200?text=Semantic+Search",
+      tags: {
+        useCases: ['Search', 'Embeddings', 'Semantic Search'],
+        endpoints: ['Embed', 'Rerank'],
+        techStack: ['Weaviate', 'CrewAI']
+      },
+      href: '/page/basic-semantic-search',
+      author: {
+        name: "Mike Mao",
+        image: "https://fern-image-hosting.s3.amazonaws.com/cohere/d514b09-mike-headshot.jpg"
+      }
+    },
+    {
+      title: "Calendar Agent with Native Multi Step Tool",
+      description: "Use Cohere Chat API with list_calendar_events and create_calendar_event tools to book appointments.",
+      imageSrc: "https://via.placeholder.com/400x200?text=Calendar+Agent",
+      tags: {
+        useCases: ['Agents', 'Tool Use', 'Multi-step'],
+        endpoints: ['Chat', 'Finetuning'],
+        techStack: ['Langchain', 'LlamaIndex']
+      },
+      href: '/page/calendar-agent',
+      author: {
+        name: "Aal Patankar",
+        image: "https://fern-image-hosting.s3.amazonaws.com/cohere/d48e622-Aal.jpg"
+      }
+    },
+  ];
+
+  // Create an array of 27 cookbooks by spreading the base cookbooks three times
+  const cookbooks: Cookbook[] = [
+    ...baseCookbooks,
+    ...baseCookbooks.map(cookbook => ({
+      ...cookbook,
+      href: `${cookbook.href}-2`, // Add suffix to make hrefs unique
+    })),
+    ...baseCookbooks.map(cookbook => ({
+      ...cookbook,
+      href: `${cookbook.href}-3`, // Add suffix to make hrefs unique
+    }))
+  ];
+
+  // Filter cookbooks based on search query and selected tags
+  const filteredCookbooks = cookbooks.filter(cookbook => {
+    const matchesQuery = searchQuery === '' || 
+      cookbook.title.toLowerCase().includes(searchQuery.toLowerCase());
+
+    const matchesUseCases = selectedTags.useCases.length === 0 || 
+      selectedTags.useCases.every(tag => cookbook.tags.useCases.includes(tag));
+
+    const matchesEndpoints = selectedTags.endpoints.length === 0 || 
+      selectedTags.endpoints.every(tag => cookbook.tags.endpoints.includes(tag));
+
+    const matchesTechStack = selectedTags.techStack.length === 0 || 
+      selectedTags.techStack.every(tag => cookbook.tags.techStack.includes(tag));
+
+    return matchesQuery && matchesUseCases && matchesEndpoints && matchesTechStack;
+  });
+
+  // Function to get random color from array
+  const getRandomColor = (index: number) => {
+    return CARD_COLORS[index % CARD_COLORS.length];
+  };
+
+  // Helper function to check if a tag is selected
+  const isTagSelected = (category: keyof TagCategories, tag: string) => {
+    return selectedTags[category].includes(tag);
+  };
+
+  // Helper function to toggle a tag
+  const toggleTag = (category: keyof TagCategories, tag: string) => {
+    setSelectedTags(prev => ({
+      ...prev,
+      [category]: prev[category].includes(tag)
+        ? prev[category].filter(t => t !== tag)
+        : [...prev[category], tag]
+    }));
+  };
+
+  return (
+    <div className="w-full">
+      {/* Sidebar and main content container */}
+      <div className="flex flex-col md:flex-row gap-8">
+        {/* Sidebar */}
+        <div className="w-full md:w-64 flex-shrink-0">
+          <div className="sticky top-4">
+            {/* Use Cases */}
+            <div className="mb-6">
+              <h3 className="text-sm font-medium mb-4">Use Cases</h3>
+              <div className="flex flex-wrap gap-2">
+                {ALL_TAGS.useCases.map(tag => (
+                  <button
+                    key={tag}
+                    onClick={() => toggleTag('useCases', tag)}
+                    className={`${tagButtonClass} ${
+                      isTagSelected('useCases', tag) ? selectedTagClass : unselectedTagClass
+                    }`}
+                  >
+                    {tag}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Endpoints */}
+            <div className="mb-6">
+              <h3 className="text-sm font-medium mb-4">Endpoints</h3>
+              <div className="flex flex-wrap gap-2">
+                {ALL_TAGS.endpoints.map(tag => (
+                  <button
+                    key={tag}
+                    onClick={() => toggleTag('endpoints', tag)}
+                    className={`${tagButtonClass} ${
+                      isTagSelected('endpoints', tag) ? selectedTagClass : unselectedTagClass
+                    }`}
+                  >
+                    {tag}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Tools */}
+            <div className="mb-6">
+              <h3 className="text-sm font-medium mb-4">Tools</h3>
+              <div className="flex flex-wrap gap-2">
+                {ALL_TAGS.techStack.map(tag => (
+                  <button
+                    key={tag}
+                    onClick={() => toggleTag('techStack', tag)}
+                    className={`${tagButtonClass} ${
+                      isTagSelected('techStack', tag) ? selectedTagClass : unselectedTagClass
+                    }`}
+                  >
+                    {tag}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Main content */}
+        <div className="flex-1">
+          <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
+            <div className="w-full">
+              <div className="relative">
+                <input
+                  type="text"
+                  placeholder="Search"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="w-full px-4 py-2 pl-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+                <div className="absolute left-3 top-1/2 transform -translate-y-1/2">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="text-gray-400" viewBox="0 0 16 16">
+                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {filteredCookbooks.map((cookbook, index) => (
+              <a
+                key={index}
+                href={cookbook.href}
+                className={`block border border-gray-200 rounded-lg hover:shadow-md transition-shadow ${getRandomColor(index)}`}
+              >
+                <div className="p-6">
+                  <h3 className="text-base font-medium text-gray-800 mb-3">{cookbook.title}</h3>
+
+                  {cookbook.author && (
+                    <div className="flex items-center mb-4">
+                      <img 
+                        src={cookbook.author.image} 
+                        alt={cookbook.author.name}
+                        className="w-5 h-5 rounded-full mr-2"
+                      />
+                      <span className="text-xs text-gray-600">{cookbook.author.name}</span>
+                    </div>
+                  )}
+
+                  {/* Display only endpoint tags */}
+                  <div className="flex flex-wrap gap-1.5">
+                    {cookbook.tags.endpoints.map((tag, tagIndex) => (
+                      <span
+                        key={tagIndex}
+                        className="px-1.5 py-0.5 text-[10px] text-gray-600 bg-white/50 rounded-full"
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};