Chat in Studio is disabled and state is not detected when state graph is not directly created in the current scope

[fridaystreet]

Just wondering if anyone has experienced this or can shed any light on where I'm going wrong here please?

I've been banging my head against a wall trying to work out why I can't get the 'chat' feature or my schema to show up in studio. So I spent a day trying to get to the bottom of it and finally worked out roughly what the issue is, but I can't get to the bottom of the root cause. Any assistance would be really appreciated, I must really be missing something here

So if I have a single file that is as follows, it works fine

const MyStateAnnotation = Annotation.Root({
  ...MessagesAnnotation.spec,
  test: Annotation<string>()
 })
 
 export function createStateGraph() {
   return new StateGraph({
      stateSchema: MyStateAnnotation,
      input: MessagesAnnotation,
      output: MyStateAnnotation
    })
 }
 
function createSimpleGraph() {
  // Create the state schema using Annotation

  const answerNode = (_state: typeof MyStateAnnotation.State) => {
    return { test: "bye" };
  };

  const graph = createStateGraph()
   .addNode("answerNode", answerNode)
  .addEdge("__start__", "answerNode")
  .addEdge("answerNode", "__end__");
  
  

  return graph.compile();
}

const graph =  createSimpleGraph()
export const simpleIoGraphAlt = graph

If I split that file into 2 parts and import the functiomn that creates the state, it no longer works. The graph itself works absolutely fine, but Studio will not recognise the schema at all. This is just a very simplistic version of the system I am building, but ultimatey having the state graph created elsewhere and referenced being a part of the system requirement to facilitate other things. Everything in the system works fine in terms of it's actual graph functionality, I can invoke and stream it and I have no problems. As soon as I try and debug it in studio, the schema is not recognised.

So I ended up just spending a whole day boiling it down to this simple example which was failing and realised this is a more fundamental problem and that hopefully have ruled out the more complex aspects of my system getting in the way.

const MyStateAnnotation = Annotation.Root({
  ...MessagesAnnotation.spec,
  test: Annotation<string>()
 })
 
 export function createStateGraph() {
   return new StateGraph({
      stateSchema: MyStateAnnotation,
      input: MessagesAnnotation,
      output: MyStateAnnotation
    })
 }

import { createStateGraph } from './myState'
function createSimpleGraph() {
 // Create the state schema using Annotation

 const answerNode = (_state: typeof MyStateAnnotation.State) => {
   return { test: "bye" };
 };

 const graph = createStateGraph()
  .addNode("answerNode", answerNode)
 .addEdge("__start__", "answerNode")
 .addEdge("answerNode", "__end__");
 
 

 return graph.compile();
}

const graph =  createSimpleGraph()
export const simpleIoGraphAlt = graph

[dqbd]

Hello! Is this happening with LGP or @langchain/langgraph-cli dev?

[fridaystreet]

It's @langchain/langgraph-cli dev

[dqbd]

Can you verify that you're running the latest @langchain/langgraph-cli --version, which should be 0.0.57+js?

[fridaystreet]

Thanks solved. I was running via npx @langchain/langgraph-cli through a script. didn't realise I didn't have @latest on the end. I knew I was missing something, couldn't see for looking. Thanks for the heads up

[fridaystreet]

actually spoke too soon. It seems to be an improvement, in the terms I can actually get it to load my schema now, but if I try and store the compiled graph in a variable (cache it) and provide the cached variable in place of recompiling the graph on every request, it breaks

as soon as I do this, it breaks. Any ideas?

let cachedGraph

const MyStateAnnotation = Annotation.Root({
  ...MessagesAnnotation.spec,
  test: Annotation<string>()
 })
 
function createSimpleGraph() {
  if (cachedGraph) return cachedGraph

  const answerNode = (_state: typeof MyStateAnnotation.State) => {
    return { test: "bye" };
  };

  cachedGraph = new StateGraph(ALEiGNStateAnnotation)
  .addNode("answerNode", answerNode)
  .addEdge("__start__", "answerNode")
  .addEdge("answerNode", "__end__")
  .compile();
  
  return cachedGraph;
}

const graph =  createSimpleGraph()
export const simple = graph

It feels like it's typing issue in that I need to type cachedGraph

let cachedGraph: CompiledStateGraph<
  typeof MyStateAnnotation,
  UpdateType<typeof MyStateAnnotation.State>,
  string,
  typeof MyStateAnnotation,
  typeof MyStateAnnotation
>

But I have tried ever permeatation of configuration I could think of for the parameters of CompiledStateGraph<> but it never passes the typechecks

Type 'StateType<{ test: { (): LastValue<string>; (annotation: SingleReducer<string, string>): BinaryOperatorAggregate<string, string>; Root: <S extends StateDefinition>(sd: S) => AnnotationRoot<...>; }; messages: BinaryOperatorAggregate<...>; }>' does not satisfy the constraint 'StateDefinition'.
  Property 'test' is incompatible with index signature.
    Type 'string' is not assignable to type 'BaseChannel<unknown, unknown, unknown> | (() => BaseChannel<unknown, unknown, unknown>) | ConfiguredManagedValue<any>'
    
  Type 'AnnotationRoot<{ test: { (): LastValue<string>; (annotation: SingleReducer<string, string>): BinaryOperatorAggregate<string, string>; Root: <S extends StateDefinition>(sd: S) => AnnotationRoot<...>; }; messages: BinaryOperatorAggregate<...>; }>' does not satisfy the constraint 'SDZod'.
  Type 'AnnotationRoot<{ test: { (): LastValue<string>; (annotation: SingleReducer<string, string>): BinaryOperatorAggregate<string, string>; Root: <S extends StateDefinition>(sd: S) => AnnotationRoot<...>; }; messages: BinaryOperatorAggregate<...>; }>' is not assignable to type 'StateDefinition'.
    Index signature for type 'string' is missing in type 'AnnotationRoot<{ test: { (): LastValue<string>; (annotation: SingleReducer<string, string>): BinaryOperatorAggregate<string, string>; Root: <S extends StateDefinition>(sd: S) => AnnotationRoot<...>; }; messages: BinaryOperatorAggregate<...>; }>'.  

I took some direction from this article https://gandrew.com/blog/understanding-langgraph-types but again the examples in here don't work, the StateType and UpdateType parameters never pass

[fridaystreet]

just to add some extra detail, it seems that if you try and assign the compiled graph to any existing defined variable it breaks it.

So trying to use it in a class like

private compiled
private graph

constructor(){
   this.graph = new StateGraph.....
}

getCompiled() {
  this.compiled = this.graph.compile()
 return this.compiled
}

If you try and load it from this.compiled, it doesn't work

If you do this below it works

private graph

constructor() {
   this.graph = new StateGraph.....
}

get Compiled() {
    return this.graph.compile()
}

[fridaystreet]

Got to love it when you end up answering you're own question hahaha, you just need that bit of external input to change your thought patterns I guess

Annotation.spec being the missing key! :-)

I'm pretty sure I tried this before but don't think would have got there without realising the version wasn't right. Thanks

type MyCompiledGraph = CompiledStateGraph<
  typeof MyStateAnnotation.State,
  UpdateType<typeof MyStateAnnotation.spec>,
  string,
  typeof MyStateAnnotation.spec,
  typeof MyStateAnnotation.spec
>

[dqbd]

I think you can simplify the code a bit by doing the caching separately and using ReturnType

import {
  Annotation,
  MessagesAnnotation,
  StateGraph,
} from "@langchain/langgraph";

const MyStateAnnotation = Annotation.Root({
  ...MessagesAnnotation.spec,
  test: Annotation<string>(),
});

function createSimpleGraph() {
  const answerNode = (_state: typeof MyStateAnnotation.State) => {
    return { test: "bye" };
  };

  return new StateGraph(MyStateAnnotation)
    .addNode("answerNode", answerNode)
    .addEdge("__start__", "answerNode")
    .addEdge("answerNode", "__end__")
    .compile();
}

const getSimpleGraph = (() => {
  let cachedGraph: ReturnType<typeof createSimpleGraph>;
  return () => cachedGraph ?? (cachedGraph = createSimpleGraph());
})();

const graph = getSimpleGraph();
export const simple = graph;