React Router v7 + LLMRestClient Demo

Este proyecto demuestra cómo usar LLMRestClient dentro de funciones action de React Router v7 para interactuar con Ollama.

🚀 Características

• ✅ React Router v7 con funciones action
• ✅ LLMRestClient para comunicación con Ollama
• ✅ Formularios con manejo de estado de carga
• ✅ Navegación entre páginas
• ✅ Manejo de errores y respuestas
• ✅ Conexión/desconexión al servidor LLM

📋 Requisitos

• Node.js 18+
• Ollama instalado y ejecutándose en http://localhost:11434
• Al menos un modelo descargado (ej: llama3.2:3b)

🛠️ Instalación

npm install

🚀 Ejecución

1. Iniciar Ollama (si no está ejecutándose)

ollama serve

2. Ejecutar la aplicación React Router

npm run dev:react

La aplicación se abrirá automáticamente en http://localhost:3000

📖 Uso

Páginas disponibles:

1. 🏠 Inicio - Información general del proyecto
2. 🤖 Consulta LLM - Formulario para enviar consultas al modelo
3. 🔗 Conexiones - Gestión de conexiones al servidor LLM

Ejemplo de uso:

1. Ve a la página "🔗 Conexiones" y haz clic en "🔗 Conectar"
2. Ve a "🤖 Consulta LLM" y selecciona un modelo
3. Escribe tu consulta y haz clic en "🚀 Enviar Consulta"
4. Ve la respuesta del modelo en tiempo real

🔧 Código de ejemplo

Función Action de React Router v7:

export async function llmAction({ request }: { request: Request }) {
  const formData = await request.formData();
  const query = formData.get("query") as string;
  const model = (formData.get("model") as string) || "llama3.2:3b";

  // Crear instancia del cliente LLM
  const client = new LLMRestClient({
    apiUrl: "http://localhost:11434/api/chat",
    model: model,
  });

  // Conectar al servidor
  await client.connect();

  // Procesar la consulta
  const respuesta = await client.processUserQuery(query);

  // Desconectar cuando termines
  await client.disconnect();

  return {
    success: true,
    query,
    response: respuesta,
    model,
  };
}

Componente con Formulario:

function LLMQueryForm() {
  const actionData = useActionData() as any;
  const navigation = useNavigation();
  const isSubmitting = navigation.state === "submitting";

  return (
    <Form method="post" action="/llm-query">
      <textarea name="query" required />
      <select name="model">
        <option value="llama3.2:3b">llama3.2:3b</option>
      </select>
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "🔄 Procesando..." : "🚀 Enviar"}
      </button>
    </Form>
  );
}

📁 Estructura del proyecto

src/
├── llm_rest_client.ts      # Cliente LLM para Ollama
├── react-router-example.tsx # Aplicación React Router v7
├── main.tsx                # Punto de entrada
└── index.ts                # Servidor Hono (alternativo)

🔗 Enlaces útiles

• React Router v7 Documentation
• Ollama Documentation
• Model Context Protocol

🤝 Contribuir

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📄 Licencia

Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE para detalles.