AI & Digital Transformation Consultant

How to fix TableSearchFilter not defined error

2025-01-21T00:00:00Z

If you’re using tables in your application and encounter the warning "tableSearchFilter is not defined," follow these troubleshooting steps to resolve the issue.

identify the source of the warning #

understand the error: this warning often appears when there’s a mismatch between the search input and the actual data linked to the table. it usually occurs if you’ve deleted or modified the variable that filters your table.

follow these steps #

check the search input variable: ensure the search variable is correctly defined and linked to your table. if it was removed unintentionally, you’ll need to redefine it.
disable server-side pagination: if you are utilizing server-side pagination, disable this feature temporarily. this allows you to see if the search term input is causing the warning.

implement changes #

remove undefined variables: once you’ve disabled server-side pagination, go through your settings and remove any variables that may be defined as "undefined." this might include unused search term inputs.
re-enable server-side pagination: after following the above steps, re-enable server-side pagination. ensure that any filters or search inputs align with the expected variables in your data

verify the solution #

check table appearance: finally, verify that your table displays correctly without the border issues you were experiencing before. if everything is set up properly, the table should function without warnings.

by following these steps, you should resolve the "tableSearchFilter is not defined" issue and ensure your table runs smoothly.

What is RAG

2025-01-20T00:00:00Z

What is RAG? #

Retrieval-Augmented Generation (RAG) is a framework that combines large language models (LLMs) with external knowledge sources. Instead of relying purely on the model’s internal parameters—where it has been trained on massive but generalized datasets—RAG allows you to retrieve relevant documents or data from an external database or knowledge base. The retrieved information then augments the generation process, ensuring that the output is:

Accurate: Because it uses the most recent or specific documents relevant to your question.
Up-to-date: If your knowledge base gets updated, your model can use these new documents without requiring an expensive re-training.
Specific: RAG pulls data from domain-specific or context-specific sources.

In essence, RAG prevents the “hallucination” problem by grounding the model’s responses in real data.

Challenge of a RAG system #

While RAG provides a robust way to handle up-to-date and domain-specific knowledge, it does come with a few challenges:

Document Management: You need a place to store your documents or data. This usually involves creating embeddings (vector representations) and storing them in a database that supports efficient similarity search.
Complexity of Setup: There are multiple moving parts—an embedding model, a vector store, possibly a metadata store, and a well-designed pipeline to retrieve relevant documents.
Data Pipeline Reliability: Ensuring that new documents are processed (cleaned, chunked, embedded) and made available for retrieval can be tricky. If the pipeline fails, the user might get incomplete or outdated answers.
Cost: Large-scale retrieval or embedding generation can be costly. It’s crucial to design a pipeline that’s both efficient and scalable.

The content type #

Before building any RAG system, you need clarity on the kinds of documents you plan to use:

Text-based documents (Markdown, PDFs, CSVs, etc.): The most common scenario where you chunk text into smaller pieces before creating embeddings.
Structured data (databases, spreadsheets, knowledge graphs): May require a different pipeline or transformation before being embedded.
Multimedia files (images, videos, audio): Potentially more complex because embedding these requires specialized models.

Identify how large your documents are, how often they change, and how you want them chunked. Chunk sizes (usually between 200-800 tokens) can drastically affect retrieval quality.

Conclusion #

In summary, Retrieval-Augmented Generation (RAG) represents a powerful paradigm for leveraging up-to-date and domain-specific data in large language models. By designing a robust pipeline for document management, ensuring reliable data ingestion, and choosing the right content types and embedding strategies, you can maximize the accuracy and relevance of your AI-driven applications. While the setup can be complex—and potentially costly—these challenges are outweighed by the benefits of delivering answers grounded in real-world information, ensuring both credibility and flexibility in an ever-evolving data landscape.

How to add gradient background to Retool containers

2024-12-03T00:00:00Z

Here’s a quick tip to set a gradient color for the background of a Retool container:

Detach the Style from the Token: Before customizing, ensure the style isn’t tied to any existing token.
Add the Gradient in the Style Panel: Use CSS syntax in the background style panel, wrapped in double curly brackets.

Example for a linear gradient:

{ { "linear-gradient(45deg, red, blue)" } }

Examples of Gradient Styles: #

Linear Gradient: #

Radial Gradient: #

With Usable Colors: #

Customize to enhance your interface with appealing gradient backgrounds!

Personal English writer assistant tool

2024-12-02T00:00:00Z

We’re thrilled to unveil the latest addition to the MetaTools suite: a personal English writing assistant.

Designed with the modern writer in mind, this tool is more than just a spellchecker, it’s a dynamic partner in refining your writing process.

What makes it special? #

AI-powered suggestions: This tool leverages advanced AI to propose variations of your text, ensuring your message shines through while keeping your unique voice intact.
Customizable prompts: One size doesn’t fit all. You can configure the prompts yourself to fine-tune the kind of suggestions you receive, putting you in control of your creative process.
Translation for clarity: It offers translated versions of your text, so you can double-check the meaning and accuracy across different languages.
Cherry-Picking at its best: You’re not bound by a single suggestion. Choose the best sentence variations from the two provided versions, mixing and matching to craft your perfect output.

Why you’ll love it #

This assistant isn’t just a tool; it’s an interactive experience. It helps you write accurately, encourages exploration with new variations, and offers an opportunity to learn and improve over time. Beware, it’s highly addictive, as it makes writing fun and rewarding.

Explore the joy of writing with a companion that evolves with you. Give it a try and see your words transform like never before.

You can reach it here!

Retool tip expand to fit container and padding

2024-11-29T00:00:00Z

Retool added the option “expand content to fit” to containers.

It’s neat since it allows creating a fully fluid layout that adapts nicely to any window size.

However, there’s a downside to this.

The option forces you into two constraints:

Having a single component in the container
Not having margin or padding

While we can manage having a single component, getting rid of padding might be an issue.

Update: there’s a way #

We found a way to use the “expand content to fit” option in a container while preserving paddings and margins for its child. The trick is to add an additional container and:

Set its layout to Stack.
Set the width and height of the child component to Fill.

The effect is not visible in edit mode:

but once in view mode, it works perfectly:

This is why we didn’t come up with this solution in the first instance, as it was not evident in edit mode.

Still, the CSS technique below remains relevant for more advanced layout operations.

Let’s work around this with a bit of CSS #

You know, Retool is pretty much fully hackable.

You can add CSS to change some defaults.

In this case, we want to add padding to a container that doesn’t allow a padding setting—this happens when the “expand content to fit” option is enabled.

Let’s suppose the container we want to fix is named container1.

To have fully functional padding on a container with the “expand-content-to-fit” option enabled, here’s the CSS you need to add in the CSS settings panel:

[data-testid="RetoolGrid:container1"]{
  padding: 0 20px!important;
}

Keep in mind that the component name need to be preserved, or just keep updated the CSS selector with the component name.

Here you can see the effect, with yellow highlighting the padding.

Happy hacking!

Free micro tool to generate organic SVG shapes

2024-11-27T00:00:00Z

We released another micro-tool created with Bolt.New, our preferred AI code assistant of the moment.

The purpose of this tool is to function as a shape generator, enabling users to create various forms effortlessly.

It allows customization by defining parameters such as the number of points, the level of randomness, and the desired color palette, offering a high degree of flexibility.

With these options, users can generate an endless array of unique variations, ensuring a tailored design for any purpose.

Once satisfied with the result, users can easily export their preferred shape as an SVG file, ready for use in digital or design projects.

The best part? It’s completely free to use. You can explore and try it out by visiting this link.

Retool app to generate and export QR code with Metatools

2024-11-26T00:00:00Z

In this second tutorial about QRCode generation using the MetaTools suite API, here is the first one, you’ll learn how to set up a Retool app that generates a QRCode for each table row and provides the ability to export it as an SVG file.

Set up a data source in Retool and add a table component. The data should contain a name and url property for our purpose, as we want to generate a QRCode that points to a specific company URL. Here’s an example of how the setup might look:

Next, configure the MetaTools QRCode API endpoint using its intuitive configurator. This step involves setting the parameters required for the API call, such as the desired output format and the QRCode content:

Once the configuration is complete, retrieve the endpoint configuration from the API Snippet modal. This provides the necessary details such as the URL and the payload structure, as shown below:

Go back to Retool to configure a Query Resource using a REST resource. Add the API URL, include the Authorization token in the header, and define the JSON payload. The content field should be dynamically linked to the selected row value in the table. Set the format field to json, as Retool automatically converts raw values to JSON:

By triggering this query on each row selection event in the table, you’ll be able to generate a new QRCode for each item in the table.

To display the generated QRCode in an Image component, convert the SVG string into a base64 string. This can be achieved using a small snippet of JavaScript code, as shown here:

'data:image/svg+xml;base64,' + btoa(qrcode.data)

Although this code can be set in the Transform Result of the Query, it’s better to include it in the Image component if you also plan to use the SVG source for a download button:

Here’s how the table looks with the QRCode displayed alongside it. The QRCode is dynamically generated for the selected row:

To allow users to download the QRCode, set up a button with JavaScript to handle the SVG download. Since the QRCode is already in SVG format, the code to enable downloading is straightforward:

utils.downloadFile(qrcode.data, table1.selectedRow.name, 'svg')

Here’s the final Retool app in action, complete with QRCode generation and export capabilities:

Create a QR code generator with Bolt new and Metatools

2024-11-25T00:00:00Z

QR codes, short for “Quick Response” codes, are a versatile and efficient way to encode data. From marketing campaigns to contactless payments, they enable instantaneous access to information through a simple scan. Their adaptability in various industries—like logistics for tracking, healthcare for patient information, and retail for discount codes—makes them indispensable in today’s fast-paced digital world.

Bolt.New stands as a groundbreaking tool that converts natural language prompts into fully functional full-stack applications. By streamlining app development, it bridges the gap between conceptual ideas and working code. Whether you’re a non-technical innovator or a seasoned developer, Bolt.New accelerates the journey from prototype to production.

The MetaTools QRCode API simplifies QR code creation. With just a straightforward API call, you can customize and generate high-quality QR codes in formats like SVG. It’s an excellent resource for developers looking to integrate QR functionality into their projects without dealing with complex libraries.

Step by step about how to create a working QR-Code generator app #

Step 1: Craft the Front-End with Bolt.New #

To start, let’s use Bolt.New for the front-end of our QR code generator app.

Prompt for Bolt.New:

Create a small app that presents the user with a textfield and a button. When the button is pressed, an API fetch is triggered to generate a QR code. Additionally, the user can select background and foreground colors. The API responds with an SVG QR code, which is displayed on the right side.

Step 2: Configure MetaTools API #

Visit API Documentation: Head to the MetaTools QRCode API.
Register and Obtain an API Key: Create an account if required and secure the API key for authentication.

To integrate MetaTools into the Bolt.New project, just copy the Prompt snippet from the API snippet button. Then add in the Bolt.New prompt something like:

This is the API specs: [PASTE-THE-SNIPPET-HERE]

That’s it! Run the magic button in Bolt.New to create your app. Here the final version up and running:

We’ll also published this app, both as Bolt.New available project and as available app as well.

Add easy cache to your endpoint with Metatools

2024-11-23T00:00:00Z

In today’s tech ecosystem, APIs play a pivotal role in connecting services. Tools like Zapier, Make, and Retool Workflows have revolutionized how we integrate functionality, often without writing a single line of code.

These platforms, known for their simplicity, enable you to create and deploy API endpoints or webhooks quickly.

However, convenience comes at a cost.

The Limitations of No-Code/Low-Code Webhooks #

While these solutions simplify integration:

Request-Based Billing: Many charge per API call, making frequent requests costly.
Latency Issues: Public endpoints, especially on platforms like Retool Workflows, may exhibit slow response times due to infrequent updates.
Frontend Compatibility: Directly calling such APIs from browsers often results in CORS (Cross-Origin Resource Sharing) errors.

Solving the Challenges with Proxy and Cache #

Here’s where tools like Proxy MetaTools shine. Acting as an intermediary, proxies can enhance the efficiency and accessibility of your APIs in several ways:

Proxy Functionality #

CORS Handling: A proxy resolves CORS issues by sitting between the frontend and the target API. Instead of dealing with complex configurations, you can route calls through the proxy.
Enhanced Security: Sensitive endpoints can be hidden behind the proxy, reducing exposure.

API Caching #

Frequent API calls? Set up a cache with Proxy MetaTools to reduce redundant requests and improve response times:

Optimized Billing: Platforms like MetaTools only charge when the cache is refreshed, unlike others that bill per request.
Latency Reduction: Cached data ensures that most requests are served instantly, especially useful for APIs with infrequent updates.

Example: Integrating with Retool Workflows #

Suppose you’re using Retool Workflows to trigger processes. By leveraging Proxy MetaTools:

Configure the proxy for CORS-friendly access from your frontend.
Add a cache layer to limit repetitive calls, ensuring cost efficiency and improved performance.

Why Proxies and Caches Matter #

Proxies and caches are more than just tools; they’re enablers. They allow you to scale applications, reduce costs, and overcome technical limitations imposed by third-party platforms.

Metatools simple translator tool

2024-11-15T00:00:00Z

We’re releasing our first micro-tool, powered by MetaTools suite, developed with Bolt.New.

It’s a translation tool that lets you input text and get it translated into different languages.

You can select the language you need, and see the results in seconds. It’s simple and effective.

The tool was developed on Bolt.New, a cutting-edge environment that simplifies development. This is the first in a series of tools we’re building with MetaTools integration, showcasing not just the tech but also the potential for innovation.

You can try the tool live here: Translation Tool.

Want to dive deeper?

You can fork the tool directly from here and enhance it with your own creativity: Bolt.New Project.

MetaTools is designed to make integration and development faster, smarter, and more adaptable. Learn more about the MetaTools ecosystem at MetaTools Website.

The translation tool is just the beginning. Whether you’re exploring possibilities or building the next big thing, MetaTools and Bolt.New are here to empower your journey. Try it out, fork it, and start creating.