Apps are launched from their own surface in Tines. Upon first visit, you'll be welcomed by a few slides to help get you started with Apps. Click the New button to create a new App.
The App builder
Once a new App is created and you are in the builder, the build process takes place in the left-hand conversation panel.
In your first message, describe what you want to build and an initial version of your App will be generated within minutes.
🪄Tip
Prompts are important. Clear inputs lead to better results. Consider these:
What you want your App to do, including any specific features or functionality.
Whether the app should be powered by real data, and if it should connect to an existing story.
The intended look and feel. You can upload mockups, references, or describe the desired design direction.
Whether you want the App builder to generate endpoints for you. Specify this in your prompt and it will be handled automatically.
Preview
The Preview tab displays the visual output of your generated app. It is a fully interactive sandbox where you can interact with your application as it runs.
Using the built-in browser controls, you can refresh the view, navigate back and forward, and preview your App across different viewport sizes (Desktop and Mobile).
Code
The Code tab contains all of the React code generated for your App. From here, you can browse files, search within the codebase, and edit code directly. Save any manual edits with cmd + s/ ctrl + s for individual files, or across all files with cmd + option + s/ctrl + alt + s.
🪄Tip
Endpoints
Endpoints are what connects your App to Tines workflows. Send data to or receive data from a story using endpoints.
App endpoints can be created in multiple ways:
Workbench-generated endpoints
Workbench can automatically create endpoints for you. When building something new, Workbench acts as a companion that can quickly generate endpoints within existing stories or spin up new, dedicated stories for your App. From your App, you can ask Workbench to create or use endpoints, and everything is handled within the conversation.
ℹ️Info
Manually created endpoints
You can manually define endpoints, either in an existing story or in a new one. If you’ve already built a workflow you want to expose in your App, you can enable its inputs and outputs as App endpoints so your App can interact directly with the story and its data. Alternatively, you can still use Workbench to help set these up more quickly.
To manually define endpoints:
- Navigate to the right panel on a storyboard → Interfaces section → App endpoints- Ensure you have a webhook action to set as an entry point, and a message-only event transform action to set as an exit point. The entry point converts to an endpoint upon configuration.
The Endpoints tab provides a consolidated view of all endpoints used by your App to communicate with one or more underlying stories. This view inside your App helps maintain context and provides visibility into key integrations. From here, you can open any endpoint’s associated story in a new tab to inspect the underlying workflow in more detail.
Routing
Routing allows you to create multi-page Apps, and helps users of your App navigate between different views.
Apps can have multiple pages, with their own unique URLs
You can deep link to a URL, or refresh the page and it will persist
Apps can consume the path, and URL parameters
Routing is fully supported within Cases and Collections (you won't see the URL)
How to use routing
The App builder has full context of routing. Simply prompt to build a multi-page App.