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.

/html-app create an app that allows my internal users to submit IT help tickets. On submit, show a success message and clear the form.

Additional Examples

Basic Form Application

/html-app create a contact form with fields for name, email, and message. Include form validation and a success message.

Data Display

/html-app create a dashboard that displays employee attendance records in a table with sorting capabilities

Interactive Tool

/html-app create a calculator that converts between different currencies using current exchange rates

User Management

/html-app create a user registration page with email verification and password strength indicators

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:

  1. Create your application using the /html-app command

  2. Save it to global file storage in a subsequent step:

/filestorage write the result from the previous step to "customer-feedback-form.html"

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:

  1. Create separate automations to serve as your backend services
  2. Add HTML triggers to these backend automations
  3. Return to your frontend application and ask to connect the buttons/functions to your backend
  4. Provide the API endpoints and API keys for connection

Example Backend Integration:

/html-app update my IT ticket form to submit to this endpoint: 
https://mytriggerEndpoint
API Key: xyz123

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.