Skip to content

feat: add artifact demo example and defineArtifact() API#408

Open
ankit-thesys wants to merge 4 commits intothesysdev:mainfrom
ankit-thesys:example/artifact
Open

feat: add artifact demo example and defineArtifact() API#408
ankit-thesys wants to merge 4 commits intothesysdev:mainfrom
ankit-thesys:example/artifact

Conversation

@ankit-thesys
Copy link
Copy Markdown
Contributor

@ankit-thesys ankit-thesys commented Mar 28, 2026

Summary

  • Artifact demo example (examples/openui-artifact-demo/) — Full Next.js app demonstrating the OpenUI artifact system for displaying AI-generated code in a resizable side panel
  • defineArtifact() API (packages/react-ui/src/artifact/) — New first-class function that eliminates artifact component boilerplate by auto-wiring useId, useArtifact, and ArtifactPanel
  • ArtifactMeta metadata on DefinedComponent in lang-core — Enables prompt generation to annotate artifact components and framework introspection

Changes

New: defineArtifact() API (react-ui)

Consumers provide just preview and panel render functions — no manual ID generation, hook wiring, or ArtifactPanel composition:

import { defineArtifact } from "@openuidev/react-ui"

export const ArtifactCodeBlock = defineArtifact({
  name: "ArtifactCodeBlock",
  props: ArtifactCodeBlockSchema,
  description: "Code block that opens in the artifact side panel",
  title: (props) => props.title,
  preview: (props, { open, isActive }) => (
    <InlinePreview title={props.title} onOpen={open} isActive={isActive} />
  ),
  panel: (props) => (
    <ArtifactView language={props.language} codeString={props.codeString} />
  ),
})

Package changes

  • lang-core: Add ArtifactMeta type, optional artifact? field on DefinedComponent, [artifact] tag in prompt generation
  • react-lang: Pass through artifact field in defineComponent, re-export ArtifactMeta
  • react-ui: New defineArtifact() function with ArtifactControls injection, exported from @openuidev/react-ui

Artifact demo example

  • Custom ArtifactCodeBlock component with inline preview card + full syntax-highlighted panel view
  • Extended library building on openuiChatLibrary
  • Artifact-aware system prompt
  • Code-focused conversation starters (React, Python, CSS, SQL)
  • Migrated to use defineArtifact() API

Test plan

  • pnpm build passes across all packages
  • Existing tests pass (pnpm test in lang-core, react-headless)
  • Artifact demo: inline preview renders, click opens panel, close works, multiple artifacts coexist
  • pnpm generate:prompt produces correct system prompt with [artifact] tag

🤖 Generated with Claude Code

New example app demonstrating the OpenUI artifact system for displaying
AI-generated code in a resizable side panel.

- Custom ArtifactCodeBlock genui component with inline preview and artifact panel view
- Extends openuiChatLibrary with artifact-specific component and prompt rules
- Syntax highlighting via react-syntax-highlighter (Prism, vscDarkPlus)
- Copy-to-clipboard, language badges, filename headers
- Multiple artifacts per conversation, one active at a time
- Code-focused conversation starters (React, Python, CSS, SQL)
@ankit-thesys ankit-thesys changed the title feat: add openui-artifact-demo example feat: add artifact demo example and defineArtifact() API Mar 31, 2026
Adds Artifact() to @openuidev/react-ui — a factory that returns a
ComponentRenderer with automatic useId, useArtifact, and ArtifactPanel
wiring. Consumers provide preview/panel render functions; no manual
artifact boilerplate needed. No changes to lang-core or react-lang.

- react-ui: new Artifact() function with ArtifactControls injection
- example: migrate ArtifactCodeBlock to use Artifact()
- example: remove artifactId from schema and prompt, simplify InlinePreview

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant