Show HN: Superblocks AI – AI coding assistant for internal apps (superblocks.com)
Today we launched Superblocks AI and are excited to hear feedback from the HN community!
Superblocks AI combines the power of the Superblocks drag-and-drop App Builder with robust AI code generation, code optimization, code explanation, mock data generation, and API call generation across SQL, Python, JavaScript, JSON and HTML.
We built Superblocks AI with the intention to streamline some of the repetitive and often confusing aspects of building internal tools, here’s a brief overview:
Generate Code: LLMs like ChatGPT have quickly become a critical part of developers' lives and we wanted to bring that experience natively into our product. The response is streamed for the best UX, similar to Chat-GPT, and can be modified before use.
Explain Code: Understanding someone else’s code for large internal engineering teams is often a challenge. Highlight code and Superblocks AI offers an explanation that you then have the ability to add as a comment.
Edit Code: You can make alterations to code by highlighting it and choosing prompts like optimize performance, enhance readability, or something custom. We've added an inline code diff view for easy verification of changes.
Generate API Calls: You often want to make an API call but need to spend 30 minutes looking up the documentation and crafting the correct call in Postman. We provided a way for you to give a prompt, and Superblocks AI will generate REST and GraphQL queries for APIs like Stripe, Salesforce, your favorite SaaS provider, and more.
Generate Mock Data: This enables faster UI development by generating mock data for components like tables, charts, grids etc., which can be especially handy during prototyping.
I'd love to hear feedback from the HN community on how you think this feature should evolve over the next few months!
65 comments
[ 2.8 ms ] story [ 149 ms ] threadAs with all low-code / no-code solutions, you can't please all the people all the time. But I felt the design choice in this particular case was overly rigid and with little justification.
With that being said, there may be ways to accomplish what you're looking for with the current state of our Workflows feature so feel free to send me a DM on Twitter or Linkedin.
Assisting in the creation of single purpose functions is, in my experience, by far the most reliable use case for LLMs in regard to code creation at this point in time, yet is something I haven't seen many companies really lean into. In fact, the only other example I know of is Cloudflares Workers Workshop [0], which I have been waiting for since May.
What I especially like about the implementation showcased in your demo videos though was the visual component. Some subtle animations, effective use of diff, methods being editable before pasting, it all felt very cohesive and thought through, which is something I can't say about every company utilizing OpenAIs APIs. Seems more like something that can serve a real value add for users, rather than just jumping on LLMs because it's the hot thing this summer.
Really hope more people are experimenting with the "visual implementation" of LLMs, using animations and graphs to communicate LLM outputs has a lot of unused potential currently.
[0] https://blog.cloudflare.com/introducing-cursor-the-ai-assist...
I presume you bought the domain name from them in that case.
I've been focused on similar concepts with my open source AI coding tool. My tool is a command line GPT chat tool. You can ask it to write or edit code in any git repo. It displays live diffs as the AI edits stream in and automatically integrates them into your source files. I think this is similar to what your article is describing?
Folks might want to check out `aider` if they want to do the style of AI coding you're showing, but on their own git repos.
https://github.com/paul-gauthier/aider
ZIRP Hustle is real.
In terms of ChatGPT, Superblocks's goal is to develop a simple visual interface for creators to integrate AI into their workflow to build applications quickly. The platform makes it easy to verify, deploy, and monitor your changes, which would be difficult to do with just a chat interface.
The fact that it's even willing to write a function which removes PII from a string is nonsense. No such function is possible.
And the comment for filterUsersTable is incredibly long, tedious, and unhelpful.
How does the SQL thing work? How does it know what my schema is? That's nowhere on screen.
The only believable example is the Salesforce one which anyone could do.
This is good feedback. I think having an ability to adjust verbosity is valuable. A comment version should maybe be more concise than the actual explanation.
> How does the SQL thing work? How does it know what my schema is? That's nowhere on screen.
When you configure integrations with Superblocks, we query your integrations metadata which we use to give the best answers here.
This might be a bit contrarian, but I don't really think there's product market fit here, at least for engineers. And if given in the hands of non-engineers, you'll need to have an engineer at least look over the code anyway. I haven't seen or heard of anyone that seriously uses ChatGPT to generate code and uses it in prod (apart from engagement-farming Twitter posts).
> Understanding someone else’s code for large internal engineering teams is often a challenge
Without proper context, this will fail miserably. Have you ever seen a corporate codebase before? It can be the definition of "wtf?" even for a seasoned developer that's been working there for years.
This AI-generated code trend reminds me of the "no-code" fad of the past decade.
I would agree with this in general. The main goal here is to optimize the "editor experience". When I personally code, I'll have ChatGPT pulled up on the side in case I need to reference it for speed. Some examples of how I might use it are:
- add some tests for me to review - take an existing piece of code and modify it in some way - help me think of ways in which I can write some code if I'm lazy that day.
This would generate code that after I iterate on it would need to be reviewed which speaks to your point, "you'll need to have an engineer at least look over the code anyway" which I agree with.
The main goal is to have it there as a resource to pair program with rather than trusting it without review/input.
The value added is that you don't send your source code to OpenAI and/or their parent org Microsoft.
Recently I've been using git diff and asking 3.5 to write the PR description for me and so far it is doing quite well. The 16k tokens means I can feed even more into it.
I have. And I'm sure others have too. I dare say there are many who probably _shouldn't_ be using it because of privacy/IP concerns and so you won't hear about them.
> cute novelty [...]
I thought the same not so long ago. But gpt4 for me was a game changer. It's helped me debug and fix some legitimately complex code, and has been awesome at wholesale refactoring modules to fulfil a new purpose. E.g. today I wanted help reconciling between runtime and persistent LRU cache stuff. And it understood what I wanted and assisted. After a few nudges it gave me a refactored module with comments and a few tests. It's like having a very capable junior dev in one's pocket :P
Ps. Trust me: it's not long before we have ai coding bots that grab open tickets and hammer together PRs with full testing suites. I imagine it's already happening.
Not quite, that I know of, but some of us are working on it :)
I have a feeling that while the glorious future you describe can probably be realized using LLMs as a foundational technology, the software engineering effort needed to get there is on par with other AI moonshot projects e.g. autonomous vehicles.
If you or others reading this are interested in this topic, see this post for some interesting discussion and links to projects in development (and in the comments there's a link to a Discord server that was set up for further discussion): https://news.ycombinator.com/item?id=36422730
But I use it when I'm lazy, tired or at times drinking.
And then it's really nice. At times it costs me too much time solving it's mistakes. But then it nails something perfectly and I'm impressed again.
It's useful to recognize when a dialog is a dead-end, otherwise it's easy to enter a rabbit hole that the llm can't get out of. Best to poke at it from another angle and/or within a new dialog, then.
Where did anyone say it was?
It's not perfect at "zero-shot" answers but from my experience is very good when you work with it conversationally.
The real value proposition of GPT isn't that it can solve really hard problems. The value proposition is that it's about as capable as a junior engineer, except it can write code much faster than any junior engineer, so it can speed you along on the boilerplate-y parts of coding that otherwise would be a lot of manual effort. It's especially useful for things that feel "easy" but which I don't have the relevant domain expertise. For instance, the other day I needed to write a fairly trivial shell script to parse some JSON files. I never write shell scripts and I always forget the syntax, but GPT wrote it correctly on the first try. That probably saved me 20-30 minutes of googling for how to do things like read files, etc in shell scripts.
It’s useful for average things and concepts we might be unfamiliar with.
It’s of limited use, if not utterly useless, for most things a senior would have a hard time wrapping their head around.
And where it really shines, is when adapting an answer you’d otherwise look for on Google to your code, context, and constraints.
ChatGPT is not really equipped to do this level of code design because there are too many steps for it to handle at once. It can handle your instructions if it could first write a detailed design spec, then write code and unit tests, then run them, read the compiler output, and iteratively make changes.
IOW, this would require a purpose-built solution which uses ChatGPT's underlying engine to take your list of requirements and turn them into built and tested code.
There's no code design going on here. My solution was literally just going through like 100 StackOverflow answers & Microsoft's god-awful documentation to get the 50 lines of code that does what I need it to do.
In fact, this is precisely what I'd hope ChatGPT would be good for. Most of my final code is simply copy-pasted from SO/example repos/official docs. He's the correct function (comments added by me so I'll know wtf this is meant to do when I look at it again in 3 months).
---
Sure, let's break down the problem:
1. Identify the topmost window: We can use the `winapi` crate in Rust to interact with the Windows API. The function `GetForegroundWindow` can be used to get a handle to the topmost window.
2. Check if the window is a Windows Explorer window: We can use the `GetClassNameW` function to get the class name of the window. If the window is a Windows Explorer window, the class name should be `CabinetWClass`.
3. Get the path of the active folder in the Windows Explorer window: This is a bit more complex. We can use the `SHGetPathFromIDListW` function from the Shell API to get the path from an item ID list. However, getting the item ID list for the active folder in a Windows Explorer window is not straightforward. We might need to use COM interfaces like `IShellWindows` to get the `IWebBrowserApp` for the window, and then use `IWebBrowserApp::LocationURL` to get the URL of the active folder.
4. Return the path as a string or a blank string: This is straightforward. We just need to convert the path to a string and return it, or return a blank string if the window is not a Windows Explorer window.
Here is a skeleton of the function in Rust:
Please note that this is a skeleton of the function and it's not complete. The part to get the item ID list for the active folder in a Windows Explorer window and get the path from the item ID list is complex and requires using COM interfaces, which is not straightforward in Rust. You might need to use a crate like `winrt` to interact with COM interfaces in Rust.---
* Formatting a huge confusing blob of python code, markdown, and json into something readable.
* Writing "boring" python functions needed to interface with AWS DynamoDB & S3.
* Going from 0 -> 1 on a side project creating printable QR codes that redirect to custom links with logging. (Literally gave me picture perfect step by step instructions here, as if it was reading off the AWS UI. The sole issue I had it helped me troubleshoot).
* JS tutoring.
* Integrating an unfamiliar authentication provider with a web app. It gave me boilerplate code that needed like 1-2 tweaks to work perfectly.
* Long winded architectural discussion giving me ideas on where to take internal libraries.
Other than that, I've actually found that the github copilot CLI is a fantastic tool I've been turning to more and more. There are so many CLI tools that I kinda sorta remember the flags for, and now I no longer have to munge about looking things up. Just earlier I needed some test api key and I just said "!! generate a random api key", and it immediately came back with "openssl rand -base64 32". That works, and saved me time googling it.
Also, your prompt here is pretty weak. For something complex you need to be very specific and give it explicit instructions on how to reason through the problem, explain it's thinking, etc. I find the more context I provide in the prompt, the better it performs. In particular leveraging the system prompt makes a big difference.
Copilot/GPT is excellent at writing lots of new lines of code. It's also really good at getting you started in code/frameworks that you don't really understand.
However, Copilot/GPT is not nearly as good at troubleshooting problems in existing code. If your job involves lots of bug fixing or tweaks to existing features, Copilot and GPT are next to useless.
I've noticed that if my work falls into the first category, Copilot often speeds me up something like 30% to 40%. If my work falls into the second category, it's 0%.
They will talk down to you about it until the wave rolls over them. It’s a tradition as old as mainframe engineers mocking PDP-11 hackers.
This one will be particularly rough for the late adopters, since one of the effects of ML code generation is compression of experience level.
However, for me, what I was hoping it was/ one thing I'm still looking for: Feed in my whole repo to the GPT-4 API, train on it, and ask questions about the code base/ particular functions. Has anyone seen that?
- https://github.com/tzapio/tzap
- https://news.ycombinator.com/item?id=36377918
https://aider.chat/examples/2048-game.html
Here's an article about how it does that:
https://aider.chat/docs/ctags.html
I think bloop is also good for searching and Q&A against code. I'm not sure if it will let you edit/modify the code though.
https://bloop.ai
> what's a simple, popular open source android app?
One simple and popular open source Android app is "Minimal ToDo". It's a simple task management app with a clean, minimalistic user interface. The source code is available on GitHub and it's a great project for beginners who want to understand the structure and functioning of an Android app.
> clone command to clone minimal todo?
To clone the Minimal ToDo app from GitHub, you can use the following command:
This will create a local copy of the Minimal ToDo repository on your machine.> tell me about the overall structure of this codebase
This codebase appears to be for an Android application, specifically a to-do list app. The structure is typical of an Android project, with Java source files, XML layout files, and resource files.
1. Java Source Files: These are located in the `app/src/main/java/com/example/avjindersinghsekhon/minimaltodo` directory. The package structure suggests that the app is divided into several modules such as `About`, `AddToDo`, `Analytics`, `AppDefault`, `Main`, `Reminder`, `Settings`, and `Utility`. Each module contains classes related to its functionality.
2. XML Layout Files: These are located in the `app/src/main/res/layout` directory. They define the user interface for different activities and fragments in the app.
3. Resource Files: These include drawable resources (images, icons), values (strings, dimensions, colors), and menu definitions. They are located in the `app/src/main/res` directory.
4. Gradle Files: The `build.gradle` files specify the build configuration for the app. There are typically two such files in an Android project: one for the project and one for the app module.
5. Test Files: These are located in the `app/src/androidTest/java/com/example/avjindersinghsekhon/minimaltodo` directory. They contain tests for the application's functionality.
6. Manifest File: The `AndroidManifest.xml` file in the `app/src/main` directory declares the app's components to the Android system and specifies permissions and other app requirements.
7. Properties and Configuration Files: Files like `gradle.properties` and `.travis.yml` are used for configuration of the build system and continuous integration services.
8. Other Files: The `google-services.json` file is typically used for configuring services from Google Firebase. The `.idea` directory contains configuration files for the IntelliJ IDEA IDE.
about.sourcegraph.com
I really like it for figuring out how something in my code base is done, like figuring out where exactly rate limits happen and what service we use to track them.
[1] https://www.airplane.dev/autopilot
Budibase. https://github.com/Budibase/budibase
Appsmith. https://github.com/appsmithorg
Tooljet https://github.com/ToolJet/ToolJet
And more (I'm sure others will comment)