Quickstart

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

Create a new app called my-c1-project
cd my-c1-project and start the dev server
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

How C1 Works AI Coding IDE Setup

⌘I

Getting Started

Basics

Interactivity

Styling

Conversational UI

Artifacts

Advanced

Ecosystem

Overview

Components

NextJS

Create with the CLI

System requirements

Python

Start the python server

Start the frontend server

System requirements

​Overview

​Components

​NextJS

​Create with the CLI

​System requirements

​Python

​Start the python server

​Start the frontend server

​System requirements

Overview

Components

NextJS

Create with the CLI

System requirements

Python

Start the python server

Start the frontend server

System requirements