# Popup Studio AI Bkit Gemini Bkit Gemini

> Phase 6: UI Integration

- Skill: `tomevault-io/popup-studio-ai-bkit-gemini-bkit-gemini` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/popup-studio-ai-bkit-gemini-bkit-gemini`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/popup-studio-ai-bkit-gemini-bkit-gemini/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Integrations & APIs
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/popup-studio-ai-bkit-gemini-bkit-gemini

---


# Phase 6: UI Integration

> Connect your frontend to the backend

## Key Tasks

### 1. API Client Setup

```typescript
// lib/api/client.ts
const API_BASE = process.env.NEXT_PUBLIC_API_URL;

export async function fetchAPI<T>(
  endpoint: string,
  options?: RequestInit
): Promise<T> {
  const res = await fetch(`${API_BASE}${endpoint}`, {
    headers: {
      'Content-Type': 'application/json',
      ...options?.headers,
    },
    ...options,
  });

  if (!res.ok) {
    throw new Error(`API Error: ${res.status}`);
  }

  return res.json();
}
```

### 2. Data Fetching

```typescript
// Server Component
async function UserList() {
  const users = await fetchAPI<User[]>('/api/users');

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
```

### 3. Form Handling

```typescript
// Client Component with Server Action
'use client';

export function LoginForm() {
  const [pending, startTransition] = useTransition();

  async function handleSubmit(formData: FormData) {
    startTransition(async () => {
      await loginAction(formData);
    });
  }

  return (
    <form action={handleSubmit}>
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      <button disabled={pending}>
        {pending ? 'Loading...' : 'Login'}
      </button>
    </form>
  );
}
```

### 4. State Management

- Server State: React Query / SWR
- Client State: Zustand / Jotai
- Form State: React Hook Form

## Integration Checklist

- [ ] API client configured
- [ ] Authentication flow working
- [ ] Error boundaries added
- [ ] Loading states implemented
- [ ] Optimistic updates where needed

## Next Phase

After completion: `/phase-7-seo-security` (Dynamic/Enterprise) or `/phase-9-deployment` (Starter)

---
> Source: [popup-studio-ai/bkit-gemini](https://github.com/popup-studio-ai/bkit-gemini) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-20 -->