We are pleased to announce that we are opening the Boxel AI platform and applications to early access users so they can experience the UI and interact with the AI features.
To join the early access program, you need an invite code. Users who have signed up on cardstack.com will receive invite codes throughout this week. Other users can join the Discord channel, where invite codes will be distributed periodically as we expand the program. Please note that the invite codes are quantity-limited, so once a certain number of users have joined, the invite will be invalid. You will then need to look for a new invite code posted in the Discord channel.
Getting Started
The purpose of this initial release is to test the registration and account provisioning system, as we have rolled out usage metering and billing for Boxel credits to facilitate AI usage within the Boxel environment. To create an account and obtain free Boxel credits for AI testing, you need to provide a valid credit card during registration. You will not be charged unless you subscribe to a paid tier plan or choose to purchase additional credits. We plan to introduce more payment methods, including on-chain payments, in future releases.
Once you have obtained your invite code, visit app.boxel.ai to create an account. You will choose a username, which will serve as your identifier for communicating with the AI chatbot over the Matrix chat protocol. It will also be the username used to communicate and share information with other users when we release the multi-user collaboration features. Please choose a name that represents you appropriately.
After creating an account, you will be directed to the Boxel dashboard. During this early access period, sample apps are distributed and pre-installed when you create a new workspace.
To get started, click the plus button to create a new workspace and wait for the system to copy a set of code and data from the seed realm, where sample apps are published. During the testing period, each time we update the seed realm with new content, you will need to create a new workspace to pull in those updates. We want you to be able to modify the sample applications and add your own data without encountering version management issues. Therefore, we are temporarily lifting restrictions on the number of workspaces a user can create during this period.
Once your workspace is created, you can explore its contents using the Cards Grid window. This window displays all types of content in your workspace and allows you to navigate individual resources.
We have included a fully-fledged application called Blog App to showcase what a finished application looks like on the Boxel platform. You can navigate to the Blog App’s home page for the publication called “Ramped” by clicking on the card with the “m.c.escher-style-ramped” logo. The publication’s admin console displays blog posts that we have included. These blog posts are AI-generated, demonstrating how content can be formatted to resemble traditional web pages.
You can edit blog post content by clicking the pencil icon, which opens the edit template. Every card comes with a standard edit template provided by the platform, allowing you to modify any parameters or fields defined in the card schema. Cards can also be linked. For example, a blog post has an author, and authors are linked in the edit view. Clicking the pencil icon switches back to the view template, where the chosen author bio appears at the bottom of the blog post. Returning to the Ramped homepage, you can click on the author navigation to view all authors associated with the publication. This demonstrates the composability of card-based applications, enabling templates to be reused and embedded across different cards.
AI Content Generation
To create a new blog post, click the plus button at the bottom of the Blog App. This opens a card chooser dialog, defaulted to the blog post type. After clicking go, you will see a blank blog post edit view. Fill in the information manually or ask the AI to generate content for you. Summon the AI by clicking the AI assistant icon at the bottom right. If you are in an active session, start a new session by clicking the new session button to ensure a fresh context for the AI bot. The AI assistant recognizes the currently open card, referred to as the “top-most card.” It appears as an attachment to the message you send. The AI assistant can only modify the currently open card.
Chat with the AI assistant to draft a new article, reminding it to fill out all fields in the blog post card. Click the send icon to submit your request, and the AI will use one of the LLMs, currently defaulting to OpenAI’s ChatGPT. When the AI generates content, click apply to approve the updates. If no apply button appears, type “please do it for me” to trigger “tool use” and instruct the AI to act on your behalf. After the AI makes changes, preview the results by clicking the pencil icon to exit edit mode. Please note that the system does not currently handle image generation. For featured or thumbnail images, use your own generator or free stock image services like unsplash.com. We plan to incorporate image uploads and generation in future releases.
Behind the Scenes
To view the code behind the blog post card, switch from Interact mode to Code mode. By default, this opens the instance—the blog post you created—in the code editor. This data file is stored on the Boxel service, which you can back up or edit directly. Additional templates associated with the blog post card, such as isolated, embedded, fitted, edit, and atom, are available in the right panels. These templates enable composability, allowing other card-based applications to use them as building blocks for composite UIs.
Pay particular attention to the fitted view, designed to adapt to various slot sizes and aspect ratios using container queries supported by modern browsers. View the code for these templates in the inspector column by clicking the blog post card tile. This navigates to the TypeScript-based implementation of the blog post, where you can modify templates. To add a custom field, such as an “embargo date,” use the schema editor to define a date field. Returning to the Blog App will display the new field. To change template behavior, edit the .gts file, which uses a built-in HTML templating language. Future updates will cover template modifications and AI-assisted edits for non-developers.
As part of this initial release, we have included sample cards from the Card Maker series, such as the About Me card, Product card, and Mortgage Calculator card. These examples showcase customization and extensibility. If you encounter issues, error messages will be displayed, but unresolved errors may result in cards being rendered in red. Share screenshots of errors on Discord for support.
We will announce new sample apps, including those for CRM and task management, on Discord when they are complete. Creating a new workspace will be necessary to access these updates. Walkthroughs like this will accompany new features.
We hope these sample apps demonstrate the platform’s capabilities and encourage users to create their own cards and apps. Prepare to submit your creations to a community catalog in future releases. We anticipate creativity from users, especially with AI-assisted code generation, to develop functional apps useful for personal workspaces and potentially profitable in a global marketplace. The Boxel credit system supports AI costs as well as allows users to purchase creations from others to meet specific needs and solve problems.
Looking Forward
The community catalog, also known as the catalog release, is our next major milestone. We aim to build an open ecosystem of creativity and sharing, powered by AI and aligned with the decentralized ideals of the Web3 movement, to promote truly, open, AI.
