C3 AI Documentation Home

Start from the Template

This page takes you from nothing to a scaffolded C3 front end. You create the package by hand, add the config that tells the C3 Agentic AI Platform to serve it as a single-page application, and scaffold a React application under ui/ with Vite. When you finish, you have a C3 package whose React application builds into ui/content, ready to run against live data in the next page. The quickstart moves through this create flow in one step; this page slows down to cover the full package layout, the serving config, and the choice between hand-authoring the package and using the extension's create command.

Before you begin

Complete Set Up Your Environment first, so that Node, the C3 AI VS Code extension, and your connected workspace are in place. Choose a name for the package in camelCase, because you use it for both the package folder and the name field in its manifest. This page uses alarmClock as the example name.

Step 1: Create the package folder and manifest

Create the package as a folder with a hand-written manifest, because a C3 package is a folder the C3 Agentic AI Platform recognizes by its .c3pkg.json file. In your connected workspace, create a folder named alarmClock with a file alarmClock.c3pkg.json:

JSON
{
  "name": "alarmClock",
  "version": "1.0.0",
  "description": "Minimal alarm clock demo"
}

The name field must match the folder name. The manifest carries no framework dependency, because this path builds a plain Vite React application and adds nothing from a design-system package.

End state: an alarmClock folder exists in your workspace with a valid manifest.

Step 2: Add the serving config

Add the config that tells the C3 Agentic AI Platform to serve the built front end as a single-page application at the application root. Create alarmClock/config/UiService.Config/DEFAULT.json:

JSON
{ "name": "DEFAULT", "spaMode": true }

The spaMode flag makes the C3 Agentic AI Platform serve the built bundle as a single-page application, so the browser loads index.html for the application root and React handles the routing from there.

End state: config/UiService.Config/DEFAULT.json exists with spaMode set to true.

Step 3: Scaffold the React application with Vite

Scaffold the React application under ui/ with Vite, because Vite generates a working React TypeScript starter and installs its dependencies for you. From the alarmClock folder, run:

Command Line
npm create vite@latest ui -- --template react-ts

The --template react-ts option selects the React TypeScript starter. Vite prompts you as it scaffolds. When it asks which features to add, select ESLint, then choose Install with npm and start now. Vite generates the React TypeScript application under ui/, installs its dependencies, and starts the dev server, which opens the default Vite page in your browser. Stop the server with Ctrl+C once you see it, because you configure the application in later pages.

End state: a React TypeScript application exists under ui/ with its dependencies installed.

Step 4: Confirm the layout

Confirm the package now holds the standard C3 layout, with each part in its fixed location. Your data model and seed data come in a later page; the manifest, the serving config, and the ui/ application are in place now:

Text
alarmClock/
  alarmClock.c3pkg.json       # the package manifest (Step 1)
  config/UiService.Config/
    DEFAULT.json              # serves the single-page application at the root (Step 2)
  ui/                         # the Vite React application (Step 3)
    vite.config.ts            # the Vite configuration you edit for the build output
    src/                      # the entry, the data client, components, and pages
  src/entity/                 # the data model, one .c3typ file per Type (a later page)
  seed/                       # seed data, one folder per Type (a later page)

The build writes its output to ui/content, which the C3 Agentic AI Platform serves at the application root. The ui/content folder does not exist yet, because it appears only after you configure and run the build in Bundle and Serve.

End state: you can locate the manifest, the serving config, and the React application in ui/.

Decisions on this page

Two choices shape how you start: how you create the package, and where the package folder lives.

Hand-author the package, or use the extension's create command. This path hand-authors the package folder, the manifest, and the serving config, then scaffolds the front end with Vite. The C3 AI VS Code extension also has a Create New UI Package command, but it produces a different, configuration-based layout with a uiComponentLibraryReact dependency. If you use that command, remove the uiComponentLibraryReact dependency from alarmClock.c3pkg.json and follow the file layout shown here, because this path builds a plain Vite front end and does not use it.

Where the package folder lives. For a standalone package like this one, create the alarmClock folder in an empty workspace folder outside any other repository. If your package instead belongs in an existing repository or product ecosystem, create the folder within that repository, so it builds alongside the rest of the codebase.

See also

Was this page helpful?