Skip to main content

​
Overview

This guide provides a quickstart for building your first Generative UI application with C1.

​
Components

C1 provides two components for building Generative UI applications:
  • <C1Component>: A component that renders the Generative UI.
  • <C1Chat>: A pre-built chat component that includes a chat history, a message composer, and a loading indicator.
If you’re unsure about which component to use check our comparison guide for more details. Check out the Basics section for further details on implementing backend API and rendering the UI.

​
NextJS

The easiest way to begin is by using C1 within a NextJS project

​
Create with the CLI

  1. Create a new app called my-c1-project
  2. cd my-c1-project and start the dev server
  3. Visit http://localhost:3000
npx create-c1-app
cd my-c1-project
npm run dev

​
System requirements

  • Node.js 20.9 or later
  • macOS, Windows or Linux

​
Python

git clone https://github.com/thesysdev/template-c1-fastapi.git my-c1-project

​
Start the python server

cd my-c1-app/backend
pip install -r requirements.txt
uvicorn main:app --reload

​
Start the frontend server

cd my-c1-app/ui
npm install
npm run dev

​
System requirements

  • Node.js 20.9 or later (for the frontend server)
  • Python 3.x version (for the backend server)
  • macOS, Windows or Linux
⌘I