React · Vite · TypeScript
Build React apps
with your AI agent
One React + Vite project. Typed server methods, generated RPC references and file routes give you and your coding agent a direct path from a feature to working code.
A server method. A React page.
Call a generated reference with the built-in hook. For normal application reads and mutations, you do not author an HTTP endpoint, fetch wrapper or TanStack Query setup. HeliumTS sends the RPC over HTTP. This example targets the 0.11.0 release.
01 Define a method
src/server/tasks.tsimport { defineMethod } from "heliumts/server";export const getTask = defineMethod(() => ({title: "Ship the app",}));
02 Create the React page
src/pages/tasks.tsx becomes /tasksimport { useFetch } from "heliumts/client";import { getTask } from "../rpc.generated";export default function TasksPage() {const { data, isLoading, error, refetch } = useFetch(getTask);if (isLoading) return <p role="status">Loading…</p>;if (error) return <p role="alert">{error}</p>;return <><h1>{data?.title}</h1><button onClick={() => void refetch()}>Refresh</button></>;}
What comes with HeliumTS
The pieces you need to connect a React interface to your server and ship it as one app.
One typed contract
Define the method on the server. Generated references preserve argument and result types; hooks expose loading, errors, refresh and invalidation.
Explore RPCRoutes from files
Add a page under src/pages to create a route. Organize growing apps with nested layouts and route groups.
Explore routingRendering per page
Use client rendering for interactive pages, prebuild static pages, or render fresh HTML on the server.
Explore server renderingRead the task. Inspect the contract. Verify the change.
Short, source-synced guides cover one job at a time. The CLI locates application methods and routes without executing their modules, and returns precise public API declarations.
Types help with edits; server-side validation and authorization still protect your data.
Stream replies and progress
Stream typed updates over HTTP to show chat replies as they’re generated and agent progress as it happens.
Create your first app
Start from the minimal template in the 0.11.0 release, then add only the pages and methods your app needs. Use matching 0.11.0 framework and scaffolder versions.
npm create heliumts-app@latest my-appcd my-appnpx helium typegennpx helium checknpm run dev