This section, we assume that you have all the prerequisites as mentioned in previous steps. If not done already, kindly do the needful to ensure you have an active workspace with prerequisites configured correctly.
Welcome to the heart of this tutorial, where we'll guide you through the exhilarating process of creating apps with the agent skills. Whether you're a seasoned developer or new to the game, you'll find this section both enlightening and empowering. So, let's roll up our sleeves, embrace the future of app creation, and bring your app to life, effortlessly and efficiently! Choose one of the options from below to follow the app building journey.
Use the /fw-app-dev skill and enter your use case
Use the fw-app-dev skill to scaffold app projects and implement core features on Freshworks Platform 3.0+. The skill enforces current manifest, request-template, and serverless patterns and blocks legacy Platform 2.x output.
Generate an app
Run /fw-app-dev in your AI assistant chat window to scaffold a new app. Use a prompt for quick starts, or a PRD when you have structured requirements.
Generate an app from a prompt
Describe your use case in natural language after the /fw-app-dev command.
The following example creates a Bitly integration in the Freshdesk ticket sidebar:
/fw-app-dev Create a Bitly app for the Freshdesk ticket sidebar. The app must include a button that calls the Bitly API to shorten the current ticket URL and displays the result in the UI.Generate an app from a PRD
Reference a Markdown PRD file in your project folder when generation should follow a written specification.
- Save your PRD as a Markdown (.md) file in the project folder.
- In the chat window, run:
/fw-app-dev use @<filename>.md to generate the appSample PRD (optional)
The following example shows a typical PRD structure.
Generated app structure
When a UI is required, fw-app-dev scaffolds the front-end with the React meta framework, the same stack as the FDK react-starter-template. A full-stack SMI app adds server/server.js so the UI can invoke serverless functions in the same app package.
The following table summarizes the front-end and back-end output for each app type.
| App type | Front-end output | Back-end output |
|---|---|---|
| Front-end app | React components in app/components/, Crayons UI, metaConfig.framework set to react in manifest.json | None |
| Full-stack SMI app | React components in app/components/, Crayons UI, metaConfig.framework set to react in manifest.json | server/server.js for SMI handlers and events |
| Serverless app | None | server/server.js |
Verify the app
After fw-app-dev completes generating the project:
- Open a terminal in the generated app directory.
- Run fdk run.
- Open the tunnel URL and load the app in your product account.
- Confirm the app renders in the target placeholder and core interactions work.
If fdk validate reports errors, use /fdk-fix in the chat window or continue to Review and validate the app.
Note If you installed the toolkit before the React meta framework update, fw-app-dev may still generate vanilla JavaScript front-ends (for example, app/scripts/app.js). Run npx @freshworks/fw-dev-tools update, restart your IDE, and generate a new app.
For detailed configuration options, see the fw-app-dev command reference.