1import React from 'react'
2import { Title } from '@site/src/components/atoms/title/title'
3import { Paragraph } from '@site/src/components/atoms/paragraph/paragraph'
4import { Container } from '@site/src/components/atoms/container/container'
5import { Recipe } from '@site/src/components/molecules/recipe/recipe'
6import { Link } from '@site/src/components/atoms/link/link'
7import { Icon } from '@site/src/components/atoms/icon/icon'
8
9interface RecipeData {
10  title: string
11  description: string
12  path: string
13  tags: string[]
14  videoUrl?: string
15}
16
17const recipeBaseUrl = 'https://github.com/spiceai/cookbook/blob/trunk'
18
19const recipes: RecipeData[] = [
20  // Core scenarios
21  {
22    title: 'Federated SQL Query',
23    description: 'Query data from S3, PostgreSQL, and Dremio in a single query.',
24    path: '/federation/README.md',
25    tags: ['core', 'federation', 'sql']
26  },
27  // Sample Applications and guides
28  {
29    title: 'Command Query Responsibility Segregation (CQRS)',
30    description: 'Sample application implementing the CQRS pattern with Spice.',
31    path: '/cqrs/README.md',
32    tags: ['sample', 'cqrs', 'application']
33  },
34  {
35    title: 'Intelligent Security Copilot',
36    description: 'Analyze real-time data access patterns with Spice.ai.',
37    path: '/guides/security-analyzer/README.md',
38    tags: ['guide', 'security', 'analyzer']
39  },
40  // Models & AI
41  {
42    title: 'Azure OpenAI Models',
43    description: 'Connect and use Azure OpenAI models with Spice.',
44    path: '/azure_openai/README.md',
45    tags: ['ai', 'openai', 'azure']
46  },
47  {
48    title: 'Running Llama3 Locally',
49    description: 'Use the Llama family of models locally from HuggingFace using Spice.',
50    path: '/llama/README.md',
51    tags: ['ai', 'llama', 'huggingface'],
52    videoUrl: 'https://youtu.be/I2i6uZKBbd4'
53  },
54  {
55    title: 'OpenAI SDK',
56    description: 'Use the OpenAI SDK to connect to models hosted on Spice.',
57    path: '/openai_sdk/README.md',
58    tags: ['ai', 'openai', 'sdk', 'core']
59  },
60  {
61    title: 'LLM Memory',
62    description: 'Persistent memory for language models.',
63    path: '/llm-memory/README.md',
64    tags: ['ai', 'llm', 'memory'],
65    videoUrl: 'https://youtu.be/uc8TCAPu1IM'
66  },
67  {
68    title: 'Text to SQL (NSQL)',
69    description:
70      'Ask natural language (NLP) questions of your datasets using the built-in text-to-SQL tool.',
71    path: '/text-to-sql/README.md',
72    tags: ['ai', 'text-to-sql', 'nsql', 'tools']
73  },
74  {
75    title: 'Nvidia NIM',
76    description: 'Deploy Nvidia NIM infrastructure, on Kubernetes, with GPUs connected to Spice.',
77    path: '/nvidia-nim/README.md',
78    tags: ['ai', 'nvidia', 'nim']
79  },
80  {
81    title: 'Searching GitHub Files',
82    description: 'Search GitHub files with embeddings and vector similarity search.',
83    path: '/search_github_files/README.md',
84    tags: ['ai', 'github', 'search'],
85    videoUrl: 'https://youtu.be/5y26MveEJ8c'
86  },
87  {
88    title: 'xAI Models',
89    description: 'Use xAI models such as Grok.',
90    path: '/models/xai/README.md',
91    tags: ['ai', 'xai', 'models'],
92    videoUrl: 'https://youtu.be/-7RkAsqQLdk'
93  },
94  {
95    title: 'DeepSeek Model',
96    description: 'Use DeepSeek model through Spice.',
97    path: '/deepseek/README.md',
98    tags: ['ai', 'deepseek', 'models']
99  },
100  {
101    title: 'Model-Context-Protocol (MCP)',
102    description: 'Use Spice to connect to or host MCP servers.',
103    path: '/mcp/README.md',
104    tags: ['ai', 'mcp', 'tools']
105  },
106  // Data Acceleration
107  {
108    title: 'DuckDB Data Accelerator',
109    description: 'Accelerate data locally using DuckDB.',
110    path: '/duckdb/accelerator/README.md',
111    tags: ['core', 'acceleration', 'duckdb', 'data'],
112    videoUrl: 'https://youtu.be/hFvVz5NGpaw'
113  },
114  {
115    title: 'PostgreSQL Data Accelerator',
116    description: 'Accelerate data locally using PostgreSQL.',
117    path: '/postgres/accelerator/README.md',
118    tags: ['acceleration', 'postgresql', 'data']
119  },
120  {
121    title: 'SQLite Data Accelerator',
122    description: 'Accelerate data locally using SQLite.',
123    path: '/sqlite/accelerator/README.md',
124    tags: ['acceleration', 'sqlite', 'data']
125  },
126  {
127    title: 'Apache Arrow Data Accelerator',
128    description: 'Accelerate data using Apache Arrow.',
129    path: '/arrow/README.md',
130    tags: ['acceleration', 'apache', 'arrow']
131  },
132  // Data Connectors
133  {
134    title: 'PostgreSQL Connector',
135    description: 'Connect to and query PostgreSQL databases.',
136    path: '/postgres/connector/README.md',
137    tags: ['connector', 'postgresql', 'query']
138  },
139  {
140    title: 'AWS RDS PostgreSQL',
141    description: 'Connect to AWS RDS PostgreSQL instances.',
142    path: '/postgres/rds/README.md',
143    tags: ['connector', 'aws', 'rds', 'postgresql']
144  },
145  {
146    title: 'Supabase PostgreSQL',
147    description: 'Connect to Supabase PostgreSQL databases.',
148    path: '/postgres/supabase/README.md',
149    tags: ['connector', 'supabase', 'postgresql']
150  },
151  {
152    title: 'MySQL Connector',
153    description: 'Connect to and query MySQL databases.',
154    path: '/mysql/connector/README.md',
155    tags: ['connector', 'mysql', 'query']
156  },
157  {
158    title: 'AWS RDS Aurora MySQL',
159    description: 'Connect to AWS RDS Aurora with MySQL compatibility.',
160    path: '/mysql/rds-aurora/README.md',
161    tags: ['connector', 'aws', 'rds', 'aurora', 'mysql']
162  },
163  {
164    title: 'PlanetScale MySQL',
165    description: 'Connect to PlanetScale MySQL databases.',
166    path: '/mysql/planetscale/README.md',
167    tags: ['connector', 'planetscale', 'mysql']
168  },
169  {
170    title: 'Clickhouse Connector',
171    description: 'Connect to and query Clickhouse databases.',
172    path: '/clickhouse/README.md',
173    tags: ['connector', 'clickhouse', 'query']
174  },
175  {
176    title: 'Databricks Connector',
177    description: 'Connect to and query Databricks instances using Delta Lake or Spark Connect.',
178    path: '/databricks/README.md',
179    tags: ['connector', 'databricks', 'delta', 'lake', 'spark', 'connect']
180  },
181  {
182    title: 'Delta Lake Connector',
183    description: 'Query data from Delta Lake tables.',
184    path: '/delta-lake/README.md',
185    tags: ['connector', 'delta', 'lake']
186  },
187  {
188    title: 'Debezium CDC from Postgres',
189    description: 'Stream changes from PostgreSQL using Debezium CDC.',
190    path: '/cdc-debezium/README.md',
191    tags: ['connector', 'debezium', 'cdc', 'postgresql']
192  },
193  {
194    title: 'Debezium CDC with SASL/SCRAM',
195    description: 'Stream MySQL changes using Debezium with SASL/SCRAM authentication.',
196    path: '/cdc-debezium/sasl-scram/README.md',
197    tags: ['connector', 'debezium', 'cdc', 'sasl', 'scram', 'mysql']
198  },
199  {
200    title: 'Dremio Connector',
201    description: 'Connect to and query Dremio.',
202    path: '/dremio/README.md',
203    tags: ['connector', 'dremio', 'query']
204  },
205  {
206    title: 'DuckDB Connector',
207    description: 'Query DuckDB databases with sample TPCH data.',
208    path: '/duckdb/connector/README.md',
209    tags: ['connector', 'duckdb', 'query']
210  },
211  {
212    title: 'File Connector',
213    description: 'Query data from local files.',
214    path: '/file/README.md',
215    tags: ['connector', 'file', 'query']
216  },
217  {
218    title: 'FTP Connector',
219    description: 'Query data from FTP servers.',
220    path: '/ftp/README.md',
221    tags: ['connector', 'ftp', 'query']
222  },
223  {
224    title: 'GitHub Connector',
225    description: 'Connect to and query GitHub data.',
226    path: '/github/README.md',
227    tags: ['connector', 'github', 'query']
228  },
229  {
230    title: 'GraphQL Connector',
231    description: 'Query data from GraphQL endpoints.',
232    path: '/graphql/README.md',
233    tags: ['connector', 'graphql', 'query']
234  },
235  {
236    title: 'MSSQL Connector',
237    description: 'Connect to Microsoft SQL Server databases.',
238    path: '/mssql/README.md',
239    tags: ['connector', 'mssql', 'query']
240  },
241  {
242    title: 'ODBC Connector',
243    description: 'Connect to databases using ODBC.',
244    path: '/odbc/README.md',
245    tags: ['connector', 'odbc', 'query']
246  },
247  {
248    title: 'S3 Connector',
249    description: 'Query data from S3 compatible storage.',
250    path: '/s3/README.md',
251    tags: ['connector', 's3', 'query']
252  },
253  {
254    title: 'SharePoint Connector',
255    description: 'Connect to SharePoint and OneDrive for Business.',
256    path: '/sharepoint/README.md',
257    tags: ['connector', 'sharepoint', 'onedrive']
258  },
259  {
260    title: 'Snowflake Connector',
261    description: 'Connect to and query Snowflake databases.',
262    path: '/snowflake/README.md',
263    tags: ['connector', 'snowflake', 'query']
264  },
265  {
266    title: 'Spice.ai Cloud Connector',
267    description: 'Connect to the Spice.ai Cloud Platform.',
268    path: '/spiceai/README.md',
269    tags: ['connector', 'spiceai', 'cloud']
270  },
271  {
272    title: 'Apache Spark Connector',
273    description: 'Connect to and query Apache Spark.',
274    path: '/spark/README.md',
275    tags: ['connector', 'apache', 'spark', 'query']
276  },
277  {
278    title: 'Spice.ai Cloud Platform Catalog',
279    description: 'Connect to the Spice.ai Cloud Platform catalog.',
280    path: '/catalogs/spiceai/README.md',
281    tags: ['catalog', 'spiceai', 'cloud']
282  },
283  {
284    title: 'Databricks Unity Catalog',
285    description: 'Connect to Databricks Unity catalog.',
286    path: '/catalogs/databricks/README.md',
287    tags: ['catalog', 'databricks', 'unity']
288  },
289  {
290    title: 'Unity Catalog',
291    description: 'Connect to Unity catalog.',
292    path: '/catalogs/unity_catalog/README.md',
293    tags: ['catalog', 'unity']
294  },
295  {
296    title: 'Iceberg Catalog',
297    description: 'Connect to Iceberg catalog.',
298    path: '/catalogs/iceberg/README.md',
299    tags: ['catalog', 'iceberg']
300  },
301  {
302    title: 'Sales BI with Apache Superset',
303    description: 'Visualize data in Spice with Apache Superset.',
304    path: '/sales-bi/README.md',
305    tags: ['visualization', 'bi', 'superset']
306  },
307  {
308    title: 'Grafana Datasource',
309    description: 'Add Spice as a Grafana datasource.',
310    path: '/grafana-datasource/README.md',
311    tags: ['visualization', 'grafana', 'datasource']
312  },
313  {
314    title: 'IMAP Emails',
315    description: 'Federated SQL query of mail across IMAP email servers',
316    path: '/imap/README.md',
317    tags: ['connector', 'imap', 'datasource']
318  },
319  // Deployment
320  {
321    title: 'Deploying to Kubernetes',
322    description: 'Deploy Spice.ai on Kubernetes.',
323    path: '/kubernetes/README.md',
324    tags: ['deployment', 'kubernetes']
325  },
326  {
327    title: 'Running in Docker',
328    description: 'Run Spice.ai in Docker containers.',
329    path: '/docker/README.md',
330    tags: ['deployment', 'docker']
331  },
332
333  // Performance
334  {
335    title: 'TPC-H Benchmarking',
336    description: 'Benchmark performance using TPC-H.',
337    path: '/tpc-h/README.md',
338    tags: ['performance', 'benchmarking', 'tpc-h']
339  },
340  {
341    title: 'Results Caching',
342    description: 'Cache query results for improved performance.',
343    path: '/caching/README.md',
344    tags: ['performance', 'caching']
345  },
346  {
347    title: 'Indexes on Accelerated Data',
348    description: 'Create and manage indexes on accelerated data.',
349    path: '/acceleration/indexes/README.md',
350    tags: ['performance', 'indexes', 'acceleration']
351  },
352
353  // Configuration
354  {
355    title: 'Data Retention Policy',
356    description: 'Configure data retention policies.',
357    path: '/retention/README.md',
358    tags: ['configuration', 'retention']
359  },
360  {
361    title: 'Refresh Data Window',
362    description: 'Configure data refresh windows.',
363    path: '/refresh-data-window/README.md',
364    tags: ['configuration', 'refresh']
365  },
366  {
367    title: 'Advanced Data Refresh',
368    description: 'Advanced configuration for data refresh.',
369    path: '/acceleration/data-refresh/README.md',
370    tags: ['configuration', 'data', 'refresh']
371  },
372  {
373    title: 'Data Quality with Constraints',
374    description: 'Add data quality constraints.',
375    path: '/acceleration/constraints/README.md',
376    tags: ['configuration', 'data', 'quality', 'constraints']
377  },
378
379  // Client SDKs
380  {
381    title: 'Rust SDK',
382    description: 'Query Spice.ai using the Rust SDK.',
383    path: '/client-sdk/spice-rs-sdk-sample/README.md',
384    tags: ['sdk', 'rust']
385  },
386  {
387    title: 'Python SDK',
388    description: 'Query Spice.ai using the Python SDK.',
389    path: '/client-sdk/spicepy-sdk-sample/README.md',
390    tags: ['sdk', 'python']
391  },
392  {
393    title: 'Go SDK',
394    description: 'Query Spice.ai using the Go SDK.',
395    path: '/client-sdk/gospice-sdk-sample/README.md',
396    tags: ['sdk', 'go']
397  },
398  {
399    title: 'JavaScript SDK',
400    description: 'Query Spice.ai using the JavaScript SDK.',
401    path: '/client-sdk/spice.js-sdk-sample/README.md',
402    tags: ['sdk', 'javascript']
403  },
404  {
405    title: 'Java SDK',
406    description: 'Query Spice.ai using the Java SDK.',
407    path: '/client-sdk/spice-java-sdk-sample/README.md',
408    tags: ['sdk', 'java']
409  },
410  // Clients
411  {
412    title: 'Python ADBC Client',
413    description: 'Query Spice using ADBC and Parameterized Queries with Python.',
414    path: '/clients/adbc/README.md',
415    tags: ['client', 'python', 'adbc', 'parameterized queries']
416  },
417  // Security
418  {
419    title: 'TLS Encryption',
420    description: 'Enable encryption in transit using TLS.',
421    path: '/tls/README.md',
422    tags: ['security', 'tls']
423  },
424  {
425    title: 'API Key Authentication',
426    description: 'Secure access with API key authentication.',
427    path: '/api_key/README.md',
428    tags: ['security', 'api', 'key']
429  },
430
431  // Advanced
432  {
433    title: 'Local Dataset Replication',
434    description: 'Link datasets in a parent/child relationship within the current Spicepod.',
435    path: '/localpod/README.md',
436    tags: ['advanced', 'replication', 'dataset']
437  }
438]
439
440const RecipeGroup: React.FC<{ recipes: RecipeData[] }> = ({ recipes }) => {
441  const getGridClass = (count: number) => {
442    if (count === 1) return 'grid-cols-1 max-w-sm mx-auto'
443    if (count === 2) return 'grid-cols-1 sm:grid-cols-2 max-w-2xl mx-auto'
444    if (count === 3) return 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 max-w-4xl mx-auto'
445    return 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'
446  }
447
448  return (
449    <section className='mx-auto px-6 md:max-w-[1020px] md:px-0'>
450      <div className={`grid gap-4 ${getGridClass(recipes.length)}`}>
451        {recipes.map((recipe, index) => (
452          <div key={index} className='h-full'>
453            <Recipe
454              title={recipe.title}
455              description={recipe.description}
456              href={recipeBaseUrl + recipe.path}
457              videoUrl={recipe.videoUrl}
458              className='h-full px-4 py-4 text-xs gap-4 md:gap-8 md:px-8 md:py-8'
459            />
460          </div>
461        ))}
462      </div>
463    </section>
464  )
465}
466
467export function CookbookPage() {
468  const filterByTag = (...tags: string[]) =>
469    recipes.filter((r) => r.tags.some((t) => tags.includes(t)))
470
471  const description = `${recipes.length} guides and samples to help you build data-grounded AI apps and agents with Spice.ai Open-Source. Find ready-to-use examples for data acceleration, AI agents, LLM memory, and more.`
472
473  return (
474    <div className='tailwind font-sans'>
475      <Title as='h1' variant='large' className='mx-auto mb-7 mt-8 md:text-center xl:max-w-[1020px]'>
476        🧑‍🍳 Spice.ai OSS <span className='text-primary'>Cookbook</span>
477      </Title>
478
479      <Paragraph className='mb-6 md:text-center mx-auto px-6 md:max-w-[843px]'>
480        {description}
481      </Paragraph>
482
483      <Paragraph className='mb-6 md:text-center mx-auto px-6 md:max-w-[843px] hover:underline'>
484        <Link
485          className='inline-flex gap-1.5'
486          target='_blank'
487          href='https://github.com/spiceai/cookbook/blob/trunk/README.md'
488        >
489          <Icon iconName='github' /> Contribute to the Cookbook on GitHub!
490        </Link>
491      </Paragraph>
492
493      <Container className='mt-6 mb-20'>
494        <Title className='mb-14 text-center'>Featured Recipes</Title>
495
496        <section className='mx-auto px-6 md:max-w-[843px] md:px-0'>
497          <div className='flex flex-col gap-6 md:flex-row'>
498            <div className='flex w-full flex-col gap-6 md:w-1/2'>
499              <Recipe
500                title='Federated SQL Query'
501                description='Join S3, PostgreSQL, and Dremio data in one SQL query.'
502                href={`${recipeBaseUrl}/federation/README.md`}
503              />
504              <Recipe
505                title='Run Llama3 Locally'
506                description='Use Llama models from HuggingFace with Spice.'
507                href={`${recipeBaseUrl}/llama/README.md`}
508                videoUrl='https://youtu.be/I2i6uZKBbd4'
509              />
510            </div>
511            <div className='flex w-full flex-col gap-6 md:w-1/2 md:pt-20'>
512              <Recipe
513                title='Data Acceleration with DuckDB'
514                description='Speed up queries using DuckDB.'
515                href={`${recipeBaseUrl}/duckdb/accelerator/README.md`}
516                videoUrl='https://youtu.be/hFvVz5NGpaw'
517              />
518              <Recipe
519                title='LLM Memory'
520                description='Persistent memory for language models'
521                href={`${recipeBaseUrl}/llm-memory/README.md`}
522                videoUrl='https://youtu.be/uc8TCAPu1IM'
523              />
524            </div>
525          </div>
526        </section>
527      </Container>
528
529      <Container className='mt-6 mb-20'>
530        <Title className='mb-4 text-center'>Sample Applications and Guides</Title>
531        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
532          Example apps and guides for real-world Spice.ai usage and best practices.
533        </Paragraph>
534
535        <RecipeGroup recipes={filterByTag('sample')} />
536      </Container>
537
538      <Container className='mt-6 mb-20'>
539        <Title className='mb-4 text-center'>Core Features</Title>
540        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
541          Discover core capabilities like data federation, acceleration, search, and LLM inference
542          to enhance your applications.
543        </Paragraph>
544
545        <RecipeGroup recipes={filterByTag('core')} />
546      </Container>
547
548      <Container className='mt-6 mb-20'>
549        <Title className='mb-4 text-center'>Models, AI, and Agents</Title>
550        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
551          Integrate with popular AI models, LLMs, and build intelligent agents using Spice.ai.
552        </Paragraph>
553
554        <RecipeGroup recipes={filterByTag('ai')} />
555      </Container>
556
557      <Container className='mt-6 mb-20'>
558        <Title className='mb-4 text-center'>
559          Data Acceleration, Materialization, and Federation
560        </Title>
561        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
562          Optimize query performance with local acceleration, data materialization, and federation
563          techniques.
564        </Paragraph>
565
566        <RecipeGroup recipes={filterByTag('acceleration')} />
567      </Container>
568
569      <Container className='mt-6 mb-20'>
570        <Title className='mb-4 text-center'>Search & Embeddings</Title>
571        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
572          Implement advanced search capabilities and leverage embeddings for vector similarity
573          search.
574        </Paragraph>
575
576        <RecipeGroup recipes={filterByTag('search')} />
577      </Container>
578
579      <Container className='mt-6 mb-20'>
580        <Title className='mb-4 text-center'>Data Connectors</Title>
581        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
582          Connect to various data sources and systems to query, analyze, and manage your data
583          efficiently.
584        </Paragraph>
585
586        <RecipeGroup recipes={filterByTag('connector')} />
587      </Container>
588
589      <Container className='mt-6 mb-20'>
590        <Title className='mb-4 text-center'>Catalog Connectors</Title>
591        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
592          Connect to data catalogs to discover, manage, and utilize your data assets effectively.
593        </Paragraph>
594
595        <RecipeGroup recipes={filterByTag('catalog')} />
596      </Container>
597
598      <Container className='mt-6 mb-20'>
599        <Title className='mb-4 text-center'>Visualization</Title>
600        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
601          Visualize data with BI and analytics tools.
602        </Paragraph>
603
604        <RecipeGroup recipes={filterByTag('visualization')} />
605      </Container>
606
607      <Container className='mt-6 mb-20'>
608        <Title className='mb-4 text-center'>API Clients</Title>
609        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
610          Use API clients for data access and integration.
611        </Paragraph>
612
613        <RecipeGroup recipes={filterByTag('client')} />
614      </Container>
615
616      <Container className='mt-6 mb-20'>
617        <Title className='mb-4 text-center'>Deployment</Title>
618        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
619          Deploy Spice.ai in different environments.
620        </Paragraph>
621
622        <RecipeGroup recipes={filterByTag('deployment')} />
623      </Container>
624
625      <Container className='mt-6 mb-20'>
626        <Title className='mb-4 text-center'>Performance and Benchmarking</Title>
627        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
628          Measure and optimize performance with benchmarks and best practices for your Spice.ai
629          deployment.
630        </Paragraph>
631
632        <RecipeGroup recipes={filterByTag('performance')} />
633      </Container>
634
635      <Container className='mt-6 mb-20'>
636        <Title className='mb-4 text-center'>Configuration</Title>
637        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
638          Fine-tune your Spice.ai deployment with advanced configuration options for optimal
639          performance.
640        </Paragraph>
641
642        <RecipeGroup recipes={filterByTag('configuration')} />
643      </Container>
644
645      <Container className='mt-6 mb-20'>
646        <Title className='mb-4 text-center'>SDKs</Title>
647        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
648          Use SDKs for different programming languages.
649        </Paragraph>
650
651        <RecipeGroup recipes={filterByTag('sdk')} />
652      </Container>
653
654      <Container className='mt-6 mb-20'>
655        <Title className='mb-4 text-center'>Security</Title>
656        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
657          Secure your Spice.ai deployment and data access with robust security practices and
658          configurations.
659        </Paragraph>
660
661        <RecipeGroup recipes={filterByTag('security')} />
662      </Container>
663    </div>
664  )
665}
666

1import React from 'react'
2import { Title } from '@site/src/components/atoms/title/title'
3import { Paragraph } from '@site/src/components/atoms/paragraph/paragraph'
4import { Container } from '@site/src/components/atoms/container/container'
5import { Recipe } from '@site/src/components/molecules/recipe/recipe'
6import { Link } from '@site/src/components/atoms/link/link'
7import { Icon } from '@site/src/components/atoms/icon/icon'
8
9interface RecipeData {
10  title: string
11  description: string
12  path: string
13  tags: string[]
14  videoUrl?: string
15}
16
17const recipeBaseUrl = 'https://github.com/spiceai/cookbook/blob/trunk'
18
19const recipes: RecipeData[] = [
20  // Core scenarios
21  {
22    title: 'Federated SQL Query',
23    description: 'Query data from S3, PostgreSQL, and Dremio in a single query.',
24    path: '/federation/README.md',
25    tags: ['core', 'federation', 'sql']
26  },
27  // Sample Applications and guides
28  {
29    title: 'Command Query Responsibility Segregation (CQRS)',
30    description: 'Sample application implementing the CQRS pattern with Spice.',
31    path: '/cqrs/README.md',
32    tags: ['sample', 'cqrs', 'application']
33  },
34  {
35    title: 'Intelligent Security Copilot',
36    description: 'Analyze real-time data access patterns with Spice.ai.',
37    path: '/guides/security-analyzer/README.md',
38    tags: ['guide', 'security', 'analyzer']
39  },
40  // Models & AI
41  {
42    title: 'Azure OpenAI Models',
43    description: 'Connect and use Azure OpenAI models with Spice.',
44    path: '/azure_openai/README.md',
45    tags: ['ai', 'openai', 'azure']
46  },
47  {
48    title: 'Running Llama3 Locally',
49    description: 'Use the Llama family of models locally from HuggingFace using Spice.',
50    path: '/llama/README.md',
51    tags: ['ai', 'llama', 'huggingface'],
52    videoUrl: 'https://youtu.be/I2i6uZKBbd4'
53  },
54  {
55    title: 'OpenAI SDK',
56    description: 'Use the OpenAI SDK to connect to models hosted on Spice.',
57    path: '/openai_sdk/README.md',
58    tags: ['ai', 'openai', 'sdk', 'core']
59  },
60  {
61    title: 'LLM Memory',
62    description: 'Persistent memory for language models.',
63    path: '/llm-memory/README.md',
64    tags: ['ai', 'llm', 'memory'],
65    videoUrl: 'https://youtu.be/uc8TCAPu1IM'
66  },
67  {
68    title: 'Text to SQL (NSQL)',
69    description:
70      'Ask natural language (NLP) questions of your datasets using the built-in text-to-SQL tool.',
71    path: '/text-to-sql/README.md',
72    tags: ['ai', 'text-to-sql', 'nsql', 'tools']
73  },
74  {
75    title: 'Nvidia NIM',
76    description: 'Deploy Nvidia NIM infrastructure, on Kubernetes, with GPUs connected to Spice.',
77    path: '/nvidia-nim/README.md',
78    tags: ['ai', 'nvidia', 'nim']
79  },
80  {
81    title: 'Searching GitHub Files',
82    description: 'Search GitHub files with embeddings and vector similarity search.',
83    path: '/search_github_files/README.md',
84    tags: ['ai', 'github', 'search'],
85    videoUrl: 'https://youtu.be/5y26MveEJ8c'
86  },
87  {
88    title: 'xAI Models',
89    description: 'Use xAI models such as Grok.',
90    path: '/models/xai/README.md',
91    tags: ['ai', 'xai', 'models'],
92    videoUrl: 'https://youtu.be/-7RkAsqQLdk'
93  },
94  {
95    title: 'DeepSeek Model',
96    description: 'Use DeepSeek model through Spice.',
97    path: '/deepseek/README.md',
98    tags: ['ai', 'deepseek', 'models']
99  },
100  {
101    title: 'Model-Context-Protocol (MCP)',
102    description: 'Use Spice to connect to or host MCP servers.',
103    path: '/mcp/README.md',
104    tags: ['ai', 'mcp', 'tools']
105  },
106  // Data Acceleration
107  {
108    title: 'DuckDB Data Accelerator',
109    description: 'Accelerate data locally using DuckDB.',
110    path: '/duckdb/accelerator/README.md',
111    tags: ['core', 'acceleration', 'duckdb', 'data'],
112    videoUrl: 'https://youtu.be/hFvVz5NGpaw'
113  },
114  {
115    title: 'PostgreSQL Data Accelerator',
116    description: 'Accelerate data locally using PostgreSQL.',
117    path: '/postgres/accelerator/README.md',
118    tags: ['acceleration', 'postgresql', 'data']
119  },
120  {
121    title: 'SQLite Data Accelerator',
122    description: 'Accelerate data locally using SQLite.',
123    path: '/sqlite/accelerator/README.md',
124    tags: ['acceleration', 'sqlite', 'data']
125  },
126  {
127    title: 'Apache Arrow Data Accelerator',
128    description: 'Accelerate data using Apache Arrow.',
129    path: '/arrow/README.md',
130    tags: ['acceleration', 'apache', 'arrow']
131  },
132  // Data Connectors
133  {
134    title: 'PostgreSQL Connector',
135    description: 'Connect to and query PostgreSQL databases.',
136    path: '/postgres/connector/README.md',
137    tags: ['connector', 'postgresql', 'query']
138  },
139  {
140    title: 'AWS RDS PostgreSQL',
141    description: 'Connect to AWS RDS PostgreSQL instances.',
142    path: '/postgres/rds/README.md',
143    tags: ['connector', 'aws', 'rds', 'postgresql']
144  },
145  {
146    title: 'Supabase PostgreSQL',
147    description: 'Connect to Supabase PostgreSQL databases.',
148    path: '/postgres/supabase/README.md',
149    tags: ['connector', 'supabase', 'postgresql']
150  },
151  {
152    title: 'MySQL Connector',
153    description: 'Connect to and query MySQL databases.',
154    path: '/mysql/connector/README.md',
155    tags: ['connector', 'mysql', 'query']
156  },
157  {
158    title: 'AWS RDS Aurora MySQL',
159    description: 'Connect to AWS RDS Aurora with MySQL compatibility.',
160    path: '/mysql/rds-aurora/README.md',
161    tags: ['connector', 'aws', 'rds', 'aurora', 'mysql']
162  },
163  {
164    title: 'PlanetScale MySQL',
165    description: 'Connect to PlanetScale MySQL databases.',
166    path: '/mysql/planetscale/README.md',
167    tags: ['connector', 'planetscale', 'mysql']
168  },
169  {
170    title: 'Clickhouse Connector',
171    description: 'Connect to and query Clickhouse databases.',
172    path: '/clickhouse/README.md',
173    tags: ['connector', 'clickhouse', 'query']
174  },
175  {
176    title: 'Databricks Connector',
177    description: 'Connect to and query Databricks instances using Delta Lake or Spark Connect.',
178    path: '/databricks/README.md',
179    tags: ['connector', 'databricks', 'delta', 'lake', 'spark', 'connect']
180  },
181  {
182    title: 'Delta Lake Connector',
183    description: 'Query data from Delta Lake tables.',
184    path: '/delta-lake/README.md',
185    tags: ['connector', 'delta', 'lake']
186  },
187  {
188    title: 'Debezium CDC from Postgres',
189    description: 'Stream changes from PostgreSQL using Debezium CDC.',
190    path: '/cdc-debezium/README.md',
191    tags: ['connector', 'debezium', 'cdc', 'postgresql']
192  },
193  {
194    title: 'Debezium CDC with SASL/SCRAM',
195    description: 'Stream MySQL changes using Debezium with SASL/SCRAM authentication.',
196    path: '/cdc-debezium/sasl-scram/README.md',
197    tags: ['connector', 'debezium', 'cdc', 'sasl', 'scram', 'mysql']
198  },
199  {
200    title: 'Dremio Connector',
201    description: 'Connect to and query Dremio.',
202    path: '/dremio/README.md',
203    tags: ['connector', 'dremio', 'query']
204  },
205  {
206    title: 'DuckDB Connector',
207    description: 'Query DuckDB databases with sample TPCH data.',
208    path: '/duckdb/connector/README.md',
209    tags: ['connector', 'duckdb', 'query']
210  },
211  {
212    title: 'File Connector',
213    description: 'Query data from local files.',
214    path: '/file/README.md',
215    tags: ['connector', 'file', 'query']
216  },
217  {
218    title: 'FTP Connector',
219    description: 'Query data from FTP servers.',
220    path: '/ftp/README.md',
221    tags: ['connector', 'ftp', 'query']
222  },
223  {
224    title: 'GitHub Connector',
225    description: 'Connect to and query GitHub data.',
226    path: '/github/README.md',
227    tags: ['connector', 'github', 'query']
228  },
229  {
230    title: 'GraphQL Connector',
231    description: 'Query data from GraphQL endpoints.',
232    path: '/graphql/README.md',
233    tags: ['connector', 'graphql', 'query']
234  },
235  {
236    title: 'MSSQL Connector',
237    description: 'Connect to Microsoft SQL Server databases.',
238    path: '/mssql/README.md',
239    tags: ['connector', 'mssql', 'query']
240  },
241  {
242    title: 'ODBC Connector',
243    description: 'Connect to databases using ODBC.',
244    path: '/odbc/README.md',
245    tags: ['connector', 'odbc', 'query']
246  },
247  {
248    title: 'S3 Connector',
249    description: 'Query data from S3 compatible storage.',
250    path: '/s3/README.md',
251    tags: ['connector', 's3', 'query']
252  },
253  {
254    title: 'SharePoint Connector',
255    description: 'Connect to SharePoint and OneDrive for Business.',
256    path: '/sharepoint/README.md',
257    tags: ['connector', 'sharepoint', 'onedrive']
258  },
259  {
260    title: 'Snowflake Connector',
261    description: 'Connect to and query Snowflake databases.',
262    path: '/snowflake/README.md',
263    tags: ['connector', 'snowflake', 'query']
264  },
265  {
266    title: 'Spice.ai Cloud Connector',
267    description: 'Connect to the Spice.ai Cloud Platform.',
268    path: '/spiceai/README.md',
269    tags: ['connector', 'spiceai', 'cloud']
270  },
271  {
272    title: 'Apache Spark Connector',
273    description: 'Connect to and query Apache Spark.',
274    path: '/spark/README.md',
275    tags: ['connector', 'apache', 'spark', 'query']
276  },
277  {
278    title: 'Spice.ai Cloud Platform Catalog',
279    description: 'Connect to the Spice.ai Cloud Platform catalog.',
280    path: '/catalogs/spiceai/README.md',
281    tags: ['catalog', 'spiceai', 'cloud']
282  },
283  {
284    title: 'Databricks Unity Catalog',
285    description: 'Connect to Databricks Unity catalog.',
286    path: '/catalogs/databricks/README.md',
287    tags: ['catalog', 'databricks', 'unity']
288  },
289  {
290    title: 'Unity Catalog',
291    description: 'Connect to Unity catalog.',
292    path: '/catalogs/unity_catalog/README.md',
293    tags: ['catalog', 'unity']
294  },
295  {
296    title: 'Iceberg Catalog',
297    description: 'Connect to Iceberg catalog.',
298    path: '/catalogs/iceberg/README.md',
299    tags: ['catalog', 'iceberg']
300  },
301  {
302    title: 'Sales BI with Apache Superset',
303    description: 'Visualize data in Spice with Apache Superset.',
304    path: '/sales-bi/README.md',
305    tags: ['visualization', 'bi', 'superset']
306  },
307  {
308    title: 'Grafana Datasource',
309    description: 'Add Spice as a Grafana datasource.',
310    path: '/grafana-datasource/README.md',
311    tags: ['visualization', 'grafana', 'datasource']
312  },
313  {
314    title: 'IMAP Emails',
315    description: 'Federated SQL query of mail across IMAP email servers',
316    path: '/imap/README.md',
317    tags: ['connector', 'imap', 'datasource']
318  },
319  // Deployment
320  {
321    title: 'Deploying to Kubernetes',
322    description: 'Deploy Spice.ai on Kubernetes.',
323    path: '/kubernetes/README.md',
324    tags: ['deployment', 'kubernetes']
325  },
326  {
327    title: 'Running in Docker',
328    description: 'Run Spice.ai in Docker containers.',
329    path: '/docker/README.md',
330    tags: ['deployment', 'docker']
331  },
332
333  // Performance
334  {
335    title: 'TPC-H Benchmarking',
336    description: 'Benchmark performance using TPC-H.',
337    path: '/tpc-h/README.md',
338    tags: ['performance', 'benchmarking', 'tpc-h']
339  },
340  {
341    title: 'Results Caching',
342    description: 'Cache query results for improved performance.',
343    path: '/caching/README.md',
344    tags: ['performance', 'caching']
345  },
346  {
347    title: 'Indexes on Accelerated Data',
348    description: 'Create and manage indexes on accelerated data.',
349    path: '/acceleration/indexes/README.md',
350    tags: ['performance', 'indexes', 'acceleration']
351  },
352
353  // Configuration
354  {
355    title: 'Data Retention Policy',
356    description: 'Configure data retention policies.',
357    path: '/retention/README.md',
358    tags: ['configuration', 'retention']
359  },
360  {
361    title: 'Refresh Data Window',
362    description: 'Configure data refresh windows.',
363    path: '/refresh-data-window/README.md',
364    tags: ['configuration', 'refresh']
365  },
366  {
367    title: 'Advanced Data Refresh',
368    description: 'Advanced configuration for data refresh.',
369    path: '/acceleration/data-refresh/README.md',
370    tags: ['configuration', 'data', 'refresh']
371  },
372  {
373    title: 'Data Quality with Constraints',
374    description: 'Add data quality constraints.',
375    path: '/acceleration/constraints/README.md',
376    tags: ['configuration', 'data', 'quality', 'constraints']
377  },
378
379  // Client SDKs
380  {
381    title: 'Rust SDK',
382    description: 'Query Spice.ai using the Rust SDK.',
383    path: '/client-sdk/spice-rs-sdk-sample/README.md',
384    tags: ['sdk', 'rust']
385  },
386  {
387    title: 'Python SDK',
388    description: 'Query Spice.ai using the Python SDK.',
389    path: '/client-sdk/spicepy-sdk-sample/README.md',
390    tags: ['sdk', 'python']
391  },
392  {
393    title: 'Go SDK',
394    description: 'Query Spice.ai using the Go SDK.',
395    path: '/client-sdk/gospice-sdk-sample/README.md',
396    tags: ['sdk', 'go']
397  },
398  {
399    title: 'JavaScript SDK',
400    description: 'Query Spice.ai using the JavaScript SDK.',
401    path: '/client-sdk/spice.js-sdk-sample/README.md',
402    tags: ['sdk', 'javascript']
403  },
404  {
405    title: 'Java SDK',
406    description: 'Query Spice.ai using the Java SDK.',
407    path: '/client-sdk/spice-java-sdk-sample/README.md',
408    tags: ['sdk', 'java']
409  },
410  // Clients
411  {
412    title: 'Python ADBC Client',
413    description: 'Query Spice using ADBC and Parameterized Queries with Python.',
414    path: '/clients/adbc/README.md',
415    tags: ['client', 'python', 'adbc', 'parameterized queries']
416  },
417  // Security
418  {
419    title: 'TLS Encryption',
420    description: 'Enable encryption in transit using TLS.',
421    path: '/tls/README.md',
422    tags: ['security', 'tls']
423  },
424  {
425    title: 'API Key Authentication',
426    description: 'Secure access with API key authentication.',
427    path: '/api_key/README.md',
428    tags: ['security', 'api', 'key']
429  },
430
431  // Advanced
432  {
433    title: 'Local Dataset Replication',
434    description: 'Link datasets in a parent/child relationship within the current Spicepod.',
435    path: '/localpod/README.md',
436    tags: ['advanced', 'replication', 'dataset']
437  }
438]
439
440const RecipeGroup: React.FC<{ recipes: RecipeData[] }> = ({ recipes }) => {
441  const getGridClass = (count: number) => {
442    if (count === 1) return 'grid-cols-1 max-w-sm mx-auto'
443    if (count === 2) return 'grid-cols-1 sm:grid-cols-2 max-w-2xl mx-auto'
444    if (count === 3) return 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 max-w-4xl mx-auto'
445    return 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'
446  }
447
448  return (
449    <section className='mx-auto px-6 md:max-w-[1020px] md:px-0'>
450      <div className={`grid gap-4 ${getGridClass(recipes.length)}`}>
451        {recipes.map((recipe, index) => (
452          <div key={index} className='h-full'>
453            <Recipe
454              title={recipe.title}
455              description={recipe.description}
456              href={recipeBaseUrl + recipe.path}
457              videoUrl={recipe.videoUrl}
458              className='h-full px-4 py-4 text-xs gap-4 md:gap-8 md:px-8 md:py-8'
459            />
460          </div>
461        ))}
462      </div>
463    </section>
464  )
465}
466
467export function CookbookPage() {
468  const filterByTag = (...tags: string[]) =>
469    recipes.filter((r) => r.tags.some((t) => tags.includes(t)))
470
471  const description = `${recipes.length} guides and samples to help you build data-grounded AI apps and agents with Spice.ai Open-Source. Find ready-to-use examples for data acceleration, AI agents, LLM memory, and more.`
472
473  return (
474    <div className='tailwind font-sans'>
475      <Title as='h1' variant='large' className='mx-auto mb-7 mt-8 md:text-center xl:max-w-[1020px]'>
476        🧑‍🍳 Spice.ai OSS <span className='text-primary'>Cookbook</span>
477      </Title>
478
479      <Paragraph className='mb-6 md:text-center mx-auto px-6 md:max-w-[843px]'>
480        {description}
481      </Paragraph>
482
483      <Paragraph className='mb-6 md:text-center mx-auto px-6 md:max-w-[843px] hover:underline'>
484        <Link
485          className='inline-flex gap-1.5'
486          target='_blank'
487          href='https://github.com/spiceai/cookbook/blob/trunk/README.md'
488        >
489          <Icon iconName='github' /> Contribute to the Cookbook on GitHub!
490        </Link>
491      </Paragraph>
492
493      <Container className='mt-6 mb-20'>
494        <Title className='mb-14 text-center'>Featured Recipes</Title>
495
496        <section className='mx-auto px-6 md:max-w-[843px] md:px-0'>
497          <div className='flex flex-col gap-6 md:flex-row'>
498            <div className='flex w-full flex-col gap-6 md:w-1/2'>
499              <Recipe
500                title='Federated SQL Query'
501                description='Join S3, PostgreSQL, and Dremio data in one SQL query.'
502                href={`${recipeBaseUrl}/federation/README.md`}
503              />
504              <Recipe
505                title='Run Llama3 Locally'
506                description='Use Llama models from HuggingFace with Spice.'
507                href={`${recipeBaseUrl}/llama/README.md`}
508                videoUrl='https://youtu.be/I2i6uZKBbd4'
509              />
510            </div>
511            <div className='flex w-full flex-col gap-6 md:w-1/2 md:pt-20'>
512              <Recipe
513                title='Data Acceleration with DuckDB'
514                description='Speed up queries using DuckDB.'
515                href={`${recipeBaseUrl}/duckdb/accelerator/README.md`}
516                videoUrl='https://youtu.be/hFvVz5NGpaw'
517              />
518              <Recipe
519                title='LLM Memory'
520                description='Persistent memory for language models'
521                href={`${recipeBaseUrl}/llm-memory/README.md`}
522                videoUrl='https://youtu.be/uc8TCAPu1IM'
523              />
524            </div>
525          </div>
526        </section>
527      </Container>
528
529      <Container className='mt-6 mb-20'>
530        <Title className='mb-4 text-center'>Sample Applications and Guides</Title>
531        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
532          Example apps and guides for real-world Spice.ai usage and best practices.
533        </Paragraph>
534
535        <RecipeGroup recipes={filterByTag('sample')} />
536      </Container>
537
538      <Container className='mt-6 mb-20'>
539        <Title className='mb-4 text-center'>Core Features</Title>
540        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
541          Discover core capabilities like data federation, acceleration, search, and LLM inference
542          to enhance your applications.
543        </Paragraph>
544
545        <RecipeGroup recipes={filterByTag('core')} />
546      </Container>
547
548      <Container className='mt-6 mb-20'>
549        <Title className='mb-4 text-center'>Models, AI, and Agents</Title>
550        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
551          Integrate with popular AI models, LLMs, and build intelligent agents using Spice.ai.
552        </Paragraph>
553
554        <RecipeGroup recipes={filterByTag('ai')} />
555      </Container>
556
557      <Container className='mt-6 mb-20'>
558        <Title className='mb-4 text-center'>
559          Data Acceleration, Materialization, and Federation
560        </Title>
561        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
562          Optimize query performance with local acceleration, data materialization, and federation
563          techniques.
564        </Paragraph>
565
566        <RecipeGroup recipes={filterByTag('acceleration')} />
567      </Container>
568
569      <Container className='mt-6 mb-20'>
570        <Title className='mb-4 text-center'>Search & Embeddings</Title>
571        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
572          Implement advanced search capabilities and leverage embeddings for vector similarity
573          search.
574        </Paragraph>
575
576        <RecipeGroup recipes={filterByTag('search')} />
577      </Container>
578
579      <Container className='mt-6 mb-20'>
580        <Title className='mb-4 text-center'>Data Connectors</Title>
581        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
582          Connect to various data sources and systems to query, analyze, and manage your data
583          efficiently.
584        </Paragraph>
585
586        <RecipeGroup recipes={filterByTag('connector')} />
587      </Container>
588
589      <Container className='mt-6 mb-20'>
590        <Title className='mb-4 text-center'>Catalog Connectors</Title>
591        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
592          Connect to data catalogs to discover, manage, and utilize your data assets effectively.
593        </Paragraph>
594
595        <RecipeGroup recipes={filterByTag('catalog')} />
596      </Container>
597
598      <Container className='mt-6 mb-20'>
599        <Title className='mb-4 text-center'>Visualization</Title>
600        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
601          Visualize data with BI and analytics tools.
602        </Paragraph>
603
604        <RecipeGroup recipes={filterByTag('visualization')} />
605      </Container>
606
607      <Container className='mt-6 mb-20'>
608        <Title className='mb-4 text-center'>API Clients</Title>
609        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
610          Use API clients for data access and integration.
611        </Paragraph>
612
613        <RecipeGroup recipes={filterByTag('client')} />
614      </Container>
615
616      <Container className='mt-6 mb-20'>
617        <Title className='mb-4 text-center'>Deployment</Title>
618        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
619          Deploy Spice.ai in different environments.
620        </Paragraph>
621
622        <RecipeGroup recipes={filterByTag('deployment')} />
623      </Container>
624
625      <Container className='mt-6 mb-20'>
626        <Title className='mb-4 text-center'>Performance and Benchmarking</Title>
627        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
628          Measure and optimize performance with benchmarks and best practices for your Spice.ai
629          deployment.
630        </Paragraph>
631
632        <RecipeGroup recipes={filterByTag('performance')} />
633      </Container>
634
635      <Container className='mt-6 mb-20'>
636        <Title className='mb-4 text-center'>Configuration</Title>
637        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
638          Fine-tune your Spice.ai deployment with advanced configuration options for optimal
639          performance.
640        </Paragraph>
641
642        <RecipeGroup recipes={filterByTag('configuration')} />
643      </Container>
644
645      <Container className='mt-6 mb-20'>
646        <Title className='mb-4 text-center'>SDKs</Title>
647        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
648          Use SDKs for different programming languages.
649        </Paragraph>
650
651        <RecipeGroup recipes={filterByTag('sdk')} />
652      </Container>
653
654      <Container className='mt-6 mb-20'>
655        <Title className='mb-4 text-center'>Security</Title>
656        <Paragraph className='mb-14 md:text-center mx-auto px-6 md:max-w-[843px]'>
657          Secure your Spice.ai deployment and data access with robust security practices and
658          configurations.
659        </Paragraph>
660
661        <RecipeGroup recipes={filterByTag('security')} />
662      </Container>
663    </div>
664  )
665}
666