Mainframe centralizes data from other services and helps you build software with that data. This is our second progress update, thank you for checking it out! Here’s our last update if you missed it.
We made a lot of progress over the last month:
- 📈 Dashboard
- 🤖 AI-generated components
preview - 📦 Import npm packages
- 🔒 Credentials
- 🌚 Editor dark mode
- 🔗 Integrations
- GitHub OAuth
- Spotify* (cloud only, pending approval)
- Render
- Vercel
- BitBucket
- Val Town
📈 Dashboard
Built something cool using our Code Playground? Mainframe now has a Dashboard page for your components. To add a component, click on the “Add to dashboard” button from the Playground tab on any table or object.
🤖 AI-generated components
preview
LLMs have been doing a great job at code generation. With Mainframe, they can generate components using live data from other apps. Type in a prompt, and get a component you can add to your dashboard! I had a lot of fun generating charts from Vercel deployments and my Spotify top songs. You can try it out on the playground.
Raz inspired this feature with his demo, go check it out!
📦 Import npm packages
You can now import any npm package from our playground! Any browser-compatible package should work. No installation needed.
Our first editor was based on Sandpack, which relies on CodeSanbox and their node-like environment. Aside from the forced “Open in Sandbox” button, they also had no support for importing directly from URLs.
We switched to a custom implementation using CodeMirror for the editor, esbuild to bundle tsx into JavaScript, and an iframe to preview the component. The way we achieve npm support is by translating any imported package to its esm.sh URL: lodash → https://esm.sh/lodash. The browser handles imports from there.
🔒 Credentials
Currently Mainframe only supports a subset of API endpoints. If you want to access an endpoint that we don’t support, you can now use our credentials API. It lets you obtain a fresh access token, which can be used on a client SDK or a fetch call.
🌚 Editor dark mode
Our code editor now has a Dark Mode toggle. Click on the sun/moon icon at the bottom right corner of the editor to switch between color themes.
🔗 Integrations
- GitHub OAuth
- Render
- Vercel
- BitBucket
- Val Town
- Spotify: Only available on Mainframe Cloud. Currently pending review approval.
That’s it for this update!
If you want to learn more or share your ideas, please reach out on Discord or Twitter!
Happy building,
André Terron