Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .env.example
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
ANTHROPIC_API_KEY=

# Claude model — strong models are required for reliable UI generation
# Recommended: claude-fable-5 (default), claude-opus-4-6
# Recommended: claude-fable-5 (default), claude-opus-5-5
# Fallback: gpt-* names route to OpenAI (requires OPENAI_API_KEY)
LLM_MODEL=claude-fable-5

Expand Down
8 changes: 4 additions & 4 deletions CODE_OF_CONDUCT.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Code of Conduct for Open Generative UI
# Code of Conduct for Open Intelligent UI

## Table of Contents

Expand All @@ -16,7 +16,7 @@

## 1. Statement of Purpose

Open Generative UI is an open-source showcase and template for building rich, interactive AI-generated UI with [CopilotKit](https://copilotkit.ai) and [LangGraph](https://langchain-ai.github.io/langgraph/). As part of the CopilotKit ecosystem, our Code of Conduct aims to foster a collaborative, respectful, and innovative community that empowers contributors and users alike. By adhering to this code, we can ensure that our community thrives and remains a welcoming space for everyone.
Open Intelligent UI is an open-source showcase and template for building rich, interactive AI-generated UI with [CopilotKit](https://copilotkit.ai) and [LangGraph](https://langchain-ai.github.io/langgraph/). As part of the CopilotKit ecosystem, our Code of Conduct aims to foster a collaborative, respectful, and innovative community that empowers contributors and users alike. By adhering to this code, we can ensure that our community thrives and remains a welcoming space for everyone.

---

Expand Down Expand Up @@ -96,7 +96,7 @@ Consequences for violating the Code of Conduct will be determined based on the s

This Code of Conduct applies to all participants in the CopilotKit community, including contributors, maintainers, and users, both online and offline. It encompasses interactions in the following areas:

- GitHub discussions and issues on the [open-generative-ui](https://github.com/CopilotKit/open-generative-ui) repository
- GitHub discussions and issues on the [OpenIntelligentUI](https://github.com/CopilotKit/OpenIntelligentUI) repository
- The broader [CopilotKit Discord](https://discord.gg/6dffbvGU3D)
- Community meetings and events
- Social media platforms
Expand All @@ -112,6 +112,6 @@ This Code of Conduct is adapted from the [CopilotKit Code of Conduct](https://gi

## 9. Get Involved

We invite you to contribute to Open Generative UI! Whether through code, documentation, or community engagement, your participation is invaluable. For more information on how to contribute, please check our [Contributing Guide](./CONTRIBUTING.md).
We invite you to contribute to Open Intelligent UI! Whether through code, documentation, or community engagement, your participation is invaluable. For more information on how to contribute, please check our [Contributing Guide](./CONTRIBUTING.md).

Thank you for being part of the CopilotKit community! Together, we can build a safe, respectful, and innovative space for all.
12 changes: 6 additions & 6 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Contributing to Open Generative UI
# Contributing to Open Intelligent UI

⭐ Thank you for your interest in contributing!!

Expand All @@ -12,29 +12,29 @@ We love community contributions! That said, we want to make sure we're all on th
Investing a lot of time and effort just to find out it doesn't align with the project feels awful, and we don't want that to happen.
It also helps to make sure the work you're planning isn't already in progress.

Please file an issue first: [https://github.com/CopilotKit/OpenGenerativeUI/issues](https://github.com/CopilotKit/OpenGenerativeUI/issues)
Please file an issue first: [https://github.com/CopilotKit/OpenIntelligentUI/issues](https://github.com/CopilotKit/OpenIntelligentUI/issues)
Or, reach out to us on Discord: https://discord.com/invite/6dffbvGU3D

Ready to contribute but seeking guidance? Reach out to us directly on [Discord](https://discord.gg/6dffbvGU3D) for immediate assistance! Alternatively, you're welcome to raise an issue and one of our dedicated maintainers will promptly steer you in the right direction!

## Found a bug?

If you find a bug in the source code, you can help us by [submitting an issue](https://github.com/CopilotKit/OpenGenerativeUI/issues/new) to our GitHub Repository. Even better, you can submit a Pull Request with a fix.
If you find a bug in the source code, you can help us by [submitting an issue](https://github.com/CopilotKit/OpenIntelligentUI/issues/new) to our GitHub Repository. Even better, you can submit a Pull Request with a fix.

## Missing a feature?

So, you've got an awesome feature in mind? Throw it over to us by [creating an issue](https://github.com/CopilotKit/open-generative-ui/issues/new) on our GitHub Repo.
So, you've got an awesome feature in mind? Throw it over to us by [creating an issue](https://github.com/CopilotKit/OpenIntelligentUI/issues/new) on our GitHub Repo.

# How do I make a code contribution?

## Step 1: Make a fork

Fork the [open-generative-ui](https://github.com/CopilotKit/OpenGenerativeUI/issues) repository to your GitHub account. This means that you'll have a copy of the repository under _your-GitHub-username/open-generative-ui_.
Fork the [OpenIntelligentUI](https://github.com/CopilotKit/OpenIntelligentUI/issues) repository to your GitHub account. This means that you'll have a copy of the repository under _your-GitHub-username/OpenIntelligentUI_.

## Step 2: Clone the repository to your local machine

```bash
git clone https://github.com/<your-GitHub-username>/OpenGenerativeUI
git clone https://github.com/<your-GitHub-username>/OpenIntelligentUI
```

## Step 3: Prepare the development environment
Expand Down
24 changes: 12 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
# Open Generative UI
# Open Intelligent UI

An open-source showcase for building rich, interactive AI-generated UI with [CopilotKit](https://copilotkit.ai) and [LangChain Deep Agents](https://docs.langchain.com/oss/python/deepagents/overview). Ask the agent to visualize algorithms, create 3D animations, render charts, or generate interactive diagrams — all rendered as live HTML/SVG inside a sandboxed iframe.

https://github.com/user-attachments/assets/ed28c734-e54e-4412-873f-4801da544a7f

https://github.com/user-attachments/assets/ba7db70d-07c0-49af-b221-f962f30245e2
https://github.com/user-attachments/assets/232cfd7c-9e99-4c6f-814b-5c7e07a87ece

## What It Does

Expand All @@ -30,7 +28,7 @@ make dev # Start all services
> | Model | Notes |
> |-------|-------|
> | `claude-fable-5` | Default |
> | `claude-opus-4-6` | Strong alternative |
> | `claude-opus-5-5` | Strong alternative |
>
> Setting `LLM_MODEL` to a `gpt-*` name routes to OpenAI instead (requires `OPENAI_API_KEY`). For other providers, swap the chat model in `apps/agent/src/model.py` (see [docs/bring-to-your-app.md](docs/bring-to-your-app.md)). Smaller or weaker models will produce broken layouts, missing interactivity, or incomplete visualizations.

Expand Down Expand Up @@ -70,7 +68,7 @@ Add to your Claude Desktop config (`claude_desktop_config.json`):
```json
{
"mcpServers": {
"open-generative-ui": {
"open-intelligent-ui": {
"command": "node",
"args": ["dist/stdio.js"],
"cwd": "/path/to/apps/mcp"
Expand All @@ -90,7 +88,7 @@ Add to `.mcp.json`:

```json
{
"openGenerativeUI": {
"openIntelligentUI": {
"url": "http://localhost:3100/mcp"
}
}
Expand Down Expand Up @@ -124,6 +122,8 @@ Deep agents also provide built-in planning (`write_todos`), filesystem tools, an

### How It Works

Open Intelligent UI is built on CopilotKit's Open Generative UI. Read the [Open Generative UI docs](https://docs.copilotkit.ai/generative-ui/open-generative-ui) to see how it works under the hood.

1. **User sends a prompt** via the CopilotKit chat UI
2. **Deep agent decides** whether to respond with text, call a tool, or render a visual component — consulting relevant skills as needed
3. **`generateSandboxedUi`** — the canonical tool the CopilotKit runtime exposes when `openGenerativeUI` is enabled — receives the UI as ordered streaming parameters: `initialHeight` → `placeholderMessages` → `css` → `html` → `jsFunctions` → `jsExpressions`
Expand All @@ -135,7 +135,7 @@ Deep agents also provide built-in planning (`write_todos`), filesystem tools, an

| Pattern | Hook / Option | Example |
|---------|---------------|---------|
| Open Generative UI | `openGenerativeUI` + `renderActivityMessages` | Streaming sandboxed widgets via `generateSandboxedUi` |
| [Open Generative UI](https://docs.copilotkit.ai/generative-ui/open-generative-ui) | `openGenerativeUI` + `renderActivityMessages` | Streaming sandboxed widgets via `generateSandboxedUi` |
| Generative UI | `useComponent` | Pie charts, bar charts |
| Frontend tools | `useFrontendTool` | Theme toggle |
| Human-in-the-loop | `useHumanInTheLoop` | Meeting scheduler |
Expand Down Expand Up @@ -174,11 +174,11 @@ Next.js 16, React 19, Tailwind CSS 4, LangChain Deep Agents, LangGraph, CopilotK

## Star History

<a href="https://www.star-history.com/?repos=CopilotKit%2FOpenGenerativeUI&type=date&legend=top-left">
<a href="https://www.star-history.com/?repos=CopilotKit%2FOpenIntelligentUI&type=date&legend=top-left">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=CopilotKit/OpenGenerativeUI&type=date&theme=dark&legend=bottom-right" />
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=CopilotKit/OpenGenerativeUI&type=date&legend=bottom-right" />
<img alt="Star History Chart" src="https://api.star-history.com/chart?repos=CopilotKit/OpenGenerativeUI&type=date&legend=bottom-right" />
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=CopilotKit/OpenIntelligentUI&type=date&theme=dark&legend=bottom-right" />
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=CopilotKit/OpenIntelligentUI&type=date&legend=bottom-right" />
<img alt="Star History Chart" src="https://api.star-history.com/chart?repos=CopilotKit/OpenIntelligentUI&type=date&legend=bottom-right" />
</picture>
</a>

Expand Down
2 changes: 1 addition & 1 deletion apps/app/src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Open Generative UI</title>
<title>Open Intelligent UI</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🪁</text></svg>" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link

Check warning on line 29 in apps/app/src/app/layout.tsx

View workflow job for this annotation

GitHub Actions / Lint

Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
Expand Down
4 changes: 2 additions & 2 deletions apps/app/src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export default function HomePage() {
<span className="text-lg sm:text-xl leading-none" role="img" aria-label="CopilotKit">🪁</span>
</div>
<p className="text-sm sm:text-base font-semibold m-0 leading-snug" style={{ color: "var(--text-primary)" }}>
Open Generative UI
Open Intelligent UI
<span className="hidden sm:inline font-normal" style={{ color: "var(--text-secondary)" }}> — powered by CopilotKit</span>
</p>
</div>
Expand All @@ -129,7 +129,7 @@ export default function HomePage() {
<span className="hidden sm:inline">Demos</span>
</button>
<a
href="https://github.com/CopilotKit/OpenGenerativeUI"
href="https://github.com/CopilotKit/OpenIntelligentUI"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center px-3 sm:px-5 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm font-semibold text-white no-underline whitespace-nowrap transition-all duration-150 hover:-translate-y-px"
Expand Down
28 changes: 14 additions & 14 deletions apps/mcp/README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# OpenGenerativeUI MCP Server
# OpenIntelligentUI MCP Server

A standalone, independently deployable [Model Context Protocol](https://modelcontextprotocol.io) server that exposes OpenGenerativeUI's design system, skills, and document renderer to any MCP-compatible client.
A standalone, independently deployable [Model Context Protocol](https://modelcontextprotocol.io) server that exposes OpenIntelligentUI's design system, skills, and document renderer to any MCP-compatible client.

## Features

- **Design System Tool** — `assemble_document` wraps HTML fragments with OpenGenerativeUI's complete CSS design system and bridge JavaScript
- **Design System Tool** — `assemble_document` wraps HTML fragments with OpenIntelligentUI's complete CSS design system and bridge JavaScript
- **Skill Resources** — Browse and read skill instruction documents via `skills://list` and `skills://{name}`
- **Prompt Templates** — Pre-composed prompts for common visualization tasks: `create_widget`, `create_svg_diagram`, `create_visualization`
- **Standalone** — No dependencies on other packages; can be deployed independently
Expand Down Expand Up @@ -72,7 +72,7 @@ pnpm build
```json
{
"mcpServers": {
"open-generative-ui": {
"open-intelligent-ui": {
"command": "node",
"args": ["dist/stdio.js"],
"cwd": "/absolute/path/to/apps/mcp"
Expand All @@ -86,7 +86,7 @@ For development, you can use `tsx` directly:
```json
{
"mcpServers": {
"open-generative-ui": {
"open-intelligent-ui": {
"command": "npx",
"args": ["tsx", "src/stdio.ts"],
"cwd": "/absolute/path/to/apps/mcp"
Expand All @@ -101,7 +101,7 @@ Add to `.mcp.json`:

```json
{
"openGenerativeUI": {
"openIntelligentUI": {
"url": "http://localhost:3100/mcp"
}
}
Expand All @@ -118,7 +118,7 @@ Then start the HTTP server with `pnpm dev`.

### Tool: `assemble_document`

Wraps an HTML fragment with the complete OpenGenerativeUI design system.
Wraps an HTML fragment with the complete OpenIntelligentUI design system.

**Input:**
```typescript
Expand Down Expand Up @@ -212,27 +212,27 @@ Advanced visualization instructions: dashboards, simulations, UI mockups.

```bash
# Build image
docker build -t open-generative-ui-mcp .
docker build -t open-intelligent-ui-mcp .

# Run container
docker run -p 3100:3100 open-generative-ui-mcp
docker run -p 3100:3100 open-intelligent-ui-mcp

# With custom port and CORS
docker run \
-p 3100:3100 \
-e MCP_PORT=3100 \
-e ALLOWED_ORIGINS="http://localhost:3000,https://myapp.com" \
open-generative-ui-mcp
open-intelligent-ui-mcp
```

### Node.js

```bash
# Install globally or locally
npm install -g open-generative-ui-mcp
npm install -g open-intelligent-ui-mcp

# Run
MCP_PORT=3100 ALLOWED_ORIGINS="*" open-generative-ui-mcp
MCP_PORT=3100 ALLOWED_ORIGINS="*" open-intelligent-ui-mcp

# Or with node
node dist/index.js
Expand Down Expand Up @@ -284,13 +284,13 @@ MIT

## Support

For issues, feature requests, or questions, visit the [OpenGenerativeUI repository](https://github.com/CopilotKit/OpenGenerativeUI).
For issues, feature requests, or questions, visit the [OpenIntelligentUI repository](https://github.com/CopilotKit/OpenIntelligentUI).

## Contributing

This is a standalone deployment package. To contribute improvements:

1. Fork the main [OpenGenerativeUI repository](https://github.com/CopilotKit/OpenGenerativeUI)
1. Fork the main [OpenIntelligentUI repository](https://github.com/CopilotKit/OpenIntelligentUI)
2. Make changes to `apps/mcp/` (or the source files it's forked from)
3. Submit a pull request

Expand Down
4 changes: 2 additions & 2 deletions apps/mcp/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "open-generative-ui-mcp",
"name": "open-intelligent-ui-mcp",
"version": "0.1.0",
"description": "Standalone MCP server for OpenGenerativeUI design system and skills",
"description": "Standalone MCP server for OpenIntelligentUI design system and skills",
"type": "module",
"main": "dist/index.js",
"scripts": {
Expand Down
2 changes: 1 addition & 1 deletion apps/mcp/src/renderer.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// OpenGenerativeUI document assembly for the MCP server.
// OpenIntelligentUI document assembly for the MCP server.
// Design-system CSS is single-sourced from @repo/design-system.

import { THEME_CSS, SVG_CLASSES_CSS, FORM_STYLES_CSS } from "@repo/design-system";
Expand Down
4 changes: 2 additions & 2 deletions apps/mcp/src/server.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { assembleDocument } from "./renderer.js";

export function createMcpServer(): McpServer {
const server = new McpServer({
name: "open-generative-ui",
name: "open-intelligent-ui",
version: "0.1.0",
});

Expand Down Expand Up @@ -93,7 +93,7 @@ export function createMcpServer(): McpServer {
"assemble_document",
{
description:
"Wraps HTML with OpenGenerativeUI theme CSS, SVG classes, form styles, and bridge JS. " +
"Wraps HTML with OpenIntelligentUI theme CSS, SVG classes, form styles, and bridge JS. " +
"Returns a complete iframe-ready HTML document.",
inputSchema: {
title: z.string().describe("Short title for the visualization"),
Expand Down
4 changes: 2 additions & 2 deletions docs/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Open Generative UI Documentation
# Open Intelligent UI Documentation

Open Generative UI is a showcase and template for building AI agents with [CopilotKit](https://copilotkit.ai) and [LangGraph](https://langchain-ai.github.io/langgraph/). It demonstrates agent-driven UI where an AI agent and users collaboratively manipulate shared application state.
Open Intelligent UI is a showcase and template for building AI agents with [CopilotKit](https://copilotkit.ai) and [LangGraph](https://langchain-ai.github.io/langgraph/). It demonstrates agent-driven UI where an AI agent and users collaboratively manipulate shared application state.

## Prerequisites

Expand Down
2 changes: 1 addition & 1 deletion docs/generative-ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ useComponent({

## Open Generative UI — Sandboxed Streaming Widgets

Free-form HTML/SVG widgets use CopilotKit's canonical **Open Generative UI** rail instead of a custom component. The agent streams a whole UI — styles, markup, and behavior — and the frontend renders it live in a sandboxed iframe.
Free-form HTML/SVG widgets use CopilotKit's canonical **Open Generative UI** rail instead of a custom component. The agent streams a whole UI — styles, markup, and behavior — and the frontend renders it live in a sandboxed iframe. See the [Open Generative UI docs](https://docs.copilotkit.ai/generative-ui/open-generative-ui) for the full reference.

How the pieces connect:

Expand Down
6 changes: 3 additions & 3 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
## Clone and Install

```bash
git clone https://github.com/CopilotKit/OpenGenerativeUI.git
cd OpenGenerativeUI
git clone https://github.com/CopilotKit/OpenIntelligentUI.git
cd OpenIntelligentUI

# Install all dependencies and create .env
make setup
Expand Down Expand Up @@ -52,7 +52,7 @@ make dev-mcp # MCP server only
## Verify It Works

1. Open [http://localhost:3000](http://localhost:3000)
2. You should see the Open Generative UI chat interface
2. You should see the Open Intelligent UI chat interface
3. Try typing "Create a todo list for a weekend project" or click one of the demo suggestions
4. The agent should respond and you'll see generative UI rendered in the chat

Expand Down
4 changes: 2 additions & 2 deletions docs/mcp-integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ For the stdio transport (Claude Desktop integration), add to your `claude_deskto
```json
{
"mcpServers": {
"open-generative-ui": {
"open-intelligent-ui": {
"command": "node",
"args": ["dist/stdio.js"],
"cwd": "/path/to/apps/mcp"
Expand All @@ -103,7 +103,7 @@ Add to your `.mcp.json`:

```json
{
"openGenerativeUI": {
"openIntelligentUI": {
"url": "http://localhost:3100/mcp"
}
}
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"dev": "concurrently \"turbo run dev\" \"pnpm run dev:agent\" --names turbo,agent --kill-others",
"dev:app": "turbo run dev --filter='@repo/app'",
"dev:agent": "cd apps/agent && uv sync && uv run uvicorn main:app --host 0.0.0.0 --port 8123 --reload",
"dev:mcp": "turbo run dev --filter='open-generative-ui-mcp'",
"dev:mcp": "turbo run dev --filter='open-intelligent-ui-mcp'",
"build": "turbo run build",
"lint": "turbo run lint",
"test": "turbo run test",
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@repo/design-system",
"version": "0.1.0",
"description": "Shared OpenGenerativeUI design-system CSS and import map",
"description": "Shared OpenIntelligentUI design-system CSS and import map",
"private": true,
"type": "module",
"main": "./dist/index.js",
Expand Down
Loading
Loading