How to Install and Use CopilotKit: Your Guide to Building AI Assistants! 🚀

Monday, Dec 16, 2024 | 6 minute read

GitHub Trend

Revolutionizing development, this open-source framework empowers creators to craft intelligent AI assistants with natural dialogue, tailored functionalities, and user-friendly interfaces! 🛠️✨ Enjoy robust features, security, and endless adaptability to enhance productivity and user satisfaction! 🎉🤖

In today’s fast-paced technological world, artificial intelligence is gradually becoming an integral part of our lives and work! To help developers quickly build smarter applications in this AI era, CopilotKit emerges as an indispensable helper! 🌟

1. CopilotKit: A Revolutionary Framework for AI Assistants 🌈

CopilotKit is a brand-new open-source framework specifically designed for savvy developers! ✨ This framework aims to assist developers in creating deeply integrated AI assistants and applications. With natural language interaction, CopilotKit enables our applications to intelligently execute tasks, significantly enhancing user experience and work efficiency! 🤖💥

2. Super Features of CopilotKit that Shine in Developers’ Minds 🎉

• AI Assistant: With CopilotKit, developers can create powerful AI assistants! These assistants can interact with users in various environments like spreadsheets, banking tasks, and travel planning. Not only can they analyze data, but they can also manage finances, plan trips, and summarize research findings, providing comprehensive support for users! 📊✈️

• Real-Time User Context: CopilotKit can tailor AI functionalities based on real-time application data, providing a more intuitive interaction experience. Conversations with AI assistants feel like chatting with a friend who understands your needs—awesome! 🤝💬

• Action Capabilities: The AI assistant can handle tedious tasks on behalf of the user, like organizing data in spreadsheets, making complex tasks feel effortless! 🍃🗂️

• CoAgents: By integrating with LangChain and LangGraph, developers can enhance applications with specific task processing capabilities. This innovation takes app intelligence to a new level—truly unparalleled! ⚙️🧠

• Custom UI Rendering: CopilotKit also allows developers to embed custom React components directly in the assistant’s chat interface, providing a personalized and enjoyable interaction experience for users! 🎨💖

• Guardrails and Security: To ensure user safety, CopilotKit incorporates various security features that ensure the AI assistant’s behavior is controllable and predictable. Developers can set guardrails to limit the assistant’s actions, perfectly protecting user interests! 🔒🛡️

• Learning and Adaptation: As user interactions with the assistant increase, CopilotKit’s assistant continually learns and adapts to user preferences, optimizing suggestions and task execution, leading to soaring satisfaction rates! 📈❤️

3. Why Developers are Enthralled by CopilotKit 🍷

CopilotKit provides developers with a rich array of tools and functionalities, helping them quickly and efficiently create AI-driven applications that improve development efficiency and user experience! Its open-source nature allows developers to flexibly adjust and extend features to meet their specific needs📚✨. Moreover, detailed documentation and examples make it easy for new users to get started, lowering the technical barrier, and inviting more developers into this vibrant community to drive the flourishing development of AI assistant technology together! 🌍💡

Application Demonstrations 🔍

• Spreadsheet Assistant: Helps users analyze data and gain insights into the real meaning behind the numbers.

• Banking Assistant: Smartly manages transactions and provides reliable financial advice.

• Travel Planner: Assists users in planning itineraries and discovering perfect destinations.

• Research Assistant: Efficiently synthesizes key information from academic papers to support research progress.

With its comprehensive functionality and outstanding usability, CopilotKit is becoming an essential tool for developers to enhance productivity and user experience! 💪✨

4. Simple Steps to Get Started with CopilotKit 🚀

4.1 Installing CopilotKit

First, you need to install CopilotKit in your project! Run the following command in the terminal to get started:

npm i @copilotkit/react-core

🎉 Explanation: This command uses npm (Node Package Manager) to install the @copilotkit/react-core package, which is the core library of CopilotKit. Once installed, you can reference this library in your project and enjoy its powerful features. Make sure to run this command in your project root directory to ensure the library is added correctly to your node_modules! 📂

4.2 Usage Example 💻

4.2.1 Headless UI with Full Control 🗨️

Next, let’s see how to implement a chat interface with CopilotKit! You can use the useCopilotChat function to retrieve visible messages in the chat!

const { visibleMessages, appendMessage, setMessages } = useCopilotChat();
// Here we obtain visible messages, methods to append messages, and set messages.

💬 Explanation:

• visibleMessages: Provides the currently visible message list, which helps you render the chat interface.
• appendMessage: This function allows you to append a new message to the current message list, giving users the fun of real-time updates!
• setMessages: Accepts a set of messages and sets them as the current message list, allowing you to reset or update the entire message list as you wish! 🎉

4.2.2 Frontend Knowledge Base Integration 📚

To integrate a custom knowledge base for content reading and processing, use the following code:

useCopilotKnowledgebase(myCustomKnowledgeBase);
// Here, we import the custom knowledge base to enable application content usage.

📖 Explanation: With useCopilotKnowledgebase, you can pass your custom knowledge base to CopilotKit at any time, allowing users to query based on its content and receive information in a smarter, more timely manner! 🌟

4.2.3 User Interface Generation and Stream Support 📊

Use useCopilotAction to define specific actions. Here’s an example that shows how to append rows to a spreadsheet:

useCopilotAction({
  name: "appendToSpreadsheet",
  description: "Append rows to the current spreadsheet",
  parameters: [
    { 
      name: "rows", 
      type: "object[]", 
      attributes: [{ 
        name: "cells", 
        type: "object[]", 
        attributes: [{ 
          name: "value", 
          type: "string" 
        }] 
      }] 
    }
  ],
  render: ({ status, args }) => { /* render function */ },
  handler: ({ rows }) => setSpreadsheet({ ...spreadsheet, rows: [...spreadsheet.rows, ...canonicalSpreadsheetData(rows)] }),
});
// This code defines an action that adds rows to the spreadsheet.

📋 Explanation:

• name: Provides a name for this action, making it easy to identify and call in the app.
• description: Describes the purpose of the action, helping developers understand its functionality.
• parameters: Defines the parameters required for the action—here it’s an object array rows, each containing a property named cells, which is an array of strings.
• render: Renders the state or interface related to this action, allowing you to show loading statuses, results, error messages, etc.
• handler: The processing function that executes the action, here it appends new rows to the current spreadsheet state, making it simple and user-friendly! ✨

4.2.4 Structured Autocompletion ⚡

You can use useCopilotStructuredAutocompletion to implement intelligent autocompletion and modification functionalities for the spreadsheet. Here’s a related code example:

const { suggestions } = useCopilotStructuredAutocompletion(
  {
    instructions: `Autocomplete or modify spreadsheet rows based on the inferred user intent.`,
    value: { rows: spreadsheet.rows.map(row => ({ cells: row })) },
    enabled: !!activeCell && !spreadsheetIsEmpty,
  },
  [activeCell, spreadsheet]
);
// This code provides intelligent autocompletion for spreadsheet rows.

📝 Explanation:

• instructions: The description of the autocompletion, specifying what action to take.
• value: The data input, which can be configured based on the current state of the spreadsheet.
• enabled: A boolean value that determines whether this autocompletion feature is active; it generally needs to be enabled under certain conditions.
• suggestions: The final autocomplete suggestions that update dynamically with user input, providing timely action prompts! 🌟

4.3 Shared State System 🔗

Lastly, CopilotKit allows you to share state between applications and agents, enabling flexible information transfer between components. Here’s a simple example:

const { agentState } = useCoAgent({ 
  name: "basic_agent", 
  initialState: { input: "NYC" } 
});
// Share state between the agent and application, allowing for information transfer across components.

💡 Explanation:

• useCoAgent: This hook lets you define an agent to manage state within components.
• name: Here, you define the name of the agent for identification and management purposes.
• initialState: Initializes the state, assigning the agent a starting input value of “NYC”, which can be updated and processed through subsequent interactions.

This design allows components to freely share and respond to state changes, enabling more complex user experiences and providing users with an unparalleled feeling! 🌈✨