### Clone Agent Starter React Template

Source: https://github.com/livekit-examples/agent-starter-react/blob/main/README.md

This command clones the Agent Starter React template to your local machine. After cloning, install dependencies with 'pnpm install' and start the development server with 'pnpm dev'.

```bash
lk app create --template agent-starter-react
```

--------------------------------

### Install Agents UI Components

Source: https://github.com/livekit-examples/agent-starter-react/blob/main/README.md

Use this command to add specific UI components from the @agents-ui scope. Replace {component-name-a} and {component-name-b} with the desired component names.

```bash
pnpm dlx shadcn@latest add @agents-ui/{component-name-a} @agents-ui/{component-name-b}
```

--------------------------------

### App Configuration Example

Source: https://github.com/livekit-examples/agent-starter-react/blob/main/README.md

This TypeScript code defines default application configuration, including branding, feature flags, and agent dispatch settings. Update these values in `app-config.ts` to customize your deployment.

```typescript
export const APP_CONFIG_DEFAULTS: AppConfig = {
  companyName: 'LiveKit',
  pageTitle: 'LiveKit Voice Agent',
  pageDescription: 'A voice agent built with LiveKit',

  supportsChatInput: true,
  supportsVideoInput: true,
  supportsScreenShare: true,
  isPreConnectBufferEnabled: true,

  logo: '/lk-logo.svg',
  accent: '#002cf2',
  logoDark: '/lk-logo-dark.svg',
  accentDark: '#1fd5f9',
  startButtonText: 'Start call',

  // optional: audio visualization configuration
  // audioVisualizerColor: '#002cf2',
  // audioVisualizerColorDark: '#1fd5f9',
  // audioVisualizerType: 'bar',
  // audioVisualizerBarCount: 5,
  // audioVisualizerType: 'radial',
  // audioVisualizerRadialBarCount: 24,
  // audioVisualizerRadialRadius: 100,
  // audioVisualizerType: 'grid',
  // audioVisualizerGridRowCount: 25,
  // audioVisualizerGridColumnCount: 25,
  // audioVisualizerType: 'wave',
  // audioVisualizerWaveLineWidth: 3,
  // audioVisualizerType: 'aura',
  // audioVisualizerAuraColorShift: 0.3,

  // agent dispatch configuration
  agentName: undefined,

  // LiveKit Cloud Sandbox configuration
  sandboxId: undefined,
};

```

--------------------------------

### Project Structure Overview

Source: https://github.com/livekit-examples/agent-starter-react/blob/main/README.md

Illustrates the directory structure of the React agent starter project, highlighting key folders for application logic and UI components.

```tree
agent-starter-react/
├── app/
│   ├── api/
├── components/
│   ├── agents-ui/     - Agents UI components
│   ├── ai-elements/   - AI Elements components
│   ├── app/           - App-specific components
│   ├── ui/            - Primitive shadcn/ui components
├── fonts/
├── hooks/
├── lib/
├── public/
└── package.json
```

--------------------------------

### Create Agent Starter React App

Source: https://github.com/livekit-examples/agent-starter-react/blob/main/TEMPLATE.md

Use the LiveKit CLI to create a new project from the agent-starter-react template. This command sets up the basic project structure for a React-based agent application.

```console
lk app create --template agent-starter-react
```

--------------------------------

### Environment Variables for LiveKit

Source: https://github.com/livekit-examples/agent-starter-react/blob/main/README.md

Configure your LiveKit credentials and server URL in the `.env.local` file. This is essential for the voice agent functionality to connect to your LiveKit project.

```env
LIVEKIT_API_KEY=your_livekit_api_key
LIVEKIT_API_SECRET=your_livekit_api_secret
LIVEKIT_URL=https://your-livekit-server-url

# Agent dispatch (https://docs.livekit.io/agents/server/agent-dispatch)
# Leave AGENT_NAME blank to enable automatic dispatch
# Provide an agent name to enable explicit dispatch
AGENT_NAME=

```

--------------------------------

### Update Agents UI Components

Source: https://github.com/livekit-examples/agent-starter-react/blob/main/README.md

Run this command to update the Agents UI components to the latest publication. The CLI will prompt before overwriting modified files.

```bash
pnpm shadcn:install
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.