Built In Ui Components - Copilotkit

Getting started

<Steps> <Step> ### Import the default styles

Import the default styles in your root component (typically `layout.tsx`) :

```tsx filename="layout.tsx"
import "@copilotkit/react-ui/v2/styles.css";
```

</Step> <Step> ### Choose your component CopilotKit ships with a number of highly flexible components that will scale to your needs. Choose whichever one you like, they functionally are they same but have different layouts.

<Tabs items={["CopilotChat", "CopilotSidebar", "CopilotPopup"]}>
  <Tab value="CopilotChat">
    
  </Tab>
  <Tab value="CopilotSidebar">
    
  </Tab>
  <Tab value="CopilotPopup">
    
  </Tab>
</Tabs>

</Step> <Step> ### Use the components

Now that you've chosen your component, just import it and use it in your page!

```tsx filename="page.tsx"
import { CopilotChat, CopilotSidebar, CopilotPopup } from "@copilotkit/react-core/v2";

return <div>
  <CopilotChat />
  <CopilotSidebar />
  <CopilotPopup />
</div>
```

</Step> </Steps>