Marketplace: Adding filters and a collapsible panel show/hide

packages/server/marketplaces/chatflows/API Agent OpenAI.json

@@ -1,6 +1,7 @@
 {
     "description": "Use OpenAI Function Agent and Chain to automatically decide which API to call, generating url and body request from conversation",
     "categories": "Buffer Memory,ChainTool,API Chain,ChatOpenAI,OpenAI Function Agent,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/API Agent.json

@@ -1,6 +1,7 @@
 {
     "description": "Given API docs, agent automatically decide which API to call, generating url and body request from conversation",
     "categories": "Buffer Memory,ChainTool,API Chain,ChatOpenAI,Conversational Agent,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Antonym.json

@@ -1,6 +1,7 @@
 {
     "description": "Output antonym of given user input using few-shot prompt template built with examples",
     "categories": "Few Shot Prompt,ChatOpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/AutoGPT.json

@@ -1,6 +1,7 @@
 {
     "description": "Use AutoGPT - Autonomous agent with chain of thoughts for self-guided task completion",
     "categories": "AutoGPT,SERP Tool,File Read/Write,ChatOpenAI,Pinecone,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/BabyAGI.json

@@ -1,6 +1,7 @@
 {
     "description": "Use BabyAGI to create tasks and reprioritize for a given objective",
     "categories": "BabyAGI,ChatOpenAI,Pinecone,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/CSV Agent.json

@@ -1,6 +1,7 @@
 {
     "description": "Analyse and summarize CSV data",
     "categories": "CSV Agent,ChatOpenAI,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Chat with a Podcast.json

@@ -1,6 +1,7 @@
 {
     "description": "Engage with data sources such as YouTube Transcripts, Google, and more through intelligent Q&A interactions",
     "categories": "Memory Vector Store,SearchAPI,ChatOpenAI,Conversational Retrieval QA Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/ChatGPTPlugin.json

@@ -1,6 +1,7 @@
 {
     "description": "Use ChatGPT Plugins within LangChain abstractions with GET and POST Tools",
     "categories": "ChatGPT Plugin,HTTP GET/POST,ChatOpenAI,MRKL Agent,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Claude LLM.json

@@ -1,6 +1,7 @@
 {
     "description": "Use Anthropic Claude with 200k context window to ingest whole document for QnA",
     "categories": "Buffer Memory,Prompt Template,Conversation Chain,ChatAnthropic,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Context Chat Engine.json

@@ -1,6 +1,7 @@
 {
     "description": "Answer question based on retrieved documents (context) with built-in memory to remember conversation using LlamaIndex",
     "categories": "Text File,Prompt Template,ChatOpenAI,Conversation Chain,Pinecone,LlamaIndex,Redis",
+    "framework": "LlamaIndex",
     "badge": "NEW",
     "nodes": [
         {

packages/server/marketplaces/chatflows/Conversational Agent.json

@@ -1,6 +1,7 @@
 {
     "description": "A conversational agent for a chat model which utilize chat specific prompts",
     "categories": "Calculator Tool,Buffer Memory,SerpAPI,ChatOpenAI,Conversational Agent,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Conversational Retrieval Agent.json

@@ -2,6 +2,7 @@
     "description": "Agent optimized for vector retrieval during conversation and answering questions based on previous dialogue.",
     "categories": "Retriever Tool,Buffer Memory,ChatOpenAI,Conversational Retrieval Agent, Pinecone,Langchain",
     "badge": "POPULAR",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Conversational Retrieval QA Chain.json

@@ -2,6 +2,7 @@
     "description": "Text file QnA using conversational retrieval QA chain",
     "categories": "TextFile,ChatOpenAI,Conversational Retrieval QA Chain,Pinecone,Langchain",
     "badge": "POPULAR",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Flowise Docs QnA.json

@@ -2,6 +2,7 @@
     "description": "Flowise Docs Github QnA using conversational retrieval QA chain",
     "categories": "Memory Vector Store,Github Loader,ChatOpenAI,Conversational Retrieval QA Chain,Langchain",
     "badge": "POPULAR",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/HuggingFace LLM Chain.json

@@ -1,6 +1,7 @@
 {
     "description": "Simple LLM Chain using HuggingFace Inference API on falcon-7b-instruct model",
     "categories": "HuggingFace,LLM Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/IfElse.json

@@ -1,6 +1,7 @@
 {
     "description": "Split flows based on if else condition",
     "categories": "IfElse Function,ChatOpenAI,OpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "badge": "new",
     "nodes": [
         {

packages/server/marketplaces/chatflows/Image Generation.json

@@ -2,6 +2,7 @@
     "description": "Generate image using Replicate Stability text-to-image generative AI model",
     "badge": "NEW",
     "categories": "Replicate,ChatOpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Input Moderation.json

@@ -2,6 +2,7 @@
     "description": "Detect text that could generate harmful output and prevent it from being sent to the language model",
     "badge": "NEW",
     "categories": "Moderation,ChatOpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/List Output Parser.json

@@ -2,6 +2,7 @@
     "description": "Return response as a list (array) instead of a string/text",
     "badge": "NEW",
     "categories": "CSV Output Parser,ChatOpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Local QnA.json

@@ -2,6 +2,7 @@
     "description": "QnA chain using Ollama local LLM, LocalAI embedding model, and Faiss local vector store",
     "badge": "POPULAR",
     "categories": "Text File,ChatOllama,Conversational Retrieval QA Chain,Faiss,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Long Term Memory.json

@@ -1,6 +1,7 @@
 {
     "description": "Use long term memory like Zep to differentiate conversations between users with sessionId",
     "categories": "ChatOpenAI,Conversational Retrieval QA Chain,Zep Memory,Qdrant,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Metadata Filter.json

@@ -2,6 +2,7 @@
     "description": "Upsert multiple files with metadata and filter by it using conversational retrieval QA chain",
     "categories": "Text File,PDF File,ChatOpenAI,Conversational Retrieval QA Chain,Pinecone,Langchain",
     "badge": "POPULAR",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Multi Prompt Chain.json

@@ -1,6 +1,7 @@
 {
     "description": "A chain that automatically picks an appropriate prompt from multiple prompts",
     "categories": "ChatOpenAI,Multi Prompt Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Multi Retrieval QA Chain.json

@@ -1,6 +1,7 @@
 {
     "description": "A chain that automatically picks an appropriate retriever from multiple different vector databases",
     "categories": "ChatOpenAI,Multi Retrieval QA Chain,Pinecone,Chroma,Supabase,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Multiple VectorDB.json

@@ -1,6 +1,7 @@
 {
     "description": "Use the agent to choose between multiple different vector databases, with the ability to use other tools",
     "categories": "Buffer Memory,ChatOpenAI,Chain Tool,Retrieval QA Chain,Redis,Faiss,Conversational Agent,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/OpenAI Agent.json

@@ -1,6 +1,7 @@
 {
     "description": "An agent that uses OpenAI's Function Calling functionality to pick the tool and args to call",
     "categories": "Buffer Memory,Custom Tool, SerpAPI,OpenAI Function,Calculator Tool,ChatOpenAI,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/OpenAI Assistant.json

@@ -1,6 +1,7 @@
 {
     "description": "OpenAI Assistant that has instructions and can leverage models, tools, and knowledge to respond to user queries",
     "categories": "Custom Tool, SerpAPI,OpenAI Assistant,Calculator Tool,Langchain",
+    "framework": "Langchain",
     "badge": "NEW",
     "nodes": [
         {

packages/server/marketplaces/chatflows/Prompt Chaining with VectorStore.json

@@ -2,6 +2,7 @@
     "description": "Use chat history to rephrase user question, and answer the rephrased question using retrieved docs from vector store",
     "categories": "ChatOpenAI,LLM Chain,SingleStore,Langchain",
     "badge": "POPULAR",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Prompt Chaining.json

@@ -1,6 +1,7 @@
 {
     "description": "Use output from a chain as prompt for another chain",
     "categories": "Custom Tool,OpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Query Engine.json

@@ -2,6 +2,7 @@
     "description": "Stateless query engine designed to answer question over your data using LlamaIndex",
     "categories": "ChatAnthropic,Compact and Refine,Pinecone,LlamaIndex",
     "badge": "NEW",
+    "framework": "LlamaIndex",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/ReAct Agent.json

@@ -1,6 +1,7 @@
 {
     "description": "An agent that uses ReAct logic to decide what action to take",
     "categories": "Calculator Tool,SerpAPI,ChatOpenAI,MRKL Agent,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Replicate LLM.json

@@ -1,6 +1,7 @@
 {
     "description": "Use Replicate API that runs Llama 13b v2 model with LLMChain",
     "categories": "Replicate,LLM Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/SQL DB Chain.json

@@ -1,6 +1,7 @@
 {
     "description": "Answer questions over a SQL database",
     "categories": "ChatOpenAI,Sql Database Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/SQL Prompt.json

@@ -1,6 +1,7 @@
 {
     "description": "Manually construct prompts to query a SQL database",
     "categories": "IfElse Function,Variable Set/Get,Custom JS Function,ChatOpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "badge": "new",
     "nodes": [
         {

packages/server/marketplaces/chatflows/Simple Chat Engine.json

@@ -1,6 +1,7 @@
 {
     "description": "Simple chat engine to handle back and forth conversations using LlamaIndex",
     "categories": "BufferMemory,AzureChatOpenAI,LlamaIndex",
+    "framework": "LlamaIndex",
     "badge": "NEW",
     "nodes": [
         {

packages/server/marketplaces/chatflows/Simple Conversation Chain.json

@@ -1,6 +1,7 @@
 {
     "description": "Basic example of Conversation Chain with built-in memory - works exactly like ChatGPT",
     "categories": "Buffer Memory,ChatOpenAI,Conversation Chain,Langchain",
+    "framework": "Langchain",
     "badge": "POPULAR",
     "nodes": [
         {

packages/server/marketplaces/chatflows/Simple LLM Chain.json

@@ -1,6 +1,7 @@
 {
     "description": "Basic example of stateless (no memory) LLM Chain with a Prompt Template and LLM Model",
     "categories": "OpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Structured Output Parser.json

@@ -1,6 +1,7 @@
 {
     "description": "Return response as a specified JSON structure instead of a string/text",
     "categories": "Structured Output Parser,ChatOpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "badge": "NEW",
     "nodes": [
         {

packages/server/marketplaces/chatflows/SubQuestion Query Engine.json

@@ -1,6 +1,7 @@
 {
     "description": "Breaks down query into sub questions for each relevant data source, then combine into final response",
     "categories": "Sub Question Query Engine,Sticky Note,QueryEngine Tool,Compact and Refine,ChatOpenAI,Pinecone,LlamaIndex",
+    "framework": "LlamaIndex",
     "badge": "NEW",
     "nodes": [
         {

packages/server/marketplaces/chatflows/Translator.json

@@ -1,6 +1,7 @@
 {
     "description": "Language translation using LLM Chain with a Chat Prompt Template and Chat Model",
     "categories": "Chat Prompt Template,ChatOpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/Vectara RAG Chain.json

@@ -1,6 +1,7 @@
 {
     "description": "QA chain for Vectara",
     "categories": "Vectara QA Chain,Vectara,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/WebBrowser.json

@@ -1,6 +1,7 @@
 {
     "description": "Conversational Agent with ability to visit a website and extract information",
-    "categories": "Buffer Memory,Web Browser,ChatOpenAI,Conversational Agent,Langchain",
+    "categories": "Buffer Memory,Web Browser,ChatOpenAI,Conversational Agent",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,

packages/server/marketplaces/chatflows/WebPage QnA.json

@@ -1,6 +1,7 @@
 {
     "description": "Scrape web pages for QnA with long term memory Motorhead and return source documents",
     "categories": "HtmlToMarkdown,Cheerio Web Scraper,ChatOpenAI,Redis,Pinecone,Langchain",
+    "framework": "Langchain",
     "badge": "POPULAR",
     "nodes": [
         {

packages/server/marketplaces/tools/Add Hubspot Contact.json

@@ -1,5 +1,6 @@
 {
     "name": "add_contact_hubspot",
+    "framework": "Langchain",
     "description": "Add new contact to Hubspot",
     "color": "linear-gradient(rgb(85,198,123), rgb(0,230,99))",
     "iconSrc": "https://cdn.worldvectorlogo.com/logos/hubspot-1.svg",

packages/server/marketplaces/tools/Create Airtable Record.json

@@ -1,5 +1,6 @@
 {
     "name": "add_airtable",
+    "framework": "Langchain",
     "description": "Add column1, column2 to Airtable",
     "color": "linear-gradient(rgb(125,71,222), rgb(128,102,23))",
     "iconSrc": "https://raw.githubusercontent.com/gilbarbara/logos/main/logos/airtable.svg",

packages/server/marketplaces/tools/Get Current DateTime.json

@@ -1,5 +1,6 @@
 {
     "name": "todays_date_time",
+    "framework": "Langchain",
     "description": "Useful to get todays day, date and time.",
     "color": "linear-gradient(rgb(117,118,129), rgb(230,10,250))",
     "iconSrc": "https://raw.githubusercontent.com/gilbarbara/logos/main/logos/javascript.svg",

packages/server/marketplaces/tools/Get Stock Mover.json

@@ -1,5 +1,6 @@
 {
     "name": "get_stock_movers",
+    "framework": "Langchain",
     "description": "Get the stocks that has biggest price/volume moves, e.g. actives, gainers, losers, etc.",
     "iconSrc": "https://rapidapi.com/cdn/images?url=https://rapidapi-prod-apis.s3.amazonaws.com/9c/e743343bdd41edad39a3fdffd5b974/016c33699f51603ae6fe4420c439124b.png",
     "color": "linear-gradient(rgb(191,202,167), rgb(143,202,246))",

packages/server/marketplaces/tools/Make Webhook.json

@@ -1,5 +1,6 @@
 {
     "name": "make_webhook",
+    "framework": "Langchain",
     "description": "Useful when you need to send message to Discord",
     "color": "linear-gradient(rgb(19,94,2), rgb(19,124,59))",
     "iconSrc": "https://github.com/FlowiseAI/Flowise/assets/26460777/517fdab2-8a6e-4781-b3c8-fb92cc78aa0b",

packages/server/marketplaces/tools/Send Discord Message.json

@@ -1,5 +1,6 @@
 {
     "name": "send_message_to_discord_channel",
+    "framework": "Langchain",
     "description": "Send message to Discord channel",
     "color": "linear-gradient(rgb(155,190,84), rgb(176,69,245))",
     "iconSrc": "https://raw.githubusercontent.com/gilbarbara/logos/main/logos/discord-icon.svg",

packages/server/marketplaces/tools/Send Slack Message.json

@@ -1,5 +1,6 @@
 {
     "name": "send_message_to_slack_channel",
+    "framework": "Langchain",
     "description": "Send message to Slack channel",
     "color": "linear-gradient(rgb(155,190,84), rgb(176,69,245))",
     "iconSrc": "https://raw.githubusercontent.com/gilbarbara/logos/main/logos/slack-icon.svg",

packages/server/marketplaces/tools/Send Teams Message.json

@@ -1,5 +1,6 @@
 {
     "name": "send_message_to_teams_channel",
+    "framework": "Langchain",
     "description": "Send message to Teams channel",
     "color": "linear-gradient(rgb(155,190,84), rgb(176,69,245))",
     "iconSrc": "https://raw.githubusercontent.com/gilbarbara/logos/main/logos/microsoft-teams.svg",

packages/server/marketplaces/tools/SendGrid Email.json

@@ -1,5 +1,6 @@
 {
     "name": "sendgrid_email",
+    "framework": "Langchain",
     "description": "Send email using SendGrid",
     "color": "linear-gradient(rgb(230,108,70), rgb(222,4,98))",
     "iconSrc": "https://raw.githubusercontent.com/gilbarbara/logos/main/logos/sendgrid-icon.svg",

packages/server/src/index.ts

@@ -1237,6 +1237,7 @@ export class App {
                     templateName: file.split('.json')[0],
                     flowData: fileData.toString(),
                     badge: fileDataObj?.badge,
+                    framework: fileDataObj?.framework,
                     categories: fileDataObj?.categories,
                     type: 'Chatflow',
                     description: fileDataObj?.description || ''
@@ -1254,6 +1255,8 @@ export class App {
                     ...fileDataObj,
                     id: index,
                     type: 'Tool',
+                    framework: fileDataObj?.framework,
+                    badge: fileDataObj?.badge,
                     categories: '',
                     templateName: file.split('.json')[0]
                 }

packages/ui/src/ui-component/table/MarketplaceTable.js

@@ -10,6 +10,8 @@ import TableRow from '@mui/material/TableRow'
 import Paper from '@mui/material/Paper'
 import Chip from '@mui/material/Chip'
 import { Button, Typography } from '@mui/material'
+import langchainPNG from 'assets/images/langchain.png'
+import llamaIndexPNG from 'assets/images/llamaindex.png'
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
     [`&.${tableCellClasses.head}`]: {
@@ -31,7 +33,7 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
     }
 }))
 
-export const MarketplaceTable = ({ data, images, filterFunction, filterByBadge, filterByType }) => {
+export const MarketplaceTable = ({ data, filterFunction, filterByBadge, filterByType, filterByFramework }) => {
     const navigate = useNavigate()
     const openTemplate = (selectedTemplate) => {
         if (selectedTemplate.flowData) {
@@ -61,10 +63,13 @@ export const MarketplaceTable = ({ data, images, filterFunction, filterByBadge,
                 <Table sx={{ minWidth: 650 }} size='small' aria-label='a dense table'>
                     <TableHead>
                         <TableRow sx={{ marginTop: '10', backgroundColor: 'primary' }}>
+                            <StyledTableCell component='th' scope='row' style={{ width: '5%' }} key='0'>
+                                {''}
+                            </StyledTableCell>
                             <StyledTableCell component='th' scope='row' style={{ width: '15%' }} key='0'>
                                 Name
                             </StyledTableCell>
-                            <StyledTableCell component='th' scope='row' style={{ width: '10%' }} key='1'>
+                            <StyledTableCell component='th' scope='row' style={{ width: '5%' }} key='1'>
                                 Type
                             </StyledTableCell>
                             <StyledTableCell style={{ width: '35%' }} key='2'>
@@ -83,9 +88,20 @@ export const MarketplaceTable = ({ data, images, filterFunction, filterByBadge,
                             .filter(filterByBadge)
                             .filter(filterByType)
                             .filter(filterFunction)
+                            .filter(filterByFramework)
                             .map((row, index) => (
                                 <StyledTableRow key={index}>
                                     <TableCell key='0'>
+                                        <Typography>
+                                            {row.framework === 'Langchain' && (
+                                                <img src={langchainPNG} alt='langchain' style={{ width: 30, height: 30 }} />
+                                            )}
+                                            {row.framework === 'LlamaIndex' && (
+                                                <img src={llamaIndexPNG} alt='llamaIndex' style={{ width: 30, height: 30 }} />
+                                            )}
+                                        </Typography>
+                                    </TableCell>
+                                    <TableCell key='1'>
                                         <Typography
                                             sx={{ fontSize: '1.2rem', fontWeight: 500, overflowWrap: 'break-word', whiteSpace: 'pre-line' }}
                                         >
@@ -94,15 +110,15 @@ export const MarketplaceTable = ({ data, images, filterFunction, filterByBadge,
                                             </Button>
                                         </Typography>
                                     </TableCell>
-                                    <TableCell key='1'>
+                                    <TableCell key='2'>
                                         <Typography>{row.type}</Typography>
                                     </TableCell>
-                                    <TableCell key='1'>
+                                    <TableCell key='3'>
                                         <Typography sx={{ overflowWrap: 'break-word', whiteSpace: 'pre-line' }}>
                                             {row.description || ''}
                                         </Typography>
                                     </TableCell>
-                                    <TableCell key='2'>
+                                    <TableCell key='4'>
                                         <div
                                             style={{
                                                 display: 'flex',
@@ -125,7 +141,7 @@ export const MarketplaceTable = ({ data, images, filterFunction, filterByBadge,
                                                     ))}
                                         </div>
                                     </TableCell>
-                                    <TableCell key='3'>
+                                    <TableCell key='5'>
                                         <Typography>
                                             {row.badge &&
                                                 row.badge
@@ -152,8 +168,8 @@ export const MarketplaceTable = ({ data, images, filterFunction, filterByBadge,
 
 MarketplaceTable.propTypes = {
     data: PropTypes.array,
-    images: PropTypes.object,
     filterFunction: PropTypes.func,
     filterByBadge: PropTypes.func,
-    filterByType: PropTypes.func
+    filterByType: PropTypes.func,
+    filterByFramework: PropTypes.func
 }

packages/ui/src/views/marketplaces/index.js

@@ -19,10 +19,11 @@ import {
     Select,
     OutlinedInput,
     Checkbox,
-    ListItemText
+    ListItemText,
+    Button
 } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
-import { IconLayoutGrid, IconList, IconSearch } from '@tabler/icons'
+import { IconChevronsDown, IconChevronsUp, IconLayoutGrid, IconList, IconSearch } from '@tabler/icons'
 
 // project imports
 import MainCard from 'ui-component/cards/MainCard'
@@ -69,6 +70,7 @@ const ITEM_HEIGHT = 48
 const ITEM_PADDING_TOP = 8
 const badges = ['POPULAR', 'NEW']
 const types = ['Chatflow', 'Tool']
+const framework = ['Langchain', 'LlamaIndex']
 const MenuProps = {
     PaperProps: {
         style: {
@@ -98,7 +100,8 @@ const Marketplace = () => {
 
     const [badgeFilter, setBadgeFilter] = useState([])
     const [typeFilter, setTypeFilter] = useState([])
-
+    const [frameworkFilter, setFrameworkFilter] = useState([])
+    const [open, setOpen] = useState(false)
     const handleBadgeFilterChange = (event) => {
         const {
             target: { value }
@@ -117,6 +120,15 @@ const Marketplace = () => {
             typeof value === 'string' ? value.split(',') : value
         )
     }
+    const handleFrameworkFilterChange = (event) => {
+        const {
+            target: { value }
+        } = event
+        setFrameworkFilter(
+            // On autofill we get a stringified value.
+            typeof value === 'string' ? value.split(',') : value
+        )
+    }
 
     const handleViewChange = (event, nextView) => {
         localStorage.setItem('mpDisplayStyle', nextView)
@@ -143,6 +155,10 @@ const Marketplace = () => {
         return typeFilter.length > 0 ? typeFilter.includes(data.type) : true
     }
 
+    function filterByFramework(data) {
+        return frameworkFilter.length > 0 ? frameworkFilter.includes(data.framework) : true
+    }
+
     const onUseTemplate = (selectedTool) => {
         const dialogProp = {
             title: 'Add New Tool',
@@ -224,9 +240,11 @@ const Marketplace = () => {
                         <h1>Marketplace</h1>
                         <TextField
                             size='small'
+                            id='search-filter-textbox'
                             sx={{ display: { xs: 'none', sm: 'block' }, ml: 3 }}
                             variant='outlined'
-                            placeholder='Search name or description'
+                            fullWidth='true'
+                            placeholder='Search name or description or node name'
                             onChange={onSearchChange}
                             InputProps={{
                                 startAdornment: (
@@ -236,52 +254,14 @@ const Marketplace = () => {
                                 )
                             }}
                         />
-                        <FormControl sx={{ m: 1, width: 300 }}>
+                        <Button
-                            <InputLabel size='small' id='type-badge'>
+                            sx={{ width: '220px', ml: 3, mr: 5 }}
-                                Type
+                            variant='outlined'
-                            </InputLabel>
+                            onClick={() => setOpen(!open)}
-                            <Select
+                            startIcon={open ? <IconChevronsUp /> : <IconChevronsDown />}
-                                size='small'
+                        >
-                                labelId='type-badge-checkbox-label'
+                            {open ? 'Hide Filters' : 'Show Filters'}
-                                id='type-badge-checkbox'
+                        </Button>
-                                multiple
-                                value={typeFilter}
-                                onChange={handleTypeFilterChange}
-                                input={<OutlinedInput label='Badge' />}
-                                renderValue={(selected) => selected.join(', ')}
-                                MenuProps={MenuProps}
-                            >
-                                {types.map((name) => (
-                                    <MenuItem key={name} value={name}>
-                                        <Checkbox checked={typeFilter.indexOf(name) > -1} />
-                                        <ListItemText primary={name} />
-                                    </MenuItem>
-                                ))}
-                            </Select>
-                        </FormControl>
-                        <FormControl sx={{ m: 1, width: 300 }}>
-                            <InputLabel size='small' id='filter-badge'>
-                                Tag
-                            </InputLabel>
-                            <Select
-                                labelId='filter-badge-label'
-                                id='filter-badge-checkbox'
-                                size='small'
-                                multiple
-                                value={badgeFilter}
-                                onChange={handleBadgeFilterChange}
-                                input={<OutlinedInput label='Badge' />}
-                                renderValue={(selected) => selected.join(', ')}
-                                MenuProps={MenuProps}
-                            >
-                                {badges.map((name) => (
-                                    <MenuItem key={name} value={name}>
-                                        <Checkbox checked={badgeFilter.indexOf(name) > -1} />
-                                        <ListItemText primary={name} />
-                                    </MenuItem>
-                                ))}
-                            </Select>
-                        </FormControl>
                         <Box sx={{ flexGrow: 1 }} />
                         <ButtonGroup sx={{ maxHeight: 40 }} disableElevation variant='contained' aria-label='outlined primary button group'>
                             <ButtonGroup disableElevation variant='contained' aria-label='outlined primary button group'>
@@ -313,6 +293,93 @@ const Marketplace = () => {
                         </ButtonGroup>
                     </Toolbar>
                 </Box>
+                {open && (
+                    <Box sx={{ flexGrow: 1, mb: 2 }}>
+                        <Toolbar
+                            disableGutters={true}
+                            style={{
+                                margin: 1,
+                                padding: 1,
+                                paddingBottom: 10,
+                                display: 'flex',
+                                justifyContent: 'flex-start',
+                                width: '100%',
+                                borderBottom: '1px solid'
+                            }}
+                        >
+                            <FormControl sx={{ m: 1, width: 250 }}>
+                                <InputLabel size='small' id='filter-badge-label'>
+                                    Tag
+                                </InputLabel>
+                                <Select
+                                    labelId='filter-badge-label'
+                                    id='filter-badge-checkbox'
+                                    size='small'
+                                    multiple
+                                    value={badgeFilter}
+                                    onChange={handleBadgeFilterChange}
+                                    input={<OutlinedInput label='Badge' />}
+                                    renderValue={(selected) => selected.join(', ')}
+                                    MenuProps={MenuProps}
+                                >
+                                    {badges.map((name) => (
+                                        <MenuItem key={name} value={name}>
+                                            <Checkbox checked={badgeFilter.indexOf(name) > -1} />
+                                            <ListItemText primary={name} />
+                                        </MenuItem>
+                                    ))}
+                                </Select>
+                            </FormControl>
+                            <FormControl sx={{ m: 1, width: 250 }}>
+                                <InputLabel size='small' id='type-badge-label'>
+                                    Type
+                                </InputLabel>
+                                <Select
+                                    size='small'
+                                    labelId='type-badge-label'
+                                    id='type-badge-checkbox'
+                                    multiple
+                                    value={typeFilter}
+                                    onChange={handleTypeFilterChange}
+                                    input={<OutlinedInput label='Badge' />}
+                                    renderValue={(selected) => selected.join(', ')}
+                                    MenuProps={MenuProps}
+                                >
+                                    {types.map((name) => (
+                                        <MenuItem key={name} value={name}>
+                                            <Checkbox checked={typeFilter.indexOf(name) > -1} />
+                                            <ListItemText primary={name} />
+                                        </MenuItem>
+                                    ))}
+                                </Select>
+                            </FormControl>
+                            <FormControl sx={{ m: 1, width: 250 }}>
+                                <InputLabel size='small' id='type-fw-label'>
+                                    Framework
+                                </InputLabel>
+                                <Select
+                                    size='small'
+                                    labelId='type-fw-label'
+                                    id='type-fw-checkbox'
+                                    multiple
+                                    value={frameworkFilter}
+                                    onChange={handleFrameworkFilterChange}
+                                    input={<OutlinedInput label='Badge' />}
+                                    renderValue={(selected) => selected.join(', ')}
+                                    MenuProps={MenuProps}
+                                >
+                                    {framework.map((name) => (
+                                        <MenuItem key={name} value={name}>
+                                            <Checkbox checked={frameworkFilter.indexOf(name) > -1} />
+                                            <ListItemText primary={name} />
+                                        </MenuItem>
+                                    ))}
+                                </Select>
+                            </FormControl>
+                        </Toolbar>
+                    </Box>
+                )}
+
                 {!isLoading && (!view || view === 'card') && getAllTemplatesMarketplacesApi.data && (
                     <>
                         <Grid container spacing={gridSpacing}>
@@ -320,6 +387,7 @@ const Marketplace = () => {
                                 .filter(filterByBadge)
                                 .filter(filterByType)
                                 .filter(filterFlows)
+                                .filter(filterByFramework)
                                 .map((data, index) => (
                                     <Grid key={index} item lg={3} md={4} sm={6} xs={12}>
                                         {data.badge && (
@@ -351,10 +419,10 @@ const Marketplace = () => {
                     <MarketplaceTable
                         sx={{ mt: 20 }}
                         data={getAllTemplatesMarketplacesApi.data}
-                        images={images}
                         filterFunction={filterFlows}
                         filterByType={filterByType}
                         filterByBadge={filterByBadge}
+                        filterByFramework={filterByFramework}
                     />
                 )}