​
Beta

LangChain integraiton is in Beta. If you have feedback, please join our discord or open a GitHub issue!

​
Background

Copilot ‘skills’ are standalone LLM chains (and graphs) optimized for a particular kind of task. You can bring skills into your copilot with just a few lines of code.

CopilotKit will route relevant state as input to the standalone skill chains (state can come from the frontend, backend, 3rd party integrations, or from the user). When the chain returns, the Copilot Engine funnels its output to in-app interaction as needed.

Example repo: https://github.com/CopilotKit/presentation-demo

​
Backend Actions: LangChainJS

Adding your custom chains into CopilotKit is a straightforward process. Simply return the call to LangChain and CopilotKit will automatically handle the rest.

This simple example demonstrates how to stream back from LangChain to the frontend.

const copilotKit = new CopilotRuntime({
  actions: [
    {
      name: "sayHello",
      description: "Says hello to someone.",
      argumentAnnotations: [
        {
          name: "name",
          type: "string",
          description: "The name of the person to say hello to.",
          required: true,
        },
      ],
      implementation: async (name) => {
        const prompt = ChatPromptTemplate.fromMessages([
          [
            "system",
            "The user tells you their name. Say hello to the person in a creative way.",
          ],
          ["user", "My name is {name}"],
        ]);
        const chain = prompt.pipe(new ChatOpenAI());
        return chain.stream({
          name: name,
        });
      },
    },
  ],
});

When you return any LangChain message type, it will be presented to the user as a message in the chat:

  • IterableReadableStream
  • BaseMessageChunk
  • AIMessage

If you want to return a result which should not be presented, you can just return anything serializable to JSON. These results will then be fed back to the LLM which can use them to make further decisions.

​
Backend Actions: LangServe (LangChain Python)

The backend also supports LangServe, enabling you to connect to existing chains, written in Python or JavaScript. Use the langserve parameter to specify URLs for LangServe.

const copilotKit = new CopilotRuntime({
  langserve: [
    {
      chainUrl: "http://my-langserve.chain",
      name: "performResearch",
      description: "Performs research on a given topic.",
    },
  ],
});

CopilotKit will infer the input types to the chain from the LangServe endpoint and make the chain available to the LLM via function calling.

​
LangGraph

Check out this example to see how to integrate LangGraphs into your app.

​
Coming soon:

  • Frontend LangChain integrations
Quickstart: Copilot RuntimeTutorials