### Install Kibo UI Component using CLI

Source: https://www.kibo-ui.com/docs/setup

Use this command to add a specific Kibo UI component, such as the Gantt Chart, to your project. The CLI handles code integration and dependency installation.

```bash
npx kibo-ui add gantt
```

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

### Using the Announcement Component in React

Source: https://www.kibo-ui.com/docs/usage

Demonstrates how to import and compose the Announcement component with its subcomponents (AnnouncementTag, AnnouncementTitle) in a React application. Ensure necessary components are imported from '@/components/kibo-ui/announcement'.

```jsx
'use client';

import {
  Announcement,
  AnnouncementTag,
  AnnouncementTitle,
} from '@/components/kibo-ui/announcement';
import { ArrowUpRightIcon } from 'lucide-react';

const Hero = () => (
  <>
    <Announcement>
      <AnnouncementTag>Latest update</AnnouncementTag>
      <AnnouncementTitle>
        New feature added
        <ArrowUpRightIcon size={16} className="shrink-0 text-muted-foreground" />
      </AnnouncementTitle>
    </Announcement>
    {/* The rest of your page... */}
  </>
);

export default Hero;
```

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

### Update Kibo CLI

Source: https://www.kibo-ui.com/docs/troubleshooting

Run this command to ensure you are using the latest version of the Kibo CLI. This can resolve issues with the `npx kibo-ui add` command.

```bash
npx kibo-ui@latest
```

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

### Configure Multiple MCP Servers

Source: https://www.kibo-ui.com/docs/mcp

Integrate Kibo UI alongside other MCP servers like GitHub or a local filesystem. This allows your AI tool to access multiple data sources.

```json
{
  "mcpServers": {
    "kibo-ui": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://www.kibo-ui.com/api/mcp/mcp"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"]
    },
    "filesystem": {
      "command": "npx", 
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/project"]
    }
  }
}
```

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

### Add Kibo UI Configuration to MCP

Source: https://www.kibo-ui.com/docs/mcp

Copy and paste this configuration into your MCP config file to enable Kibo UI integration. Ensure your AI tool supports MCP.

```json
{
  "mcpServers": {
    "kibo-ui": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://www.kibo-ui.com/api/mcp/mcp"
      ]
    }
  }
}
```

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

### Configure TypeScript Paths Alias

Source: https://www.kibo-ui.com/docs/troubleshooting

Ensure your `tsconfig.json` includes a proper paths alias for `@/`. This is crucial for resolving component import errors like `module not found`.

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
```

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