HTML App Command Guide
Learn how to use the HTML App slash command to create a front end application
Why Use HTML App?
The /html-app
command enables you to create simple front end applications. Perfect for:
- Creating internal tools and dashboards
- Building form-based applications
- Developing data collection interfaces
- Constructing interactive web experiences
- Prototyping web applications
Basic Usage
Use the command followed by a description of the application you want to create. Be specific about functionality, design preferences, and user interactions.
Additional Examples
Basic Form Application
Data Display
Interactive Tool
User Management
Iterating and Refinement
Getting your application exactly right might take a few (or a dozen) iterations. You can have a conversation with Pinkfish to refine your application until it meets your needs. Every now and then, Pinkfish will kind of totally forget what it’s supposed to be doing. If that happens, delete the conversations that led to the bad state. Re-run the result that was last working well. And start from there again… but try a slightly different prompt.
Saving and Sharing Your Applications
Save and share your HTML applications in two steps:
-
Create your application using the /html-app command
-
Save it to global file storage in a subsequent step:
This provides a shareable link that allows others to:
- Access the application directly
- Embed it in other pages
- Test functionality
- Review the implementation
- Collaborate on improvements
Pro tip: Use descriptive names when saving your applications to make them easier to find and manage later.
Creating a Backend for Your Frontend
While the HTML App command creates standalone front-end applications, you can connect them to backend services:
- Create separate automations to serve as your backend services
- Add HTML triggers to these backend automations
- Return to your frontend application and ask to connect the buttons/functions to your backend
- Provide the API endpoints and API keys for connection
Example Backend Integration:
Important Security Note: When including API keys in frontend applications, they will be visible in the client-side code. Only use this approach if you’re comfortable with public access to your backend services. We’re working on a more secure solution for handling authentication and authorization.