Installation

Get started with UICP by installing the necessary packages for your project.

Prerequisites

Before installing UICP, ensure you have:

  • Node.js 18 or higher
  • React 18 or higher (for frontend components)
  • TypeScript (recommended for type safety)
  • An existing chat application or a new project

Package Overview

PackagePurposeWhere to Install
@uicp/parserParse and render UICP blocksFrontend (React app)
@uicp/toolsAI tools for component discoveryBackend (API/Server)

You'll typically install both packages in your project, but in different contexts.

Installation Steps

For Full-Stack Applications (Recommended)

If your project has both frontend and backend in one repository:

npm install @uicp/parser @uicp/tools

For Separate Frontend/Backend

Frontend (React app):

npm install @uicp/parser

Backend (API server):

npm install @uicp/tools

TypeScript Configuration

If using TypeScript, ensure your tsconfig.json includes:

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "lib": ["ES2020", "DOM"]
  }
}

Verification

Check that packages are installed correctly:

npm list @uicp/parser @uicp/tools

Framework-Specific Setup

Next.js

UICP works seamlessly with Next.js App Router and Pages Router.

For App Router:

  • Use 'use client' directive in components that use UICP parser
  • Backend tools work in Route Handlers (app/api/*/route.ts)

For Pages Router:

  • Backend tools work in API routes (pages/api/*.ts)
  • Parser works in any React component

Vite

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install @uicp/parser @uicp/tools

Vite works with UICP out of the box.

Next Steps

Now that you have UICP installed: