[Trouble understanding artifact] Render custom UI

[tradanghi1999]

After reading your instruction, I find it troublesome to me applying the artifact idea.

Supposed I have a graph, what structured data should it return so that the code can be render by artifacts.

Hope there will be a video tutorial for this subject.

Thanks

[TheBigFudge]

a tutorial on this topic would be great

[Baitur5]

I found it troublesome too

[SuperElectron]

I have been tracing this, ... I hope it helps.

Let's look at langgraphjs-gen-ui-examples where langgraph-cli is used to start a project, and we see artifacts rendered with https://agentchat.vercel.app/.

I'll go over these main files, and give a little bit of context how it can be done with python too.

1. langgraph.json
2. use-artifact.tsx
3. writer.tsx - a custom component that leverages artifact
4. Backend Agent
5. Compile & Run

---

1. langgraph.json

I looked at langgraph.json from langgraphjs-gen-ui-examples.

I'll show you how I did it, and you can also reference theirs above.

Here is my project structure

langgraph.json
└── src
    ├── supervisor
    │   ├── agents
    │   ├── graph.py              // the main graph in my project
    │   ├── __init__.py__
    │   ├── pyproject.toml      // my deps for python
    │   ├── tests
    │   └── utils
    └── ui
        ├── components       // writer.tsx
        ├── utils                    // use-artifact.tsx
        ├── index.tsx             //  SINGLE ENTRYPOINT
        └── package.json      // deps for javascript

And here is my langgraph.json

{
  "dependencies": ["./src/supervisor"],
  "graphs": {
    "pickles": "./src/supervisor/graph.py:supervisor",
  },
  "ui": {
    "pickles": "./src/ui/index.tsx"
  },
  "env": ".env"
}

• in my case, my "graphs" section is python code, and supervisor is the variable in the file that has my compiled graph
• "ui" is where all code that is to be 'sent' to the the vercel app
• reference index.tsx from the langgraphjs-gen-ui-examples for more details about the SINGLE ENTRYPOINT

2. use-artifact.tsx

Here is the helper component that sets up the artifact for you.

For this use case, we create a folder src/ui/utils and place it there.

In the langgraph gen examples it is in src/agent-uis/utils.

Copy, paste, continue!

/**
 * Hook that obtains the artifact context provided by the `LoadExternalComponent`
 * found in the `meta.artifact` field.
 *
 * @see https://github.com/langchain-ai/agent-chat-ui/blob/main/src/components/thread/messages/ai.tsx
 */
export function useArtifact<TContext = Record<string, unknown>>() {
  type Component = (props: {
    children: React.ReactNode;
    title?: React.ReactNode;
  }) => React.ReactNode;


...
...
...
...
please don't copy this, use the link

3. Implementation

Now let's add a file to make use of the use-artifact.tsx with a component writer.tsx in the "ui" folder.

└── src
    ├── supervisor
    │   └── ...
    └── ui
        ├── components/writer.tsx // our new implementation
        ├── utils/use-artifact.tsx     // hook
        ├── index.tsx             //  SINGLE ENTRYPOINT
        └── package.json      // deps, ill need to run pnpm install before starting langgraph-cli

Looking at their example from src/agent-uis/writer/index.tsx, I will just copy and paste the example ...

// import our hook
import { useArtifact } from "../utils/use-artifact";

// make it a stateful component
import { useEffect, useRef, useState } from "react";
// this library was added to package.json
import { LoaderIcon } from "lucide-react";

export function Writer(props: {   title?: string;   content?: string;   description?: string;   isGenerating: boolean;  {

  // controls client side interactions and data
  const [Artifact, { open, setOpen, setContext }] = useArtifact<{ writer?: { selected?: string };   }>();

  // hold data
  const [content, setContent] = useState(props.content ?? "");

  // set content when open
  useEffect(() => setContent(props.content ?? ""), [props.content]);
  
  ... other stuff
  
  useEffect(() => {

    ... opens the sidebar

  }, [shouldAutoOpen, setOpen]);

  return (
    <>
      <div
        onClick={() => setOpen(!open)}
        className="border p-4 rounded-lg cursor-pointer"
      >

        ... more stuff

      </div>

      <Artifact title={props.title}>

        ... more content

      </Artifact>
    </>
  );
}

• open, setOpen, and setContext are the magic that make it work.

4. Backend Agent

We are almost done setting things up for langgraph server - ui and graph keys in langgraph.json.

This shows how to push messages to the ui (note the data pushed are args for the ui components in ui folder).

I use python, so mine is push_ui_message and in javascript it is ui.push.

Let's look at how they do it: writer-agent.

const lastMessage = state.messages.at(-1);
const tool = message.tool_calls?.find(findToolCall("draft_text_document")<typeof CreateTextDocumentTool>)?.args;

ui.push(
        { id, name: "writer", props: { ...tool, isGenerating: true } },
        { message, merge: true },
      );

• and here is a python example

from langgraph.graph.ui import push_ui_message

super_gnar = AIMessage(
            id=str(uuid.uuid4()),
            content=f"""I got a push example for you, this will help explain to the user what's going on."""
)

my_data_to_push = {...}

push_ui_message("writer", my_data_to_push, message=super_gnar)

5. Compile & Run

Again, if you are using langgraph dev or you have a deployment with langsmith to host in the cloud, it makes no difference.

We just make a little project, compile it, and the langgraph server takes care of the rest for us.

• package.json (ui) and pyproject.toml (graphs)

Here is my project structure

langgraph.json
└── src
    ├── supervisor
    │   ├── agents
    │   ├── graph.py              // the main graph in my project
    │   ├── __init__.py__
    │   ├── pyproject.toml      // my deps for python
    │   ├── tests
    │   └── utils
    └── ui
        ├── components       // writer.tsx
        ├── utils                    // use-artifact.tsx
        ├── index.tsx             //  SINGLE ENTRYPOINT
        └── package.json      // deps for javascript

• here is my langgraph.json

{
  "dependencies": ["./src/supervisor"],
  "graphs": {
    "owner": "./src/supervisor/graph.py:supervisor",
  },
  "ui": {
    "owner": "./src/ui/index.tsx"
  },
  "env": ".env"
}

I have python graphs, you can too or you can have javascript. It doesn't matter.

Then, we deploy it....

✅ install ui deps:
✅ install python deps
✅ use langgraph-cli to start up langgraph server

##########################
# Install ui deps
cd src/ui && pnpm install
cd ../../

##########################
# Install python deps
pip3 install -e src/supervisor

##########################
# start langgraph server with cli
## (if graphs are in python)
langgraph dev

## (if graphs are in javascript)
npx @langchain/langgraph-cli dev

Now you should be able to navigate to https://agentchat.vercel.app/ and view it working.

Hope that helps a bit ... it should at least get you into their example and then you can start making adjustments until it clicks.

[solitaire2015]

@SuperElectron Thank you so much for such a detailed document.

[ldybyz]

@SuperElectron I try to do as above on Windows 10 ,but when I run "langgraph dev",I get an error.(Linux not such error)

File "D:\langchain\langgraph-project-test\.venv\Lib\site-packages\langgraph_api\js\ui.py", line 87, in _handle_exception task.result() File "D:\langchain\langgraph-project-test\.venv\Lib\site-packages\langgraph_api\js\ui.py", line 60, in _start_ui_bundler_process process = await asyncio.create_subprocess_exec( ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\lindy\AppData\Local\Programs\Python\Python311\Lib\asyncio\subprocess.py", line 223, in create_subprocess_exec transport, protocol = await loop.subprocess_exec( ^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\lindy\AppData\Local\Programs\Python\Python311\Lib\asyncio\base_events.py", line 1708, in subprocess_exec transport = await self._make_subprocess_transport( ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\lindy\AppData\Local\Programs\Python\Python311\Lib\asyncio\base_events.py", line 503, in _make_subprocess_transport raise NotImplementedError NotImplementedError

[SuperElectron]

If you have a public repo on GitHub, I'm happy to help. I'm not with Lang chain team, but I've been using it extensively and figured out how to get things working.