genkit-ui-generator | ClaudePluginHub

genkit-ui-generator

Generate UI components and chat interfaces for Genkit flows - React, Vue, and vanilla JavaScript templates

Strict Marketplace

Available from this themed marketplace:

You can install this plugin from any of these themed marketplaces. Choose one, add it as a marketplace, then install the plugin.

Installation

Choose your preferred installation method below

A marketplace is a collection of plugins. Every plugin gets an auto-generated marketplace JSON for individual installation, plus inclusion in category and themed collections. Add a marketplace once (step 1), then install any plugin from it (step 2).

From All Plugins

Recommended

One-time setup for access to all plugins

When to use: If you plan to install multiple plugins now or later

Step 1: Add the marketplace (one-time)

/plugin marketplace add https://claudepluginhub.com/marketplaces/all.json

Run this once to access all plugins

Step 2: Install this plugin

/plugin install genkit-ui-generator@all

Quick Install

Use this plugin's auto-generated marketplace JSON for individual installation

When to use: If you only want to try this specific plugin

Step 1: Add this plugin's marketplace

/plugin marketplace add https://claudepluginhub.com/marketplaces/plugins/genkit-ui-generator.json

Step 2: Install the plugin

/plugin install genkit-ui-generator@genkit-ui-generator

README

Genkit Plugin for Claude Code

Build production-ready AI applications with Genkit directly from Claude Code

A comprehensive Claude Code plugin that streamlines Genkit development with intelligent commands, templates, and an AI assistant specialized in Genkit best practices.

🎉 Now Available: VS Code Extension!

The official Genkit for VS Code extension is now live on the VS Code Marketplace!

Quick Install:

ext install amitpatole.genkit-vscode

Features:

⚡ 6 Genkit commands in Command Palette
📝 7+ code snippets for rapid development
🔍 Genkit Explorer sidebar with project navigation
⚙️ Customizable settings and auto-start dev server
🖥️ Cross-platform: Windows, Linux, macOS

📖 Extension Documentation | 🚀 Quick Start Guide

🤖 Autonomous Agents (NEW!)

This repository is monitored and maintained by autonomous agents running 24/7:

Schedule Enforcement Agent

✅ Runs every 5 minutes
✅ Enforces deployment window:

# Check if agents are running
cat .github/agent-status/*.txt

# View recent reports
ls -lt agent-reports/

# 1. Initialize a new project
/genkit-init

# Follow the interactive prompts:
# - Project name: my-ai-app
# - Language: TypeScript
# - AI Provider: Anthropic Claude

# 2. Navigate to your project
cd my-ai-app

# 3. Add your API keys to .env
# Edit .env and add:
# ANTHROPIC_API_KEY=your_key_here

# 4. Start development server
/genkit-run

# 5. Open Genkit Developer UI
# Visit http://localhost:4000

# In your Genkit project
/genkit-flow

# Follow prompts:
# - Flow name: summarizeFlow
# - Template: RAG (Retrieval Augmented Generation)

/genkit-deploy

# Choose deployment target:
# 1. Firebase Cloud Functions
# 2. Google Cloud Run
# 3. Vercel
# etc.

Command	Description	Usage
`/genkit-init`	Initialize new Genkit project	Interactive setup wizard
`/genkit-run`	Start development server	Run from project directory
`/genkit-flow`	Generate new flow from template	Choose from 6 templates
`/genkit-deploy`	Deploy to production	Multiple platform support
`/genkit-doctor`	Health check and diagnostics	Validates entire setup

@genkit-assistant How do I implement a RAG flow with Claude?

import { defineFlow } from '@genkit-ai/flow';
import { claude35Sonnet } from '@genkit-ai/anthropic';
import { z } from 'zod';

export const chatFlow = defineFlow(
  {
    name: 'chat',
    inputSchema: z.object({
      message: z.string(),
      history: z.array(z.object({
        role: z.enum(['user', 'assistant']),
        content: z.string(),
      })).optional(),
    }),
    outputSchema: z.string(),
  },
  async (input) => {
    const messages = [
      ...(input.history || []),
      { role: 'user', content: input.message },
    ];

    const result = await claude35Sonnet.generate({
      messages,
    });

    return result.text;
  }
);

export const ragFlow = defineFlow(
  {
    name: 'rag',
    inputSchema: z.object({
      question: z.string(),
      maxResults: z.number().default(5),
    }),
    outputSchema: z.object({
      answer: z.string(),
      sources: z.array(z.string()),
    }),
  },
  async (input) => {
    // Retrieve relevant documents
    const docs = await vectorStore.search(input.question, {
      limit: input.maxResults,
    });

    // Generate answer with context
    const result = await claude35Sonnet.generate({
      prompt: `Context:\n${docs.map(d => d.content).join('\n\n')}\n\nQuestion: ${input.question}\n\nAnswer:`,
    });

    return {
      answer: result.text,
      sources: docs.map(d => d.id),
    };
  }
);

# Anthropic (Claude)
ANTHROPIC_API_KEY=sk-ant-...

# Google AI (Gemini)
GOOGLE_AI_API_KEY=AIza...

# OpenAI (GPT)
OPENAI_API_KEY=sk-...

# Optional: Custom configuration
PORT=3000
NODE_ENV=development

import { configureGenkit } from '@genkit-ai/core';
import { claude } from '@genkit-ai/anthropic';
import { googleAI } from '@genkit-ai/googleai';

export default configureGenkit({
  plugins: [
    claude({
      apiKey: process.env.ANTHROPIC_API_KEY,
    }),
    googleAI({
      apiKey: process.env.GOOGLE_AI_API_KEY,
    }),
  ],
  logLevel: 'debug',
  enableTracingAndMetrics: true,
});

# Install globally
npm install -g genkit-cli

# Or run without global install
npx genkit start

# Copy example env file
cp .env.example .env

# Edit .env and add your keys
nano .env

# Kill existing process
lsof -ti:4000 | xargs kill -9

# Or change port in your start script
PORT=4001 npm run dev

/genkit-doctor

/plugin install genkit-test-writer
/plugin install genkit-monitor
/plugin install genkit-image
# ... and 31 more!

genkit-ui-generator

Installation

From All Plugins

Quick Install

From Category

Genkit Plugin for Claude Code

🎉 Now Available: VS Code Extension!

🤖 Autonomous Agents (NEW!)

Schedule Enforcement Agent

Monitoring & Maintenance Agent

Features

🚀 Quick Project Initialization

💻 Development Tools

📦 Flow Generation

🌐 Deployment Support

🏥 Health Monitoring

🤖 AI Assistant

Installation

From GitHub (Recommended)

From Local Directory

Quick Start

Create Your First Genkit Project

Create a New Flow

Deploy to Production

Commands Reference

Supported Technologies

Languages

AI Models

Deployment Platforms

Flow Templates

1. Simple Chat

2. RAG (Retrieval Augmented Generation)

3. Tool Calling

4. Multi-step

5. Streaming

6. Empty

AI Assistant

Examples

Example 1: Chat Application

Example 2: RAG with Vector Search

Configuration

Environment Variables

Genkit Configuration

Troubleshooting

Common Issues

Health Check

Requirements

Contributing

Plugin Marketplace

🎯 Core Plugin

🛠️ Development & Testing (7 plugins)

🤖 AI Models & Optimization (4 plugins)

💾 Database & Storage (4 plugins)

📊 Monitoring & Performance (4 plugins)

🔐 Security (3 plugins)

🔄 Integration & Automation (5 plugins)

🎨 Media Processing (3 plugins)

📝 Content Creation (2 plugins)

Roadmap

✅ Completed

🚀 Future Plans

Resources

License

Support

Acknowledgments

Statistics

Information

Categories

Keywords