Building DevRel Copilot: A Technical Deep Dive into AI-Powered Developer Relations

#ai #programming #javascript #dailybuild2026

Developer Relations (DevRel) is a unique field that blends engineering, content creation, and community building. As a DevRel professional, you're constantly switching between writing blog posts, planning events, and building demos. To streamline this workflow, we've created DevRel Copilot—a command center that leverages Google's Gemini 3.1 Pro to generate structured, actionable strategies.

In this post, we'll dive into the technical architecture, prompt engineering, and UI patterns that make this app work.

The Core Architecture

The application is built with React 19 and Vite, focusing on a clean, modular structure. The central state management resides in App.tsx, while the AI logic is encapsulated in a dedicated library.

1. Multi-Provider Integration

We expanded the app to support multiple LLM providers. While Gemini remains the default, users can now plug in their own keys for OpenAI, OpenRouter, or even local Ollama instances. We used the openai SDK for all OpenAI-compatible endpoints, ensuring a unified interface for non-Gemini models.

function getAIClient(settings: AppSettings) {
  const provider = settings.activeProvider;
  if (provider === 'gemini') {
    return new GoogleGenAI({ apiKey: settings.providers.gemini.apiKey || process.env.GEMINI_API_KEY });
  }
  return new OpenAI({
    apiKey: settings.providers[provider].apiKey,
    baseURL: settings.providers[provider].baseUrl,
    dangerouslyAllowBrowser: true
  });
}

2. Structured AI Outputs with Gemini & OpenAI

One of the biggest challenges with LLMs is getting consistent, machine-readable data. We solved this by using the responseSchema feature in the @google/genai SDK. This ensures that the model always returns a valid JSON object that matches our UI's expectations.

// src/lib/gemini.ts
const schemas = {
  content: {
    type: Type.OBJECT,
    properties: {
      contentPlan: { type: Type.STRING, description: "High-level content plan" },
      twitterThread: { type: Type.ARRAY, items: { type: Type.STRING } },
      // ... more properties
    },
    required: ["contentPlan", "twitterThread", ...]
  },
  // ... other module schemas
};

By defining these schemas, we can directly map the AI's response to our React components without complex parsing or error-prone regex.

2. Smart Section Regeneration

A key UX feature of DevRel Copilot is the ability to regenerate specific sections. If you like the overall content plan but want a different Twitter thread, you can regenerate just that part.

To achieve this, we send the existing strategy back to the model as context:

export async function regenerateSection(params: GenerateParams, sectionKey: string, existingData: any) {
  const prompt = `
    ... (Product Context) ...
    Existing Strategy: ${JSON.stringify(existingData, null, 2)}
    Task: Regenerate ONLY the "${sectionKey}" section. Provide a new, improved version.
  `;
  // ... (API call with a schema that only includes the requested sectionKey)
}

This "contextual regeneration" allows the model to maintain consistency with the rest of the strategy while providing fresh ideas for the specific section.

UI & UX: The Command Center Feel

We wanted the app to feel like a professional tool, not just another chatbot. We used Tailwind CSS and Motion to create a sleek, responsive interface.

1. Responsive Sidebar Navigation

The fixed sidebar allows users to switch between modules (Content, Events, Demos) instantly. We used a simple state-driven approach to swap out the OutputPanel content based on the active tab.

2. Input Validation & Feedback

To ensure high-quality AI outputs, we implemented strict input validation. The "Generate" button is disabled until the core product details are provided, and we use a custom loading state with a progress indicator to manage user expectations during the 5-10 second generation window.

// src/components/InputPanel.tsx
const handleGenerateClick = () => {
  if (!data.product_name.trim() || !data.product_description.trim()) {
    setShowValidation(true);
    return;
  }
  onGenerate();
};

🚀 Lessons Learned

Prompt Engineering is Key: The system prompt ("You are an expert Developer Relations strategist...") is crucial for setting the right tone and avoiding generic marketing fluff.
JSON Schema is a Game Changer: Using responseSchema eliminated 90% of the parsing errors we typically see with LLMs.
Context Matters: Providing the existing strategy during regeneration significantly improves the consistency of the new output.

DevRel Copilot is more than just a wrapper around an LLM; it's a purpose-built tool that understands the specific needs of DevRel professionals. By combining structured AI outputs with a modern React frontend, we've created a powerful MVP that can be easily extended with new modules and features.