Build UX for Langgraph

Talking Shop
1

Hi,

I consider builder mon web application (frontend) for my langgraph Agent. I see that several approches are available.

Do you have some feedback/advice about that ?

Using something like https://www.copilotkit.ai, https://www.librechat.ai (need to to adapted), from scratch ?

Thanks

2

Hi @rapidoo !
Indeed, using CopilotKit library is a good option for sure (they have some boilerplate examples using LangGraph)!
We provide a agent-chat-ui library that can be helpful to get started or this one where authentication and payments are implemented as well!

Let me know if this helped!

3

I ran into this same problem. Most of the options out there assume you want React or some heavy frontend framework, which is overkill if you just need your agent to interact with UI components.
I ended up building an open source web component library called Zephyr that was designed specifically for this. Its all custom elements so it works with any frontend or no frontend framework at all. The agent talks to components through a simple API:

```js

// agent reads what’s on the page

Zephyr.agent.getState()

// agent takes an action

Zephyr.agent.act(‘#my-modal’, ‘open’)

// agent creates new UI

Zephyr.agent.render(‘#container’, {

tag: ‘z-stat’,

attributes: { ‘data-label’: ‘Users’, ‘data-value’: ‘1,234’ }

})

```

There’s an MCP server so you can plug it into Claude Desktop or Cursor, and I just added a Vercel AI SDK integration if you’re using that for your agent. Zero dependencies, load it from a CDN and you’re running.

Github: GitHub - daltlc/zephyr-framework: Zero-JS interactive UI framework using Web Components, CSS :has(), View Transitions API, and container queries · GitHub

AI SDK example: https://github.com/daltlc/zephyr-framework/tree/main/examples/ai-sdk

Happy to answer questions if you try it out.