How to Build an AI-Powered Code Explainer App with ToolJet and Claude

Key takeaways

• Build a full AI code explainer in under 30 minutes with ToolJet and Claude.
• Healthy ROI on AI coding tools is 2.5-3.5x (average) and 4-6x (top quartile).
• Low-code handles 90% of the plumbing, saving AI budget for reasoning tasks that need it.
• 66% of organizations report productivity gains from AI tools like this one, per Deloitte.
• 40% of enterprise apps will include task-specific AI agents by 2026, per Deloitte.

Ever opened a file and thought: ‘What does this even do?’ Or spent 20 minutes tracing a function someone else wrote? These are real problems that slow teams down every day.

In this tutorial, you will build an AI-powered code explainer app using ToolJet and Claude. ToolJet is an enterprise-grade low-code platform built for teams that want to ship internal tools fast.

With ToolJet, you can build AI-powered tools without managing a backend. For example, in this app, you paste any code snippet into the left panel, click a button, and get a plain-English breakdown on the right in seconds. No backend required. No complex infrastructure. Just ToolJet’s drag-and-drop app builder and an Anthropic API key.

It is useful for code reviews, onboarding, documentation, and anywhere else someone needs to understand unfamiliar code fast. And because it runs on ToolJet’s self-hosted enterprise platform, so your code stays within your infrastructure boundary.

By the end of this tutorial, you will have a working internal tool your whole team can use.

Prerequisites:

• A free ToolJet account (cloud or self-hosted)
• An Anthropic API key
• No prior coding experience required

Log in to your ToolJet account and click Create new app. Give it a name like “AI Code Explainer.”

You will land on the ToolJet canvas. This is your drag-and-drop workspace. Think of it like a blank whiteboard where you place and connect UI components visually.

Set up the two-panel layout:

1. Drag a Text component onto the left half. Set its value to Code to be explained. This is your section label.
2. Drag a Textarea component below it. This is where users paste their code. Rename it to codeInput in the component settings.
3. Drag a Button below the textarea. Change its label to Generate explanation >>.
4. Drag a Text component onto the right half of the canvas. This is where the explanation will appear. Rename it to TextOutputCodeExplanation.
5. Add a label above it: another Text component with the value Explanation.

Your layout is ready. Now let’s connect Claude.

New to ToolJet? Start with the app builder overview to get familiar with components and the canvas before continuing.

Before you can talk to Claude, you need to connect your Anthropic API key to ToolJet.

1. Click the Data Sources icon in the left sidebar.
2. Search for Anthropic and click it.
3. Paste your Anthropic API key in the field.
4. Click Save. ToolJet confirms the connection.

Note: Your API key is stored securely inside ToolJet’s data source management layer. It will not appear in any query code, and it rotates per environment if you are running a multi-environment setup.

Deploying ToolJet yourself? Follow the Docker setup guide to get your instance running in under five minutes.

Now let’s set up the query that sends your code to Claude and gets back an explanation.

1. Click + in the query panel at the bottom of the screen.
2. Select Anthropic as the data source.
3. Name it codeExplainer. Spelling and capitalization matter here. The name is referenced later.
4. Set the Model to claude-haiku-4-5.
5. In the System prompt field, type: You are a software engineer working in Fortune 500.
6. Leave the Message field empty for now. You will fill it in Step 5.
7. Click Save.

If you name the query anything other than codeExplainer, the binding expression you set up later will fail silently. Match the case exactly.

Want to see what else ToolJet’s AI connector can do? Browse the Build with AI docs for supported models and query patterns.

Here is the part most tutorials skip, and the reason things break when you paste real code.

When you paste multiline code (with line breaks, quotes, or special characters) directly into a query field, it corrupts the request format. Claude gets garbled input and either errors out or explains the wrong thing. The fix is a small JavaScript query that safely wraps your code before sending it.

1. Click + in the query panel again.
2. Select Run JavaScript.
3. Name it buildMessage.
4. Paste this code exactly:

return [{ role: "user", content: "Explain this code: " + components.codeInput.value }]

5. Click Save.

That’s it. This query reads whatever the user pasted into the textarea, structures it into the format Claude expects, and hands it off cleanly. No matter how messy or complex the code is, the payload stays valid.

Building more complex AI workflows? Explore ToolJet’s workflow builder to chain multiple queries and conditions declaratively.

Now go back to your codeExplainer query and fill in the Message field.

1. Click codeExplainer in the query panel.
2. In the Message field, type:

{{JSON.stringify(queries.buildMessage.data)}}

3. Click Save.

This tells codeExplainer to use the output from buildMessage as the message it sends to Claude. The JSON.stringify call converts the JavaScript array into a clean string the Anthropic API accepts every time.

Curious how other AI tools handle prompt structuring? See the AI model comparison app built with ToolJet and Portkey for more patterns.

Your queries are ready. Now let’s make the button trigger them in the right order.

Click the Generate explanation button on the canvas. In the right panel, scroll to Events.

Add the first event:

• Event: On click
• Action: Run query
• Query: buildMessage

Add the second event:

• Event: On click
• Action: Run query
• Query: codeExplainer

The order matters. buildMessage has to run first so it prepares the message before codeExplainer fires. If they run in reverse, codeExplainer reads stale or empty data and the request fails.

Want to understand the full ToolJet component system? Read the button component docs for all available event types and actions.

Almost there. Now let’s make the right panel show Claude’s response.

1. Click the TextOutputCodeExplanation component on the right side of the canvas.
2. In the right panel, switch the format to Markdown.
3. In the Text field, type:

{{queries.codeExplainer.data[0].text}}

4. Toggle Show loading state on so users see a spinner while Claude is working.

That binding drills into Claude’s response structure. The API returns an array of content blocks. Index [0] is the first block, and .text is the string inside it. If you just bind to queries.codeExplainer.data without the path, you will see a raw JSON object instead of readable text.

Need help understanding ToolJet data bindings? Check the transformations guide for more ways to shape query output before displaying it.

Click Preview in the top right to open the live app.

Paste this into the textarea:

function addNumbers(a, b) {  return a + b;}const sum = addNumbers(5, 3);console.log(sum);

Click Generate explanation >> and wait a moment. You should see a formatted explanation appear on the right, with headings, bullet points, and inline code highlights. Congratulations, your AI code explainer is live!

Once your team finds this app, they will use it constantly. Test edge cases: empty input, 500-line files, non-English variable names.
Want to lock down who can access this app? Review ToolJet’s security model and SSO setup to add role-based access control.

This is where the low-code platform advantage really shows up extending the app takes minutes, not sprint cycles. Once the base loop works, layer in features your team actually wants: language detection, summary mode, bug hunting, unit test generation.

Ideas teams have shipped on top of this base:

• Add a dropdown to pick “Explain / Summarize / Find bugs / Generate tests”
• Log every request to ToolJetDB for audit and retrieval
• Pipe the output to Slack via the webhook connector
• Add a “Copy explanation” button with a one-liner JavaScript action
• Chain a second Claude query that rates the code quality on a 1 to 10 scale
• Stream responses for progressive output on long inputs

Coordinating multiple AI calls across your app? Set up ToolJet’s MCP server to orchestrate agents and queries at scale.

ToolJet holds up well against Retool, Appsmith, and Budibase for AI builds, especially on self-hosting, pricing, and native LLM support.

ToolJet ships the full AI-app stack in the open-source tier. Retool gates most of that behind Enterprise. Appsmith and Budibase trail on native LLM integrations.

Comparing head-to-head? Dig into ToolJet vs Retool to see where the pricing and feature gaps actually land.

A code explainer app built on ToolJet and Claude haiku-4-5 takes you from blank canvas to working tool in under thirty minutes. The key is getting three things right: the buildMessage query for safe payload construction, the button event order, and the .data[0].text binding that surfaces Claude’s response correctly.

ToolJet ships native LLM connectors, self-hosted deployment options, SSO, audit logs, and zero end-user charges in the open-source tier. Your team gets a production-grade AI internal tool without enterprise price tags or cloud lock-in. You can also extend it with ToolJet Copilot for in-app AI assistance as your builds grow more complex.

Build once, deploy anywhere, scale without surprise bills. This is the pattern behind most AI-native development on low-code platforms that bind the model output directly to a component, no custom backend needed.