DEV Community

Cover image for AG-UI + CopilotKit: A Quick Start for Developers
ZedIoT
ZedIoT

Posted on • Edited on

AG-UI + CopilotKit: A Quick Start for Developers

#agui #copilotkit #ai #agentaichallenge

If you’re building an AI-powered UI, AG-UI and CopilotKit make a great pair — one handles the UI layer while the other takes care of AI integration and conversation state.

This post walks you through a minimal setup so you can start experimenting in minutes.

1. Prerequisites

Before you start:

  • Node.js v18+
  • npm or yarn
  • A working React project

2. Install the Required Packages

Run this in your project directory:

npm install @copilotkit/react-core @copilotkit/react-ui ag-ui
Enter fullscreen mode Exit fullscreen mode

3. Set Up the Chat UI

Add AG-UI’s chat interface into your React app:

import { CopilotKit } from "@copilotkit/react-core";
import { AGUIChat } from "ag-ui";

export default function App() {
  return (
    <CopilotKit>
      <AGUIChat />
    </CopilotKit>
  );
}
Enter fullscreen mode Exit fullscreen mode

4. Connect to an AI Backend

Here’s an example using OpenAI:

const copilot = new CopilotKit({
  apiKey: process.env.OPENAI_API_KEY,
});
Enter fullscreen mode Exit fullscreen mode

💡 Tip: You can also connect to other AI models or self-hosted APIs.

5. Run and Verify

Start your development server:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Open the app in your browser — you should see an AI chat UI ready to use.

6. Next Steps

  • Customize the UI with AG-UI components
  • Add custom system prompts or user flows
  • Integrate with live data sources or APIs

Full Guide → AG-UI + CopilotKit Quick Start

Top comments (0)